Frequently Requested Simple Modifications / Tweaks

1356713

Comments

  • picturebikepicturebike Registered Users Posts: 158 Major grins
    edited August 26, 2013
    Aaron your site is awesome i thought it was the new smug at first, i got exited when i looked in your galleries and saw the old style next/prev buttons etc then i realised it was legacy. have you come up with a code for adding these back into new smug ?
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited August 26, 2013
    leftquark wrote: »
    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).
    Sorry to confuse you. I've since removed the borders again, pending resolution of my issues. I'm surprised about your reference to 7px up and 7px down because the menu wording was sitting low in each band, and I was looking for narrower and equal spacing as in your site. But if that's the key to solving this, I'll experiment with the "7px" parameters and see what i can achieve.

    But I was also trying to achieve a line across under the bottom to fully "enclose" the bottom menu item as you have done, but still can't see how.

    Sorry to be slow in responding to you, but the present problem with no notifications is a pain!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 26, 2013
    Sorry to confuse you. I've since removed the borders again, pending resolution of my issues. I'm surprised about your reference to 7px up and 7px down because the menu wording was sitting low in each band, and I was looking for narrower and equal spacing as in your site. But if that's the key to solving this, I'll experiment with the "7px" parameters and see what i can achieve.

    But I was also trying to achieve a line across under the bottom to fully "enclose" the bottom menu item as you have done, but still can't see how.

    Sorry to be slow in responding to you, but the present problem with no notifications is a pain!

    Yes, the lack of notifications has been bothering me too. Doh!

    Which navbar are you trying to change? The main one with "Home", "New and Featured", "Browse Galleries", etc ... or the sub-navbar under galleries with "Airplanes", "Art", "Architecture", etc?

    My code for adding a border on the bottom of each main navbar link is up top but here's a repaste:
    /* Add a line underneath each link in the menu (nav) bar */
    .sm-page-widget-nav-toplink {
      border-bottom: 1px solid #FFFFFF;
      padding:7px 0;
      width: 90%;
    }
    

    That puts a 1px border on the bottom. I changed the color to white for you (#FFFFFF) since my original grey color is similar to your normal background color. Not sure if you had changed the color when you tried to get it to work?

    The "padding:7px 0;" puts a 7px padding on top/bottom. As you'll see from the graphic here (http://www.htmldog.com/guides/css/beginner/margins/), padding puts 7pixels inside from the border (or in this case, leaves a 7 pixel gap below your text and the bottom line... and puts the next menu-item 7 pixels below the previous bottom line. I squished the line in to 90% so it didn't fill the entire width of the "left" column of the page. Then I went into the Menu Content block and played with the left/right margins until it moved in to be centered.

    I assume you know you can control your left column width under the customizer "Entire Site" -> "Layout" tab and then scrolling down to "sidebars".

    Hope this helps.
    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
    i got exited when i looked in your galleries and saw the old style next/prev buttons etc then i realised it was legacy. have you come up with a code for adding these back into new smug ?

    I assume you just want it to say "Next and Previous" (or did you also want it to say "1 of 22" instead of "1 / 22"). I spent about 45 minutes this morning trying to get the "next" and "prev" text to show up but I can't figure out what SmugMug is doing with spacing out the "share" and "info", "download", etc buttons. Here's a start and you can go from there:
    .sm-user-ui .sm-gallery-image-bar .sm-fonticon-AngleBracketRightSlim:after {
      content: " Next" !important;
      font-size: 12px;
    }
    
    .sm-user-ui .sm-gallery-image-bar  .sm-fonticon-AngleBracketLeftSlim:after {
      content: " Prev" !important;
      font-size: 12px;
    }
    

    Perhaps email SmugMug Support Heroes and see if they can get it to work?

    The above code places the word "Prev" after the "<" arrow, and "Next" after the ">" arrow. I wanted the "Next" to come before the ">" but when I tried to move the RightSlim bracket to "before" instead of "after", for whatever reason it made the ">" arrow disappear.

    Sorry :(
    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
  • picturebikepicturebike Registered Users Posts: 158 Major grins
    edited August 26, 2013
    Thanks for trying, i was hoping to get it back as it is legacy and its been requested by several people on the here but as yet smugmug havent changed it....
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 26, 2013
    Thanks for trying, i was hoping to get it back as it is legacy and its been requested by several people on the here but as yet smugmug havent changed it....

    Did you see the other thread where a SM developer mentioned they were working on fixing it ... they were just trying to figure out the best way to implement it. That's a good sign :)
    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
    bazancik wrote: »
    So,

    - Still no luck with the galleries not showing (other posts do not give much details of how to fix it). tried with gallery settings - and no luck!

    - in the meantime in the bottom navbar SmugMug added (UNLISTED) next to the link to the gallery (it is supposed to be unlisted -- but can I remove the information?

    - still no luck with changing the colour of the secondary navbar: thought it would be eaier for navigation to have all text changes in white and try to change the colour of the main navmar. Still no idea which 'name' need to use - a screengrab of FF inspector:

    http://www.flickr.com/photos/bazant/9601195761/in/set-72157635244170853

    - in both preview and done -- the navbars are loading with quite a delay. sort of annoying (is it because of the extra CSS code?)

    I can understand customisation to be a bit of a challenge -- but when folder don't show up it becomes a bigger problem with the whole 'upgrade'...

    cheers,

    To change the bottom navbar use the following:
    .sm-page-widget-nav-footer a {
     color: blue !important; 
    }
    

    Change "blue" to whatever color code you want. The ".sm-page-widget-nav-footer" is the footer navbar. You can use that to change additional features like the a:hover, or to add the borders similarly to the code for the top-navbar.

    Don't worry about SmugMug adding (unlisted) to the text in the navbar. It won't show's up for you -- nobody else will see it. Only when you're logged in will you see it.

    Settings are inherited from parent folders. Are you sure you looked at the gallery settings in the folders above it? It sounds like you need to email the Support Heroes about this. They've been responding within an hour or two to my emails so they'll be your best bet. I have no problems having my folders show up. I have a feeling you're doing something funky with your settings still.

    Also, all navbars load fine for me. It may just be your internet connection. If you're really worried, email smugmug about that as well.
    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
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited August 26, 2013
    leftquark wrote: »
    Don't worry about SmugMug adding (unlisted) to the text in the navbar. It won't show's up for you -- nobody else will see it. Only when you're logged in will you see it.

    Great. wasn't sure as it shows in preview / done (and can't see when being logged out)


    leftquark wrote: »
    Also, all navbars load fine for me. It may just be your internet connection. If you're really worried, email smugmug about that as well.

    Based in NZ (so we 20 years behind the world) -- still, logo and footer are fine, they stay on all time, navbars disappear and load for ever.

    Will get Smugmug to work on it

    Thanks!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 26, 2013
    bazancik wrote: »
    ne_nau.gif doesn't work. searched through the inspector and .sm-page-widget-nav-toplink and it does not come up.

    In the footer navbar settings (click the wrench), is it of type "footer" or is of type "horizontal". I assumed you inserted it as a "footer" navbar.
    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
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited August 27, 2013
    leftquark wrote: »
    In the footer navbar settings (click the wrench), is it of type "footer" or is of type "horizontal". I assumed you inserted it as a "footer" navbar.

    ahhh - it was not set as footer. now works for both top and footer navbar as needed.

    awesome - thank you.

    Re folders & galleries: opened a couple of galleries from the organiser and they were showing fine - but not the folders they are in. no news from heroes so far - hopefully can sort it out tomorrow!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 27, 2013
    2013-08-26 11:39pm PT: Added SmugMug Layout: Add "Click to Enlarge" over the thumbnail images when the mouse hovers
    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
  • picturebikepicturebike Registered Users Posts: 158 Major grins
    edited August 27, 2013
    leftquark wrote: »
    Did you see the other thread where a SM developer mentioned they were working on fixing it ... they were just trying to figure out the best way to implement it. That's a good sign :)


    Thanks, no ive not seen that thread theres so many threads flying about things just get lost in them :/
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 27, 2013
    2013-08-27 1:30pm PT: Added Changing the link and link hover color in the Caption of a Photo
    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
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited August 28, 2013
    another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .

    Screen Shot 2013-08-28 at 23.21.46.jpg

    As I have 3 galleries and 1 folder here - is there any way to make the galleries in that folder to pop up below the folder (new row) rather than take me to the folder itself on click (or is that java :) ? that would be fantastic...
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 28, 2013
    leftquark wrote: »
    2013-08-27 1:30pm PT: Added Changing the link and link hover color in the Caption of a Photo

    YES ~ Thank You Aaron!!! I've been trying to figure this out for to long. clap.gifthumb.gifclap.gif
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 28, 2013
    bazancik wrote: »
    another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .


    As I have 3 galleries and 1 folder here - is there any way to make the galleries in that folder to pop up below the folder (new row) rather than take me to the folder itself on click (or is that java :) ? that would be fantastic...

    Unfortunately it looks like JavaScript was required in Legacy to do this. I don't know of any way to do it in the New SM :(
    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
  • dallaswdallasw Registered Users Posts: 37 Big grins
    edited August 28, 2013
    bazancik wrote: »
    another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .

    If you add a 'Folders, Galleries & Pages' content block, it'll show them all on the same row.
  • Smug EricSmug Eric Registered Users, Retired Mod Posts: 333
    edited August 28, 2013
    leftquark wrote: »
    Unfortunately it looks like JavaScript was required in Legacy to do this. I don't know of any way to do it in the New SM :(

    It's a specific content block in new that is Folders, Galleries & Pages
    Eric
    Support Hero and Customeister
    http://www.smugmug.com/help
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 28, 2013
    Smug Eric wrote: »
    It's a specific content block in new that is Folders, Galleries & Pages

    Aha! Good to know! I was always curious what the difference in that was ... vs just inserting a "Folder" a "Galleries" and a "Pages" block! Thanks
    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 28, 2013
    2013-08-28 6:18pm PT: Simplified "Add a Line or Border Around Each Item in Your Menu". Previously I had one set of code for all the menu items and one set of code for the last child. I combined them to take up less lines of code.
    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 29, 2013
    bazancik wrote: »
    almost there - but still struggling with the 2 navbars. All good for the "main' navbar - but wandered how to:
    - apply the lines only to the top(main) navbar rather than both
    - disable showing of sublinks in the secondary one.

    That's what I get from the inspector -- can't find the right class :(

    http://www.franeksiedlok.com/Smug-Folders/Portfolio/i-FxZhm39/0/X2/Screen%20Shot%202013-08-29%20at%2019.31.37-X2.png

    cheers again !

    You already should have the code for the footer. I thought you said it was working? Just remove the "border" part to remove the lines from the footer nav-bar.

    In your footer nav bar your sublinks only show up because you've indented them in your menu block. Why not just delete the links or move them out of being a sub-link?
    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
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited August 29, 2013
    leftquark wrote: »
    You already should have the code for the footer. I thought you said it was working? Just remove the "border" part to remove the lines from the footer nav-bar.

    worked as long as the second navar was set as footer -- but not with horizontal set-up (changed the theme) the whole thing collapsed (argh). so back to looking for the right css id / name to use. tried to work out from the inspector -- but no luck. do I need to get the class -- or what this might look like?
    leftquark wrote: »
    In your footer nav bar your sublinks only show up because you've indented them in your menu block. Why not just delete the links or move them out of being a sub-link?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 29, 2013
    bazancik wrote: »
    worked as long as the second navar was set as footer -- but not with horizontal set-up (changed the theme) the whole thing collapsed (argh). so back to looking for the right css id / name to use. tried to work out from the inspector -- but no luck. do I need to get the class -- or what this might look like?

    This should do the trick for you. All I did was find the DIV tag that was called the footer. You should really be able to figure out from the inspector what the area is called. All you have to do is put your mouse over the different DIV tags and it highlights the area that fits in that. Find the one that looks right ... There aren't many options (header, left, right, footer, etc).
    /* Add a 1 pixel border on the right with 7 pixels padding on the left and right */
    .sm-page-layout-region-footer .sm-page-widget-nav-toplink, .sm-page-layout-region-footer  .sm-page-widget-nav-toplink:last-child {
      border-right: 1px solid #595959 !important;
      padding: 0px 7px 0px 7px !important;
    }
    
    /* Make the footer nav links blue */
    .sm-page-layout-region-footer .sm-page-widget-nav-toplink a {
      color: blue !important  
    }
    
    /* Make the footer nav links hover white */
    .sm-page-layout-region-footer .sm-page-widget-nav-toplink a:hover {
      color: #FFFFFF !important  
    }
    

    Change colors and features as you need. In your case you prob. want to set the border-top (or whatever border you're using in your main nav bar) to 0px. The other option is to figure out the DIV code for the header ... it's prob. called "sm-page-layout-region-header" ... and add that before the .sm-page-widget-nav-toplink ... basically the way the CSS works is that every DIV you give (with a "." before it) calls out a specific area ... The original code assumed you only had 1 nav-bar so I had it apply to all navbars, no matter where it was placed (.sm-page-widget-nav-toplink)... however, if you want to specify a certain area, then you put that area's div code before it (.sm-page-layout-region-footer .sm-page-widget-nav-toplink). Make sense?
    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
  • aztek081aztek081 Registered Users Posts: 44 Big grins
    edited August 29, 2013
    leftquark wrote: »
    Add the word "Download" after the download icon
    Code:
    /* Add the word "Download" after the download button */ .sm-button.sm-button-image-download:after { content: " Download" !important; font-size: 100%; }
    If you feel the font for "Download" is too large, change font-size: 100% to something smaller. I used 95% on my page.

    I haven't unveiled yet would you know if that just shows up on pages that i have marked for originals and have not right clicked protected or will it always be there?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 29, 2013
    aztek081 wrote: »
    I haven't unveiled yet would you know if that just shows up on pages that i have marked for originals and have not right clicked protected or will it always be there?

    It will only be there if the download button is there. For you, when you're logged in, it will always show up. For visitors, they'll only see it when they're able to see it. Any time SmugMug shows the download icon it'll add the word "Download" to it. There should never be a case where the download icon is there and the text isn't. Additionally, there should never be a case where the "download" text is there but the icon is not.
    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
  • GBerdanGBerdan Registered Users Posts: 7 Beginner grinner
    edited August 29, 2013
    The OP really needs to be stickied. This is the most useful post out of all in the "New Smugmug Customization" forum. Not sure how you go about making that happen here.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 30, 2013
    GBerdan wrote: »
    The OP really needs to be stickied. This is the most useful post out of all in the "New Smugmug Customization" forum. Not sure how you go about making that happen here.

    Thanks -- one of the smuggies would have to do it ne_nau.gifbow
    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 30, 2013
    bazancik wrote: »
    another few hours of playing and finally getting towards the right look.

    but still trying to get the 2 vertical navbars look and behave - neded up with the following config:
    - main vertical accordion navbar
    - vertical navbar below

    all displays well, on hover both change colour (guess that's my setting in the theme) but:
    - active page in the accordion not the right colour anymore (code works fine for the bottom navbar)
    - lost the lines in accordion menu - can these be added here as well or work just for 'normal' navbar?

    The code being:
    .sm-page-widget-nav-activepage > a {
    color: #8cca1e!important;
    }

    I tried to add / replace with .sm-page-widget-nav-accordion and .sm-page-widget-nav-accordion-activepage into the codes - that did not work. Any ideas what it should be?

    This appears to be another design inconsistency within SmugMug. The accordian nav bar doesn't have the option to highlight the active page. I looked into this the other day and there's no "activepage" set in it's code. You can either file this as a bug or as a feature request. It seems like a bug to me though?

    Here was my code for the accordion before I abandoned it and went back to a vertical nav-bar:
    /* Accordion: Add a line underneath each link in the menu (nav) bar */
    .sm-page-layout-region-left .sm-nav-item-toplevel {
      border-bottom: 1px solid #595959 !important;
      padding: 7px 0px 7px 0px !important;
      width: 90%;
      margin-bottom: 0px !important;
    }
    
    /* Accordion: */
    .sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label {
      line-height: 17px !important;
      border: 0px !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
  • bazancikbazancik Registered Users Posts: 33 Big grins
    edited August 30, 2013
    leftquark wrote: »
    This appears to be another design inconsistency within SmugMug. The accordian nav bar doesn't have the option to highlight the active page. I looked into this the other day and there's no "activepage" set in it's code. You can either file this as a bug or as a feature request. It seems like a bug to me though?

    Here was my code for the accordion before I abandoned it and went back to a vertical nav-bar:
    /* Accordion: Add a line underneath each link in the menu (nav) bar */
    .sm-page-layout-region-left .sm-nav-item-toplevel {
      border-bottom: 1px solid #595959 !important;
      padding: 7px 0px 7px 0px !important;
      width: 90%;
      margin-bottom: 0px !important;
    }
    
    /* Accordion: */
    .sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label {
      line-height: 17px !important;
      border: 0px !important;
    }
    


    at least this time it was not my inability:) will wait till they fix it - and back to vertical navbar for the time being...

    cheers!!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 30, 2013
    bazancik wrote: »
    hopefully last question for a while (if all this works - back to uploading and sorting the photos before going life!)

    I want to add a white border to each photo that is displayed - as a thumb of a gallery or folder, as a thumb inside the gallery and as a photo (whether fullscreen, in journal etc) - basically every visible photo to get a bit of a border.

    Found some codes to do it for smugmug gallery - but that really was the only one that worked so far. is there any way to do it?

    cheers,

    Just remove the smugmug gallery identifier in my original code. This should work ...:
    /* Add 1 pixel border around the thumbnails and photos */
    .sm-user-ui .sm-image {
      border: 1px solid #4F4F4F;
      padding: 0px;
    }
    
    /* Set the overflow of the images to be visible so the border actually displays properly */
    .sm-user-ui .sm-tile-content {
      position: relative;
      display: block;
      overflow: visible;
    }
    
    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.