CSS Flowdown to Sub-Folders

leftquark · November 4, 2014

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!

photoclick · November 5, 2014

Thank you. This was much needed. Finally.

kimbomac · 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!

leftquark · 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

markderry · January 9, 2015

leftquark would something like this work for event pages?

leftquark · 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.

markderry · 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?

leftquark · 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

markderry · January 12, 2015

Thanks for the help.

Ferguson · 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.

leftquark · 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!

Allen · 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;}

Ferguson · 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.

Allen · 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.

picturebike · February 20, 2018

thanks

hadron · June 7, 2018

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?

Allen · June 7, 2018

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?

CSS Flowdown to Sub-Folders

Comments