Frequently Requested Simple Modifications / Tweaks

2456713

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 21, 2013
    einat wrote: »
    Thanks, this was quick (-:

    Was I supposed to use this instead of leftquark's original code or as an addition?
    When I added it - nothing changed.
    When I used only this - then the boarder for both thumbnails and photo were gone

    I didn't look at his code. I use this on my thumbnail gallery.
  • einateinat Registered Users Posts: 193 Major grins
    edited August 21, 2013
    I didn't look at his code. I use this on my thumbnail gallery.


    Mine are smugmug style, that's why it didn't work.
    But never mind, I'll leave it for now.

    Thanks, though.
  • einateinat Registered Users Posts: 193 Major grins
    edited August 21, 2013
    BTW, Mike, your B&Ws from Yosemite are stunning!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 21, 2013
    I kind of figured you were using a different gallery format when it didn't work.

    Thanks for the compliment! bowdown.gif
  • rammarcelorammarcelo Registered Users Posts: 12 Big grins
    edited August 21, 2013
    Hi Aaron,

    I really like your site! I would like to ask about your slideshow on the homepage, how can I do it? And what design did you use? headscratch.gif
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 22, 2013
    einat wrote: »
    Is there a way to have the border only around the thumbnails, not the enlarged photo?

    Einat, yes, there is. Replace the first half of the original code I had with the following:
    /* Add 1 pixel border around the thumbnails  */
    .sm-user-ui .sm-gallery-tilesnav .sm-image {
      border: 1px solid #4F4F4F;
      padding: 0px;
    }
    
    You still need the second half of the original code.

    The images in the thumbnail and the enlarged photo both have the class "sm-image" associated with them. However, the area where the thumbnails are is called "sm-gallery-tilesnav". By replacing the ".sm-gallery-smugmug" in my original code with the "sm-gallery-tilesnav" you restrict the border only to the thumbnails area.

    I added the full code up at the top in case you need the full thing.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 22, 2013
    Update 2013-08-13 11:19pm PT: Added code for border around thumbnails in SmugMug Layout, but no border around the large image
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 22, 2013
    rammarcelo wrote: »
    I really like your site! I would like to ask about your slideshow on the homepage, how can I do it? And what design did you use? headscratch.gif

    Unfortunately rammarcelo my live site (as of August 21, 2013) is still my Legacy SmugMug site. There is no way to do the fullscreen slideshow on the homepage as of now in the New SmugMug. Once this feature is added I will go live. Until then you're looking at my old design.

    For my New SmugMug I started with a copy of "Arrow" and customized it from there. The screenshots you see above are my modifications from that theme.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 22, 2013
    I modified the code slightly wanting a border, radius & drop shadow… while in firefox webdev all shows… but when I actually put the code into the theme then the shadow disappears in safari… ??? It shows in firefox though. Do I need a different code to add the shadow & make it stick for various browsers?
    Here's the code:
    /************* START SMUGMUG GALLERY SYTLE THUMBS AND PHOTO ***********/
    /* Add 1 pixel border around the thumbnails and photos */
    .sm-user-ui .sm-gallery-smugmug .sm-image {
      border: 1px solid #583B1E;
      padding: .2px;
      border-radius:4px;
      box-shadow: 8px 8px 14px -6px rgba(0,0,0.8,0.8);
    }
    
    /* Set the overflow of the images to be visible so the border actually displays properly */
    .sm-user-ui .sm-gallery-smugmug .sm-tile-content {
      position: relative;
      display: block;
      overflow: visible;
    }
    /************* END SMUGMUG GALLERY SYTLE THUMBS AND PHOTOS ***********/
    
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 22, 2013
    Cindy wrote: »
    ...put the code into the theme ...
    Why not put it "all galleries" CSS?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 22, 2013
    Hmmm… Will it work there better? I've been putting any & all CSS that can be placed in the theme there so that if I need to change at a later date it would at least have most of it in one place for easier copying over. Having to place bits & pieces here & there is truly imho not a + for the changeover :-(
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • einateinat Registered Users Posts: 193 Major grins
    edited August 22, 2013
    leftquark wrote: »
    Einat, yes, there is. Replace the first half of the original code I had with the following:
    /* Add 1 pixel border around the thumbnails  */
    .sm-user-ui .sm-gallery-tilesnav .sm-image {
      border: 1px solid #4F4F4F;
      padding: 0px;
    }
    
    You still need the second half of the original code.

    The images in the thumbnail and the enlarged photo both have the class "sm-image" associated with them. However, the area where the thumbnails are is called "sm-gallery-tilesnav". By replacing the ".sm-gallery-smugmug" in my original code with the "sm-gallery-tilesnav" you restrict the border only to the thumbnails area.

    I added the full code up at the top in case you need the full thing.



    You are great. I also really appreciate the explanation.
    And I also love you FWx photos. I shoot them too, I even used to have a license to launch them.
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited August 22, 2013
    leftquark wrote: »
    Narrowing the bands for each item doesn't require CSS, luckily! That's a setting in the smugmug dimensions. In your customizer on your menu click the ruler icon to bring up the dimensions, margins, etc. I think I set my width to 90%
    I don't think I was clear. I am wishing to narrow the vertical depth of each of bars that contains a top level menu item, not the width of the vertical menu! I've also lost the line under the last of my menu items.

    Can you kindly help me with these issues?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    I don't think I was clear. I am wishing to narrow the vertical depth of each of bars that contains a top level menu item, not the width of the vertical menu! I've also lost the line under the last of my menu items.

    Can you kindly help me with these issues?

    Webster, do you have an example you can show me? When I looked at your page I don't see any borders. Are you just trying to make the vertical height of each smaller (with no border). If so, in my code I have the padding set to 7 pixels above and 7 pixels below. Change that to a smaller number and the vertical distance should shrink.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    2013-08-24 1:32 AM PT: Added Full Screen Slideshow on Homepage.
    2013-08-24 1:32 AM PT: Added Emphasize the Current Page in the Nav Bar
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    2013-08-24 1:51 AM PT: Added the word "Close" after the "X" in Lightbox
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • MotoriderMotorider Registered Users Posts: 60 Big grins
    edited August 24, 2013
    Thank You!
    Aaron, I'm still learning the basics of all this stuff & I really appreciate you posting this helpful information. I've incorporated a couple of your nifty magic CSS stuff into my site & I love it.

    I'm still building & adding content to my new non-photo website (but after seeing all your incredible shots, I'm seriously considering upgrading my camera).

    I'm struggling a bit with a graphic I placed in the footer of my 'entire site'. When I added your code that adds a border around 3 static pictures I have on this page, I end up getting a border around the footer graphic also. It's happening because I added this graphic as a 'photo' type block to the footer of my 'entire site' so your code is affecting it also.

    I'd certainly be willing to post this question in the customization forum if you're not sure (or don't have time), but on the off-hand chance you do know, I thought I'd ask.

    Here goes. I want my footer graphic to be right-justified but can't figure out how to do it. If I add the graphic as a second 'logo' to my entire site & try to adjust it's location with CSS I end up also moving my primary logo (where yours is). So I originally thought if I added it as a 'photo' rather than a 'logo' I might have better luck, but now I'm getting the border. Do ya catch my drift?

    Cheers & thanks again!
  • MotoriderMotorider Registered Users Posts: 60 Big grins
    edited August 24, 2013
    I'm still not sure how, but it looks like I may have figure this out myself. Have a look at my site if you like. Here's the code I used:

    /* change position of logo in footer */
    .sm-user-ui
    .sm-page-layout-region-bottom
    {
    float: right;
    }

    /* change position of 'Photo Sharing by SmugMug' text */
    .sm-page-powered-by
    a:first-child{
    position: absolute; top: 200px; left: 0;
    }

    /* change position of 'Login' text */
    .sm-muted
    {
    position: absolute; top: 200px; left: 200;
    }
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    Motorider wrote: »
    I'd certainly be willing to post this question in the customization forum if you're

    Just wanted to give you a quick response now ... I'm running out for the day to do some errands but I'll take a look when I get back.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    bazancik wrote: »
    Hi Aaron,

    looks like managed to sort some of the navbar problems - and it was all looking good... but did something and not sure what...

    Any help with any of the above would be greatly appreciated stuck and not sure like the new interface at all!

    Just wanted to give you a quick response now ... I'm heading out to run some errands but I'll take a look when I get back.

    I did want to quickly mention that whatever dgrin did to your attachment, it's unfortunately super teeny and hard to see anything. Any chance you have a link to a bigger version of your screenshot mashup?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 24, 2013
    bazancik wrote: »

    Still can't see the screenshots :( The "Ebays" folder isn't listed and I just see 2 galleries (motorcycles and one other)
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 25, 2013
    bazancik wrote: »
    1. ... but only one gallery ( PORTFOLIO) is currently showing OK. The rest of links (folders / galleries) are not displaying at al (see the attached screenshot mashup below) -- can't figure this one out!
    You prob. need to look at your gallery settings. Also know that there's a slight difference between "preview" and done. I think Preview shows you slightly what your users would see, where as when you click done/publish it shows you what you'd see. There's a number of threads on here about folders / galleries not showing up properly; have you looked at any of those?
    bazancik wrote: »
    2. Add to Navbar --> on hover #8cca1
    Try this:
    .sm-page-widget-nav-toplink a:hover {
       color: #8cca1!important;
    }
    
    bazancik wrote: »
    3. Change text colour of the secondary (footnote) navbar to white / #8cca1e on hover (Put two separate navbars - should use footnote to make it work?)
    I'd have to see you implement this for me to get a better handle. Right now I don't see a secondary navbar on your page. What browser do you use? If you use Chrome, you can right click on an area and do "Inspect Element". It'll start to show you the code and if you click on code, it'll start showing you what area of the webpage it's for. You can drill down until you get to the footnote area. When you find the name of the footnote area you can do the code I typed above for the hover ... except add ".WHATEVER_FOOTNOTE_NAME_IS " before ".sm-page-widget-nav-toplink ...". That should do the trick. To change its color to white instead of doing "a:hover" just do "a".
    bazancik wrote: »
    4. CAPITILIZE sub-links in main navigation
    This is done easily through the customizer. In your menu block click the settings. You'll see an option for secondary links. Just set it to Capitalize.
    bazancik wrote: »
    5. BLOG: Blogspot feed: currently all text in red L and feed is narrow and left aligned

    a. Stretch the text to fit the window – or at least menu bar!
    b. Change text colour to white + Heading in #8cca1e
    c. Is there a way to have a snippets divided with a line that expands (as here: http://franeksiedlok.blogspot.co.nz/)? Or add a simple navigation of posts?
    Did you get this figured out or do you still want help with this?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 25, 2013
    Motorider wrote: »
    I'm still not sure how, but it looks like I may have figure this out myself. Have a look at my site if you like. Here's the code I used:

    Looks like you got it! Let me know if you have any other questions!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 25, 2013
    bazancik wrote: »
    main questions are:
    - how to clean up the directory of categories / subcategories (still visible through Legacy)
    - fix folders and galleries not showing up
    - fix top navbar:
    - change colour on hover
    - capitilise and align sub-galleries
    - fix disappearing and slowly loading navbars when moving to another gallery
    - fix bottom navbar - change to white + different colour on hover
    - fix blog / feed: different font colours for title / text; snippet of post instead of whole post + navigation

    Cheers again - back to deleting (and already fearing all the hours of uploading...)

    See above for hover color and capital/sub-galleries.
    This whole time I thought your live site was the new smugmug. Just realized it's legacy.

    Without being live it's hard for me to give you tips but here's what I can offer

    Blog text color:
    .sm-feed-item-title { color: white!important; }
    .sm-feed-item-description { color: white!important;
    

    To fix the snippet/vs entire post I think you have to go into the RSS settings on your blog. Mine is set only to show a snippet. SmugMug only shows what the RSS feed gives, so it's not a smugmug issue. Try looking in your blog settings :/

    See my suggestion above about bottom navbar colors.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Sir_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited August 25, 2013
    You can also add "Full Screen" after the double arrow icon using this code, similar to "Close" after the X.
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
      content: ' Close';
      font-size: 18px;
    }
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after {
      content: ' Full Screen';
      font-size: 18px;
    }
    
  • Gobo FongoGobo Fongo Registered Users Posts: 28 Big grins
    edited August 25, 2013
    Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

    /*change breadcrumb color*/
    .sm-user-ui .sm-breadcrumb-item{
    color:#00fffb !important;
    }

    Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.
    Check out my website at: www.billibilli.com
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 25, 2013
    Gobo Fongo wrote: »
    Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

    /*change breadcrumb color*/
    .sm-user-ui .sm-breadcrumb-item{
    color:#00fffb !important;
    }

    Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.
    H1 is the gallery name.
    [COLOR=Red].sm-user-ui .sm-breadcrumb-item h1,[/COLOR]
    .sm-user-ui .sm-breadcrumb-item [COLOR="Red"]a[/COLOR] {
    color:#00fffb !important;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Gobo FongoGobo Fongo Registered Users Posts: 28 Big grins
    edited August 25, 2013
    Thanks for the quick reply!
    Check out my website at: www.billibilli.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 26, 2013
    Gobo Fongo wrote: »
    Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

    /*change breadcrumb color*/
    .sm-user-ui .sm-breadcrumb-item{
    color:#00fffb !important;
    }

    Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.

    I see you may have already gotten it to work, but this worked for me:
    .sm-breadcrumb-item, .sm-breadcrumb-item a {
      color: #0fffb!important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 26, 2013
    2013-08-25 10:28 PM PT: Added the word "Full Screen" after the double arrow
    2013-08-25 10:35 PM PT: Added Changing the Breadcrumb text color
    2013-08-25 11:02pm PT: Change the width of the lightbox caption
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.