Frequently Requested Simple Modifications / Tweaks

1789101113»

Comments

  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited May 27, 2016
    Try to change .... to this ... In theory it should do the trick :)
    Unfortunately, no. eek7.gif
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 27, 2016
    This should expand the width of the title:
    /* Make the lightbox title wider */
    .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info>div {
        max-width: 1000px !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
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited May 27, 2016
    leftquark wrote: »
    This should expand the width of the title ...
    No, it didn't ... but wait. I found this code that I had previously commented out some time in the distant past, which I made active again and it works!
    /* Widen the Lightbox Title/Captions Box */ 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, 
    .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords,
    .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, 
    .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p {
        max-width: 1000px !important;
        }
    
    Someone better versed in the mysteries of CSS will know why this works while the other solutions don't, but thanks anyway to everyone who offered help.
  • TrasmcTrasmc Registered Users Posts: 130 Major grins
    edited June 2, 2016
    Hi everyone - thanks in advance for your help.

    I'm looking for a way to change the size of the gallery name in Smugmug style (or probably all styles). Here's an example gallery link:

    http://www.brickstreetphotos.com/Events/20152016-Zionsville-Show-Choir/Finale-Gallery-1-2016/

    The name of the gallery is too large - any way to reduce the size of the font?

    Thanks again!
    Learning a little more every day.

    Come visit me at...

    www.brickstreetphotos.com
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 2, 2016
    Trasmc wrote: »
    Hi everyone - thanks in advance for your help.

    I'm looking for a way to change the size of the gallery name in Smugmug style (or probably all styles). Here's an example gallery link:

    http://www.brickstreetphotos.com/Events/20152016-Zionsville-Show-Choir/Finale-Gallery-1-2016/

    The name of the gallery is too large - any way to reduce the size of the font?

    Thanks again!
    Here's what I put in "all galleries" CSS
    .sm-gallery-cover-title {
       font-size: 200%;
       color:gold!important;
    }
    
    Example here
    http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-May/2016-05-30-WEKI
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • LiquidtravelLiquidtravel Registered Users Posts: 21 Big grins
    edited June 13, 2016
    smug mug gallery style
    Hello and thanks for all the great info. I noticed in your galleries (you are using the smugmug gallery style it appears), you have the large image on the left and the thumbnails on the right. How did you implement this. I can't seem to figure it out.

    http://www.liquidtravel.org/Most-Popular/i-4VNdGj9

    vs.

    http://www.aaronmphotography.com/Places/SF/

    Also, how did you get the thumbnails and top of the main image to line up. My larger image is always lower than the top of my thumbnails?

    Lastly, I can't seem to figure out the sub linking. I would like to have sublinks that appear under gallery when you hover over it showing the various galleries and then the same under each gallery for the folders within them.

    thanks again.


    Layne
  • LiquidtravelLiquidtravel Registered Users Posts: 21 Big grins
    edited June 13, 2016
    OK, I found your site with all the very valuable info and was able to swap the thumbnails and large image and then align them at the top. Awesome. Thanks for that.

    I was not able to find any info (might have overlooked it) regarding the menus and sub menus. If it is there can you point me to it.

    When I did swap the images with the thumbnails, I noticed the pagination and tools icons were pushed about an inch underneath. Any way to fix that?

    How about the buy photos button, can that be aligned to the right side of thumbnails instead of pushing out beyond them?

    thanks again.

    Layne
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 13, 2016
    Hi Layne

    Not that I would be leftquark, but he has actually an entire website for his smug mug customizations here: http://www.aaronmphotography.com/Customizations/

    So swapping them from left to right is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Swap-Photo-Thumbnails-SM
    Line up is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Align-Photo-And-Thumbs

    Menu sub-links are here: http://www.aaronmphotography.com/Customizations/Navbar

    And you just gave me a couple of ideas for my website...I suppose it is good the weather forecast from Wednesday on is rainy :D

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • LiquidtravelLiquidtravel Registered Users Posts: 21 Big grins
    edited June 13, 2016
    thanks for your response. I did find those customizations you listed and they were implemented as described. There were a few more questions which I posted above that I am still trying to figure out including why the pagination and tools are so far below the main image.

    As for the subnav, I saw those customizations as well but I could not find how to implement the subnav itself, only how to change the color.

    thoughts?

    thanks again

    Layne
    Hi Layne

    Not that I would be leftquark, but he has actually an entire website for his smug mug customizations here: http://www.aaronmphotography.com/Customizations/

    So swapping them from left to right is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Swap-Photo-Thumbnails-SM
    Line up is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Align-Photo-And-Thumbs

    Menu sub-links are here: http://www.aaronmphotography.com/Customizations/Navbar

    And you just gave me a couple of ideas for my website...I suppose it is good the weather forecast from Wednesday on is rainy :D

    Good luck

    Lille Ulven
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 13, 2016
    As for the subnav, I saw those customizations as well but I could not find how to implement the subnav itself, only how to change the color.
    By subnav, do you mean nested menu items? You can nest menu items by dragging them to the side in the menu content block.

    From the help page How do I make a navigation menu?:
    Create a Dropdown Menu

    When you choose to add a link to a SmugMug Folder page that contains folders, galleries, and pages, you can include all the pages nested under that folder. This will generate a navigation link with a dropdown menu to display those folders/galleries/pages.
    ...
    To nest specific dropdown items, drag an item to the right in the list. That list item will then nest under the item above it.
    --- Denise
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 13, 2016
    Sorry I didn't pick up your questions earlier, Layne.

    On how to generate a menu with sub-menus look here: http://help.smugmug.com/customer/portal/articles/1222523 pretty much at the bottom of the page, you just have to drag the entry that is supposed to be a sub-menu of another entry a little further to the right side :)

    We actually wrote our posts at almost the same time - I hadn't seen your "in between post" from 4:50 when I posted mine from 4:52 :)

    For your cover-buttons movement: I cannot see a solution to that one. Maybe someone else can help you out here?
    And for your pagination and tool items: their position depends on the maximum height of your photos in a gallery. So if you have say 100 photos and 99 of them have a height of 200px but the last one is 500px in height...well the distance to the pagination and tool items will be fitting to the 500px photo.

    Hope this helps at least a little bit. (Please add your website to your signature, it makes it so much easier to help you out :))

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • LiquidtravelLiquidtravel Registered Users Posts: 21 Big grins
    edited June 13, 2016
    Thanks so much. Nav is now working.

    Layne

    www.liquidtravel.org
  • BakuBaku Registered Users Posts: 8 Big grins
    Thank you for the effort making all those customization available.
  • HenrikSundholmHenrikSundholm Registered Users Posts: 10 Big grins
    edited January 3, 2018
    I will thank @leftquark loads as your CSS snippets has helped me gain headway with my SmugMug design. I have two questions:

    1. You have two clear vertical stripes of your background image to the far left and right respectively. How is this achieved? I use SmugMugs built in "mask" option to dim the background image but it effects the entire site, leaving no untouched bars.

    2. How do you change the form and color of your scroll bar? Couldn't find this customization on your website.

    Thanks a lot in advance... :smile:
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @HenrikSundholm said:

    1. How do you change the form and color of your scroll bar? Couldn't find this customization on your website.



      Thanks a lot in advance... :smile:

    You can search for "Custom Scrollbar" on Google. This might help: https://css-tricks.com/almanac/properties/s/scrollbar/

    Keep in mind that not all browsers support this. I don't think Firefox does.

  • rjwilnerrjwilner Registered Users Posts: 86 Big grins
    While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?

    I ask only because a brief buzz through this thread leads me to believe there are some good suggestions provided here. But with the exception of a couple posts, this thread pretty much ends in 2016. And that makes me wonder how 'current' some of the suggestions might be. Very possible some have been incorporated into the current product, or that the changes made have made some of them obsolete.

    Not looking for feedback on specific suggestions. But it might be helpful to know when 'the new SM' was introduced to give us some idea how far back we can rely on suggestions continuing to be functional w/o some serious testing of our own.

    Any feedback appreciated!
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    @rjwilner said:
    While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?

    I believe it was in 2013.

  • rjwilnerrjwilner Registered Users Posts: 86 Big grins
    > @denisegoldberg said:
    > @rjwilner said:
    > While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?
    >
    >
    >
    >
    >
    > I believe it was in 2013.

    Ohhhh...thanks. For some reason I was thinking it had been much more recent. I guess because I don't think of products introduced in 2013 as 'new'. :)
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited August 31, 2018

    @rjwilner said:
    Ohhhh...thanks. For some reason I was thinking it had been much more recent. I guess because I don't think of products introduced in 2013 as 'new'. :)

    It was referred to as "new" when it was released! Note that the first post in this thread is dated 2013.

  • picomomentspicomoments Registered Users Posts: 34 Big grins

    Hi all, How can I remove the left and right padding from my site: picomoments.smugmug.com?

  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins

    Hi there,
    What do you refer to by padding? Going to your homepage, the background slideshow is displayed full width. Could you elaborate? It might be helpful if you could also link to a screenshot of your whole screen showing us what you see.
    If you refer to a different page, could you link to the specific page?

    All the best,

    Sebastian
    SmugMug Support Hero
  • picomomentspicomoments Registered Users Posts: 34 Big grins

    @rainforest1155 said:
    Hi there,
    What do you refer to by padding? Going to your homepage, the background slideshow is displayed full width. Could you elaborate? It might be helpful if you could also link to a screenshot of your whole screen showing us what you see.
    If you refer to a different page, could you link to the specific page?

    All the best,

    The spacing around the menu, and along the sides of the page

    I want to have my photo and all other photos to be full bleed, edge to edge.

  • picomomentspicomoments Registered Users Posts: 34 Big grins

    Another question, how can I add a drop shadow to the section so that it stands out from the background.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @picomoments said:
    Another question, how can I add a drop shadow to the section so that it stands out from the background.

    Add this to your theme's custom CSS section:

    /**
    * Remove Margins on Mobile
    ***************************************************/
    @media screen and (max-width: 736px) {
        .sm-user-ui .sm-page-widget .sm-page-widget-content {
            margin: 0 !important;
            padding: 0 !important;
        }
    
    }
    
    
    /**
    * Drop Shadow on Pages
    ***************************************************/
    .sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
        box-shadow: 0 0 12px 4px rgba( 0, 0, 0, 1 );
    }
    

    I don't know what type of effect you're looking for on your drop shadows, so here is a summary: https://css-tricks.com/almanac/properties/b/box-shadow/

  • picomomentspicomoments Registered Users Posts: 34 Big grins

    @Hikin' Mike said:

    @picomoments said:
    Another question, how can I add a drop shadow to the section so that it stands out from the background.

    Add this to your theme's custom CSS section:

    /**
    * Remove Margins on Mobile
    ***************************************************/
    @media screen and (max-width: 736px) {
      .sm-user-ui .sm-page-widget .sm-page-widget-content {
          margin: 0 !important;
          padding: 0 !important;
      }
    
    }
    
    
    /**
    * Drop Shadow on Pages
    ***************************************************/
    .sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
        box-shadow: 0 0 12px 4px rgba( 0, 0, 0, 1 );
    }
    

    I don't know what type of effect you're looking for on your drop shadows, so here is a summary: https://css-tricks.com/almanac/properties/b/box-shadow/

    Thanks Mike, it does partially work by the formatting goes a bit off with the header etc. So I'm not going to pursue this further but Thank you.

    BTW, I've redone the site completely ;-)

  • siebzehnxsiebzehnx Registered Users Posts: 1 Beginner grinner
    I need help with some CSS to achieve a hovering effect on galleries thumbnails when no gallery info is shown. Tried to post a discussion and the system doesn't allow newbies like me to post links (Which I need to illustrate what I want to accomplish). Can anyone help me out?
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 16, 2019

    You can add text looking like a link, Leave off the http: and .com
    or add some spaces http : // . com
    Is the past I have bolded the : and dot
    http://link.com

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.