Multiple Site Banners

AllenAllen Registered Users Posts: 10,013 Major grins
edited November 1, 2021 in SmugMug Customization
From the beginning of NewSmug I've struggled with showing different banners for areas of my site.
After much prompting Smug finally added classes for CSS flow down, "parentnode". This helped
immensely as you could apply CSS to all children, sub-folders, galleries and pages, of a folder.

My first solution was adding all the different banners, single photo widgets, at the top of "entire site"
header. Then using CSS to hide/display on pages. This became a nightmare with positioning for
different browsers. But with much CSS it was basically solved.

I've now found what I think is a simpler solution. I add one HTML widget at the top of my header. I
leave the widget blank and add a background with CSS. Using this method all banners resize with
browser re-sizing.
EDIT: add this widget to the "entire site" header area of your site. It will then apply to every page of your site.

Couple of examples in CSS. Some of these have to be in order as the last applied overrides earlier CSS.
My family top folder flows down but I've added a different flow down starting in a family child sub-folder. 
/* site wide  -zsB4B is top of my site */
.sm-page-parentnode-zsB4B .sm-page-widget-12536016, /* flow down to everything below */
.sm-page-node-zsB4B .sm-page-widget-12536016 { /* top level folder */
   background: url(/photos/i-snFwjZ3/1/XL/i-snFwjZ3.jpg) no-repeat; 
   height: 154px;  max-width: 1032px;
   margin: 0 auto !important;
   background-size: contain !important;
}

     /* birds - individual pages plus bird folder */
.sm-page-node-gF9bt .sm-page-widget-12536016, /* videos */
.sm-page-node-6Hc2F .sm-page-widget-12536016, /* Recent Upload */
.sm-page-search     .sm-page-widget-12536016, /* search */
.sm-page-node-6dSMX .sm-page-widget-12536016, /* Public Index */
.sm-page-node-J7sdG .sm-page-widget-12536016, /* keywords */
.sm-page-parentnode-Qm7v4 .sm-page-widget-12536016,  /* flow down from bird folder to everything below */
.sm-page-node-Qm7v4 .sm-page-widget-12536016 {       /* bird folder */
   background: url(/photos/i-TCFHsP7/1/XL/i-TCFHsP7.jpg) no-repeat; 
   height: 130px;  max-width: 1024px;
   margin: 0 auto !important;
   background-size: contain !important;
}
BTW, "parentnode" does not include the folder, just children, so the folder also needs to be addressed.
If you look at the <body> tag of sub-folders, galleries and pages they include all the "up the tree" "parentnode" class names.
Al - Just a volunteer here having fun
My Website index | My Blog
Tagged:

