CSS Flowdown to Sub-Folders

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
edited March 19, 2015 in SmugMug Product News
Today we pushed live the ability to use CSS to effect all pages within a specific folder. You can use this ability to let sub-pages take some CSS action based on their parent folder(s).

In the <BODY> tag that we have now added a "sm-page-page-parentnode-{FOLDER_ID}"

For example:
<body class="... [COLOR="Red"]sm-page-node-447Cg[/COLOR] [B][COLOR="green"]sm-page-parentnode-XgH96 sm-page-parentnode-L8Dr8[/COLOR][/B] ...">

You'll notice in the code sample above that the current page ID is listed in RED. Its higher level folders are the parent folder ID's listed in GREEN. You can get the parent folder ID's by going to the higher level folder and looking at it's ID (the red part).

You can use these parent folder ID's to let all sub-pages (folders, galleries, or pages) take the same CSS. For example, you can use a simple set of CSS code to change your logo to something else for all items within a specific folder. You can see an example of it here on my site: browsing anything inside the "CSS Flowdown" folder will use a white logo instead of my orange one.

The only code used to do this was placed in my Theme's Advanced CSS section:
/* Customize the site for a specific folder */
/* For anything in the "CSS Flow" folder, use a different logo */
.sm-page-node-24RhG .sm-page-widget-logo-img , .sm-page-parentnode-24RhG .sm-page-widget-logo-img {
  background-image: url(http://www.aaronmphotography.com/photos/i-JNbpknL/0/O/i-JNbpknL.png) !important;
  width: 170px !important;
  height: 55px !important;
}


Some Notes::
- We list all the public folders above the current page, all the way up to the homepage.
- For privacy concerns, any folder set to "Unlisted" will not be displayed in the parent-node hierarchy.
- For privacy concerns, Folders set as "Hide Owner" will not display in the parent-node hierarchy.
- Folders set to "Private (only me)" will show up since only the owner can navigate to the given page.
- Using a parent folder ID will only effect its contents. You will need to use the "sm-page-node" identifier to also include that folder: both "sm-page-node-{NODEID}" and "sm-page-parentnode-{NODEID}". The parent-folder identifier doesn't display until you're within a folder.

Happy customizing!
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

Comments

  • photoclickphotoclick Registered Users Posts: 278 Major grins
    edited November 5, 2014
    Thank you. This was much needed. Finally.
  • kimbomackimbomac Registered Users Posts: 99 Big grins
    edited November 6, 2014
    Yay!
    I had hoped it would be easier to do than with custom CSS, but this is better than not being there at all!

    Thank you soooooo so much!

    I will give it a trial run just as soon as I get some breathing space!
    Kimbomac

    (FeaturePhotography.net)
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 7, 2014
    kimbomac wrote: »
    I had hoped it would be easier to do than with custom CSS, but this is better than not being there at all!

    Doing something that would copy CSS to pages/galleries/folders or let it flow down to sub-items would be a much bigger project so we figured we could get this out quickly as it would solve most peoples issues :)
    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
  • markderrymarkderry Registered Users Posts: 68 Big grins
    edited January 9, 2015
    leftquark would something like this work for event pages?
    ______________________________
    Mark Derry
    markderry.smugmug.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited January 9, 2015
    leftquark wrote: »
    Doing something that would copy CSS to pages/galleries/folders or let it flow down to sub-items would be a much bigger project so we figured we could get this out quickly as it would solve most peoples issues :)

    Excellent question and the answer is: Yes and no....

    The "No" part of that is that we don't assign any pageID to the entry Event page that a visitor arrives on when they click the Event link (the page that lists all the galleries).

    The "Yes" part is that the actual galleries themselves are just that: galleries, and all galleries have a page identifier. The downside is that these page identifiers are relative to their original galleries and folders. You could control these based on the folder they're in but not based on the Event that they're in. This is fine if you have 1 folder per event but not fine if you have multiple events within the same gallery.

    Here's an example:
    if I create a "My Wedding" folder and put galleries "Getting Ready", "Reception", and "Ceremony" in it, I could create an Event for "My Wedding Event" and everything would be fine since it's all organized in the "My Wedding" folder.

    On the flip side, if I had a folder called "Weddings" and inside it I put galleries "My Wedding", "Your Wedding", "Her Wedding", and "His Wedding" and created different events "My Wedding Event", "Your Wedding Event", and "Her Wedding Event" and you wanted to apply different css based on the events, you can't, since they all share the same folder: "Weddings".

    Feel free to let me know if I didn't answer properly or if I misunderstood the question.
    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
  • markderrymarkderry Registered Users Posts: 68 Big grins
    edited January 9, 2015
    Thanks for the excellent and prompt answer. I am attempting to tweak all of the Event landing pages on my site in one go so I don't believe that this approach would work if we can't access the page ID for the Event Landing pages. I had hoped that there was a parent ID for all of the Event landing pages that I could use to tweak them. Is there another approach that would allow me to do this?
    ______________________________
    Mark Derry
    markderry.smugmug.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited January 11, 2015
    In your theme's CSS (under Advanced) the only thing on an Event landing page you can control is the header where it lists the event name, date, location, and description, and the links for viewing favorites, sharing, or emailing the pro.

    You can control this via:
    /* Overall Event Header */
    .eventmarketingHeader
    
    /* The event links on the right side */
    .sm-event-links
    .sm-event-edit-button
    .event-favorites-link
    .sm-event-share-link
    .sm-email-link
    
    /* The event info on the left side */
    .sm-event-info
    #eventName
    #eventDate
    #eventLocation
    #eventDescription
    

    Other then that, we don't give anything that indicates we're on an event page :(
    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
  • markderrymarkderry Registered Users Posts: 68 Big grins
    edited January 12, 2015
    Thanks for the help.
    ______________________________
    Mark Derry
    markderry.smugmug.com
  • FergusonFerguson Registered Users Posts: 1,339 Major grins
    edited March 14, 2015
    I should read this section more often. This is EXACTLY what I needed, I want team logos on my site for folders containing their games. This way I just put all the logos at the top of the page together, and keep only one visible at a time depending on folder.

    Very handy.

    Now I just have to go dig up all those folder ID's and code the CSS. Tedious but simple. would help if I wrote CSS more than once every 6 months, but by tomorrow I'll have it straightened out; at least the technique is obviuos.

    Thank you.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 15, 2015
    Ferguson wrote: »
    I should read this section more often. This is EXACTLY what I needed, I want team logos on my site for folders containing their games. This way I just put all the logos at the top of the page together, and keep only one visible at a time depending on folder.

    Very handy.

    Now I just have to go dig up all those folder ID's and code the CSS. Tedious but simple. would help if I wrote CSS more than once every 6 months, but by tomorrow I'll have it straightened out; at least the technique is obviuos.

    Thank you.

    Let me know if you have any questions as you work through it!
    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
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited March 15, 2015
    The main problem I have when adding multiple logos/banners (different heights) and hiding all but one with CSS are the hidden ones
    seem to affect the positioning the exposed one. I have to go back and forth to all and tweak each margin until
    they all are positioned. And different browsers react differently so have separate rules for each browser. This
    includes margins for my top menu below banner.

    So I have three elements to adjust. Top of page margin above banner, space between banner and top menu and
    page content below menus. Seems with some breadcrumb and below is shoved down.

    small sample of CSS
    /* site wide banner */ 
    .sm-browser-chrome  .sm-page-widget-5028039 {margin: -30px auto -25px;}
    .sm-browser-ie      .sm-page-widget-5028039 {margin: -30px auto -25px;}
    .sm-browser-firefox .sm-page-widget-5028039 {margin: -95px auto -15px;}
    
        /* birds */
    .sm-page-widget-5027770 {margin: 5px auto -35px;}
    .sm-browser-firefox .sm-page-widget-5027770 {margin: 5px auto -120px;}
    
        /* all family */
    .sm-page-widget-8620479 {margin-bottom: -45px;}
    .sm-browser-firefox .sm-page-widget-8620479 {margin: -40px auto -150px;}
    .sm-browser-firefox .sm-page-node-NcgwK .sm-page-widget-375144 {margin-top: -45px;} /* top menu */
    .sm-browser-firefox .sm-page-parentnode-NcgwK .sm-page-widget-375144 {margin-top: -45px;} /* top menu */
    .sm-browser-firefox .sm-page-node-NcgwK .sm-page-widget-964555 {margin-top: -45px;} /* top menu */
    .sm-browser-firefox .sm-page-parentnode-NcgwK .sm-page-widget-964555 {margin-top: -45px;} /* top menu */
    .sm-browser-firefox .sm-page-node-NcgwK .sm-page-layout-region-body {margin-top: -30px;}
    .sm-browser-firefox .sm-page-parentnode-NcgwK .sm-page-layout-region-body {margin-top: -30px;}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • FergusonFerguson Registered Users Posts: 1,339 Major grins
    edited March 19, 2015
    Allen wrote: »
    The main problem I have when adding multiple logos/banners (different heights) and hiding all but one with CSS are the hidden ones
    seem to affect the positioning the exposed one. I have to go back and forth to all and tweak each margin until
    they all are positioned.
    [/code]

    I'm going to try a redo of what I attempted, maybe later today, as it does not scale well, but what I found was that it was easier to use my own HTML block, not logo, and use one block for the enter logo area. I then used table tags (ok, I'm old school) to position. One TD element holds each group of mutually exclusive images which are made visible or not with CSS.

    I need to redo what I had, as my handling of visibility (which also changes with screen width) required a lot of code for the different combinations. I think I have a better approach and haven't tried it yet.

    But once I switched to HTML and Tables to contain the logos, I had a lot better luck with positioning, basically avoiding involving SM's UI in any positioning other than relative to the other blocks.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited March 19, 2015
    Ferguson wrote: »
    ...
    I used flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox) html in my html block here. Each section is class named so as browser is narrowed elements/images disappear.
    http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/

    Looks like flex is the only way to R, C and L to truly align blocks within the widget.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • picturebikepicturebike Registered Users Posts: 158 Major grins
  • hadronhadron Registered Users Posts: 95 Big grins

    Hello Allen,
    I'm trying to build a simple site-wide menus for my site.

    I trying to understand your CCS at the top, but the link to "example of it here on my site" ... Is broke.
    Do you have a different link to the example?

  • AllenAllen Registered Users Posts: 10,008 Major grins

    Go back to your other post, this is an older post.

    @hadron said:
    Hello Allen,
    I'm trying to build a simple site-wide menus for my site.

    I trying to understand your CCS at the top, but the link to "example of it here on my site" ... Is broke.
    Do you have a different link to the example?

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