Comments

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 7, 2015
    I know I am totally awed by this but humbly I admit that I also don't understand what it is you're saying, or what your code achieves. Can you explain for the lay-people what it is that this code achieves? Then my awe will skyrocket.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited October 7, 2015
    ChancyRat wrote: »
    I know I am totally awed by this but humbly I admit that I also don't understand what it is you're saying, or what your code achieves. Can you explain for the lay-people what it is that this code achieves? Then my awe will skyrocket.
    It provides a way to have different banners. Maybe a different one for every client. Weddings have its
    own banner. How about a family banner different from your public site pages.

    All the code does is show how to apply a different background image to the banner "header html widget". The header area is only applicable to the "entire site".
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 7, 2015
    I get it, I think. Amazing!
  • daylightimagesdaylightimages Registered Users Posts: 130 Major grins
    edited February 17, 2016
    Hi, Allen!

    I currently have my header set up using the "logo" widget. I want to use your method so I can vary the headers on my site (www.railroadphotographer.com). I set up an HTML box directly above the top menu bar and below my CSS box and I think I found all the proper references in the source code and set them up in my CSS at the top of the page. Nothing seems to be happening, though -- I've probably overlooked something in the CSS.

    Once I get the CSS/HTML working properly, I will eliminate the logo widget from the site. Any help would be appreciated.

    Thanks!!!!
    Steve Barry
    The Railroad Photographer
    www.railroadphotographer.com
  • FergusonFerguson Registered Users Posts: 1,345 Major grins
    edited February 17, 2016
    Allen wrote: »
    From the beginning of NewSmug I've struggled with showing different banners for areas of my site. ....

    Hmmm... I have been using your old way, I may need to spend some time looking at this. It's interesting, especially as just a month or so ago I went through adding yet another custom banner to sections of my site.

    I actually do separate left/right custom banners, and as you said, keep them all present and turn different ones on and off. Small typos and suddenly I have none or too many.

    But I'm also in need of similar features like "previous page" where it's not following the folder structure (i.e. what breadcrumbs do), and been wondering how to make that happen.

    The fundamental issue IMO is that whoever did the inheritance should have permitted inheritance of customized pages below them. :cry

    But thanks for this, and if you find more tricks like it please post.
    http://captivephotons.com
  • FergusonFerguson Registered Users Posts: 1,345 Major grins
    edited February 17, 2016
    Incidentally, one thing I also do is change the size of these based on the media size, including make them disappear on very small devices, but I think that can be worked in here by just repeating it for different media sizes.
    http://captivephotons.com
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited February 17, 2016
    daylightimages wrote: »
    Hi, Allen!

    I currently have my header set up using the "logo" widget. I want to use your method so I can vary the headers on my site (www.railroadphotographer.com). I set up an HTML box directly above the top menu bar and below my CSS box and I think I found all the proper references in the source code and set them up in my CSS at the top of the page. Nothing seems to be happening, though -- I've probably overlooked something in the CSS.

    Once I get the CSS/HTML working properly, I will eliminate the logo widget from the site. Any help would be appreciated.

    Thanks!!!!
    This is the only html widget I can find in that area above your menu.
    sm-page-widget-139484
    Is this it?

    Can you post the CSS you used?

    This adds a background.
    .sm-page-widget-13948490 {
    background: url(/photos/i-cnQKDJQ/0/150x100/i-cnQKDJQ-150x100.jpg) no-repeat;
    height: 100px; max-width: 150px;
    margin: 0 auto !important;
    background-size: contain !important;
    }

    Create the whole image including text to simulate your current banner.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited February 17, 2016
    Ferguson wrote: »
    Incidentally, one thing I also do is change the size of these based on the media size, including make them disappear on very small devices, but I think that can be worked in here by just repeating it for different media sizes.
    Using this method the image/photo resizes way down for small devices.
    Open my site and watch my banner shrink in size.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • FergusonFerguson Registered Users Posts: 1,345 Major grins
    edited February 17, 2016
    Allen wrote: »
    Using this method the image/photo resizes way down for small devices.
    Open my site and watch my banner shrink in size.

    Indeed it does, very nice. Mine has 3 across however, need to try and see what it can do with three elements and all with backgrounds. I still suspect I want to suppress 2 of them (on the sides) as it gets very small, but... I like it.

    Keep looking. This looks a lot more maintainable!
    http://captivephotons.com
  • daylightimagesdaylightimages Registered Users Posts: 130 Major grins
    edited February 17, 2016
    Allen wrote: »
    This is the only html widget I can find in that area above your menu.
    sm-page-widget-139484
    Is this it?

    Can you post the CSS you used?

    This adds a background.
    .sm-page-widget-13948490 {
    background: url(/photos/i-cnQKDJQ/0/150x100/i-cnQKDJQ-150x100.jpg) no-repeat;
    height: 100px; max-width: 150px;
    margin: 0 auto !important;
    background-size: contain !important;
    }

    Create the whole image including text to simulate your current banner.

    That did it. I picked up the wrong reference to the HTML box from the source code. Now to tweak it until I like it!

    Thanks!!!!!
    Steve Barry
    The Railroad Photographer
    www.railroadphotographer.com
  • daylightimagesdaylightimages Registered Users Posts: 130 Major grins
    edited February 20, 2016
    Hi, Allen!

    I added the code and it works for one but not for another. EDIT: Okay, it works if the parent folder is set to "public." If the parent folder is set to "unlisted" it appears the banners do not flow down properly.

    Here's my code:

    /* site wide -4QrFm is top of my site */
    .sm-page-parentnode-4QrFm .sm-page-widget-13948490, /* flow down to everything below */
    .sm-page-node-35hnS .sm-page-widget-13948490 {
    background: url(http://www.railroadphotographer.com/photos/i-KhR8nds/0/O/i-KhR8nds.jpg) no-repeat;
    height: 100px; max-width: 1000px;
    margin: 0 auto !important;
    background-size: contain !important;
    }

    /* streetcar - individual pages plus streetcar folder */
    .sm-page-parentnode-hpWgc .sm-page-widget-13948490, /* flow down from streetcar folder to everything below */
    .sm-page-node-hpWgc .sm-page-widget-13948490 { /* streetcar folder */
    background: url(http://www.railroadphotographer.com/photos/i-gNcGP4W/0/O/i-gNcGP4W.jpg) no-repeat;
    height: 100px; max-width: 1000px;
    margin: 0 auto !important;
    background-size: contain !important;
    }

    /* lighthouse - individual pages plus lighthouse folder */
    .sm-page-parentnode-rsQNL .sm-page-widget-13948490, /* flow down from lighthouse folder to everything below */
    .sm-page-node-rsQNL .sm-page-widget-13948490 { /* lighthouse folder */
    background: url(http://www.railroadphotographer.com/photos/i-vRLqFBz/0/O/i-vRLqFBz.jpg) no-repeat;
    height: 100px; max-width: 1000px;
    margin: 0 auto !important;
    background-size: contain !important;
    }

    If you go to my main site, you get the site-wide banner:
    http://www.railroadphotographer.com/browse

    If you go to my streetcar trips page, you get a new banner. This flows down to the page below it:
    http://www.railroadphotographer.com/Wilmington-Chapter-Trips

    If you go to my lighthouse section (under construction), you get the new lighthouse banner. However, the galleries below it still have the site-wide banner:
    http://www.railroadphotographer.com/FirstOrderLighthouse/n-rsQNL

    What did I do wrong in the Lighthouse section that I did right in the streetcar trips section? EDIT: See my edit at the top of the page -- it doesn't work when the parent folder is set to "unlisted." Otherwise, it works. Never mind.

    Thanks!
    Steve Barry
    The Railroad Photographer
    www.railroadphotographer.com
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited February 23, 2016
    daylightimages wrote: »
    http://www.railroadphotographer.com/browse
    I just took a look at your site. Are you aware that you can easily remove the smugmug header and switch to the mini-footer? Your site would look more professional with this change.

    > Customize
    > Content and Design
    > Click SETTINGS button
    > change header and footer settings

    --- Denise
    https://www.denisegoldberg.com ... https://denise.smugmug.com

    Musings & ramblings at https://denisegoldberg.blogspot.com
Sign In or Register to comment.