This is quite disappointing. Waiting for this CSS flow-down so I can move to the new SM. Still stuck in legacy because this is obviously of no importance to the SM staff. This was a huge take-away for me!
Walt
Yep. And it should have been designed so that anywhere you specify a gallery, you can specify a folder, and have SM recursively traverse its subfolders and galleries. This should be applicable to CSS flowtown, image selection, etc.
Oh wow, I didn't know the new layout didn't allow for this. I've been somewhat inactive/only using default stuff and just getting back into this. This was much easier to accomplish on the old layout
At this time I have no additional information on this feature request. I do want you to know that I understand your frustration with having to add hundreds of lines of extra CSS code.
It's with great pleasure that I can announce we've pushed live the ability to reference parent folders and have CSS apply to anything below it! The request to flow CSS down to subsequent pages is still open however you now have the ability to let sub-pages take some CSS action based on their parent folder.
You'll notice in the <BODY> tag that we have now added a "sm-page-page-parentnode-{NODE_ID}"
You'll notice in the code sample above that the current page ID is listed in RED. Its higher level folders are the parent nodes listed in GREEN. You can get the parent node ID's by going to the higher level folder and looking at it's nodeID (the red part).
You can use these parentnodes to let all sub-pages (folders, galleries, or pages) take the same CSS. For example, you could replace a specific image with a new one for anything in a "Nature" folder.
Some Caveats::
- 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.
- If you are attempting to target a folder AND all of its contents, you will need to reference that folder using it's "sm-page-node-{NODEID}" as well as it's "sm-page-parentnode-{NODEID}". The parent-node identifier doesn't display until you're within a folder.
For example, Allen could change the header images in all galleries in his "MACRO" folder just by using the Macro Folders NodeID:
/* Change all header images in the "MACRO" folder to a picture of birds */
/* The NODE ID of the "Macro" folder is kQnr7 */
[COLOR="Blue"].sm-page-parentnode-kQnr7 [/COLOR].sm-page-widget-5028039 .sm-tile-photo .sm-tile-content .sm-image {
display: block;
background: url('http://www.photosbyat.com/photos/i-3M6v3Q4/1/XL/i-3M6v3Q4-XL.jpg'); /* Replace the image with a new one */
box-sizing: border-box; /* Make the old image disappear */
-moz-box-sizing: border-box; /* Make the old image disappear, mozilla */
width: 1024px; /* Width of the new image */
height: 121px; /* Height of the new image */
padding-left: 1024px; /* Same as the new image width */
border: 0; /* Make sure no border is shown around the new image */
}
Going to be awhile before I get /birds done. Have to switch to new method and remove all the old CSS.
Included in that CSS are a bunch of pages not in that folder.
It looks like I have to specifically target top folder along with children.
Correct. I should have mentioned that in one of the "Caveats". We wanted to give people the option to either have their "top-most" folder either included or not included. We saw a few use cases where you might want only the items under a folder to have some customization but not that folder.
While it is one extra line we thought it was best to allow people the option. Looks like you've got it working! Hopefully it will be helpful in the future!
So far I've been able to change to four specific flow-down banners from the site-wide one. I found when
I tried to just change the existing single-photo widget background that it would not resize as the browser
shrunk. (?) So I ended up adding additional banner single-photo widgets site-wide and added CSS to hide/show.
The only problem I'm having is adjusting the top and bottom banner margins so the space at top of page
and below between menu is consistent. Used specific CSS affecting Firefox, Chrome and IE. But I seem
to be chasing these margin adjustments. I've looked at the order the widgets are placed on "entire site"
figuring if I adjusted Top/Bot margins from first to last this would work. Are I going about this correctly?
BTW, each banner is a different height.
... I found when I tried to just change the existing single-photo widget background that it would not resize as the browser shrunk. (?) ...
Edit: I've given up on "replacing" the image as it does not resize with the browser.
It works fine for small logos (side bar) but for a banner across the top it does not.
I tried to swap the widget image again and the only way I can think of changing the image size as the
browser shrinks are using @media rules.
There has to be a better way, any ideas?
Big problem:
When adding a new widget and replacing image using CSS the CSS replacement image does not resize when shrinking the browser.
Here's all the banners I've added so far in the header site-wide using CSS to hide/show per page or folder flow down. [strike]The bottom banner was added (hidden everywhere) and image was replaced (just this page) using CSS.[/strike]
Although there is a lot of CSS there are only these four CSS sections:
- banner borders
- margins/position for specific browsers
- hide all specific banners site-wide
- change banner for each specific area
Another problem is with all these banners I'm chasing the top and bottom margins for every
banner. I have set each widget to zero top and bottom margin. But they still seem to affect each
other. Edit: I have found 3 parent div's for the img that have a height set to 18px.
I think these additional heights are messing with controlling any banner positioning. Using inspect
element in WebDev I see blank div's blocking moving the below content up.
Edit: I've given up on "replacing" the image as it does not resize with the browser.
It works fine for small logos (side bar) but for a banner across the top it does not.
I tried to swap the widget image again and the only way I can think of changing the image size as the
browser shrinks are using @media rules.
There has to be a better way, any ideas?
Big problem:
When adding a new widget and replacing image using CSS the CSS replacement image does not resize when shrinking the browser.
What if you placed a number of single image content blocks in for each banner. You hide all of them (using display: none;) and then depending on which page you're on, you show a specific one (using display: block;)? The content blocks themselves should scale with the window.
What if you placed a number of single image content blocks in for each banner. You hide all of them (using display: none;) and then depending on which page you're on, you show a specific one (using display: block;)? The content blocks themselves should scale with the window.
I think I've already done all this. They all do scale with the browser, great!. The only problem is
positioning them on each page. I'm using margins top and bottom for each to adjust spacing at page top
and between menu at bottom. For some banners (smaller height ones) there is something blocking
the bottom margin at a certain -XXpx moving it up. I see the red outline of empty (?) blocking div in
WebDev inspect element.
I now have 8 single photo content blocks in the header site-wide, each one a different photo/banner.
I hide them all site-wide except for my default site-wide photo/banner. You can see them all on the link below.
... I'm using margins top and bottom for each to adjust spacing at page top
and between menu at bottom. For some banners (smaller height ones) there is something blocking
the bottom margin at a certain -XXpx moving it up. I see the red outline of empty (?) blocking div in
WebDev inspect element..
There are three blank nested div's above nested with this one also showing a 17px height.
On your Wild-Flowers page, the following code seems to get rid of the extra space above and below the banner and moves the menu closer to the banner. Is this what you were looking for or did I misinterpret?
/* Get rid of the extra margin above/below the banner */
.sm-page-widget-8684620 .sm-page-widget-content {
margin: 0;
}
Doesn't seem to do anything except I had to re-adjust top margin for Firefox.
/* wild flowers */
.sm-page-widget-8684620 .sm-page-widget-content {margin: 0;}
x.sm-page-widget-8684620 {margin-top: -70px auto -60px;}
.sm-browser-firefox .sm-page-widget-8684620 {margin: -110px auto -40px;}
The red element box is what is blocking the bottom margin. More neg margin has no effect.
Strange, it appears to be a Firefox only issue. It looks perfect (no gap between the banner and the menu block), although the banner has some space above it (which I actually prefer).
In firefox it has to do with the fact that you're moving widget 8684620 up by -110 pixels but not your menu blocks.
If you move ".sm-page-widget-375144", and ".sm-page-widget-864555", and ".sm-page-layout-region-body .sm-page-layout-region-center" up by 110pixels it works fine (using "position; relative; top: -110px;")
For the record, I hide your margin: -110... code and replaced it with "position: relative; top:-110px;" to move it up. I then had to move your 2 menu's and the gallery DIV's up with it.
Edit: just saw your post. Using top does not pull things up to follow.
Looks like I can tweak the menu elements underneath.
.sm-page-node-LKwv6 .sm-page-widget-375144 {margin-top: -40px;} /* top menu */
.sm-page-node-LKwv6 .sm-page-widget-964555 {margin-top: -40px;} /* bottom menu */
But this doesn't move body up to follow. This doesn't work either.
.sm-page-node-LKwv6 .sm-page-layout-region-body {margin-top: -30px;}
This is where I'm now at, not too bad.
/* wild flowers */
.sm-page-widget-8684620 {margin: -40px auto -5px;}
.sm-browser-firefox .sm-page-widget-8684620 {margin: -120px auto -70px !important;}
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-widget-375144 {margin-top: -30px;} /* top menu */
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-widget-964555 {margin-top: -30px;} /* bottom menu */
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-layout-region-body {margin-top: -20px;}
Just noticed on FF the I have to slide the mouse up to the very top of bottom menu for it activate.
Had to lower .sm-page-layout-region-body a little to fix this. Although nothing is seen this
div covers the menu. Not sure if menu is positioned relative with a higher z-index but I guess not.
Edited last post with new value.
Comments
Walt
Sent from my SAMSUNG-SGH-I337 using Tapatalk
My Website index | My Blog
CSS Block To Flow Down To Children Folders/Pages/Galleries
[URL="http://feedback.smugmug.com/forums/17723-smugmug/suggestions/1104583-a-bulk-
gallery-download-button-for-my-visitors"]bulk download option for clients[/URL]
My Website index | My Blog
My Website index | My Blog
My Website index | My Blog
Sent from my SAMSUNG-SGH-I337 using Tapatalk
At this time I have no additional information on this feature request. I do want you to know that I understand your frustration with having to add hundreds of lines of extra CSS code.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
http://feedback.smugmug.com/forums/17723-smugmug/suggestions/4341424-add-option-to-allow-a-css-block-to-flow-down-to-ch
http://feedback.smugmug.com/forums/17723-smugmug/suggestions/4341237-add-ability-to-customize-high-level-folders-and-h
My Website index | My Blog
You'll notice in the <BODY> tag that we have now added a "sm-page-page-parentnode-{NODE_ID}"
You'll notice in the code sample above that the current page ID is listed in RED. Its higher level folders are the parent nodes listed in GREEN. You can get the parent node ID's by going to the higher level folder and looking at it's nodeID (the red part).
You can use these parentnodes to let all sub-pages (folders, galleries, or pages) take the same CSS. For example, you could replace a specific image with a new one for anything in a "Nature" folder.
Some Caveats::
- 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.
- If you are attempting to target a folder AND all of its contents, you will need to reference that folder using it's "sm-page-node-{NODEID}" as well as it's "sm-page-parentnode-{NODEID}". The parent-node identifier doesn't display until you're within a folder.
For example, Allen could change the header images in all galleries in his "MACRO" folder just by using the Macro Folders NodeID:
/* Change all header images in the "MACRO" folder to a picture of birds */ /* The NODE ID of the "Macro" folder is kQnr7 */ [COLOR="Blue"].sm-page-parentnode-kQnr7 [/COLOR].sm-page-widget-5028039 .sm-tile-photo .sm-tile-content .sm-image { display: block; background: url('http://www.photosbyat.com/photos/i-3M6v3Q4/1/XL/i-3M6v3Q4-XL.jpg'); /* Replace the image with a new one */ box-sizing: border-box; /* Make the old image disappear */ -moz-box-sizing: border-box; /* Make the old image disappear, mozilla */ width: 1024px; /* Width of the new image */ height: 121px; /* Height of the new image */ padding-left: 1024px; /* Same as the new image width */ border: 0; /* Make sure no border is shown around the new image */ }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks
My Website index | My Blog
top folder
sm-page-parentnode-zsB4B sm-page-node-NcgwK
sub folder
sm-page-parentnode-zsB4B sm-page-parentnode-NcgwK sm-page-node-X2SHM
If I target sm-page-parentnode-zsB4B it affects entire site.
If I target sm-page-parentnode-NcgwK it affects everything under top folder.
So I need both to get top folder and children.
.sm-page-node-NcgwK xxxx,
.sm-page-parentnode-NcgwK xxxx {}
This is what I have have far, family done.
/* sites banners */ .sm-page-widget-5028039 .sm-image {border: 3px solid #c93;} .sm-page-widget-5027770 .sm-image {border: 3px solid #666;} .sm-page-widget-8620479 .sm-image {border: 3px solid #c93;} /* hide specific banners everywhere */ .sm-page-widget-5027770 {visibility: hidden; height:0} /* birds */ .sm-page-widget-8620479 {visibility: hidden; height:0} /* family */ /* replace site-wide with specific */ .sm-page-node-NcgwK .sm-page-widget-5028039, .sm-page-parentnode-NcgwK .sm-page-widget-5028039 {visibility: hidden; height:0} .sm-page-node-NcgwK .sm-page-widget-8620479, .sm-page-parentnode-NcgwK .sm-page-widget-8620479 {visibility: visible; height:auto; margin: -10px auto;}Going to be awhile before I get /birds done. Have to switch to new method and remove all the old CSS.Included in that CSS are a bunch of pages not in that folder.
My Website index | My Blog
Correct. I should have mentioned that in one of the "Caveats". We wanted to give people the option to either have their "top-most" folder either included or not included. We saw a few use cases where you might want only the items under a folder to have some customization but not that folder.
While it is one extra line we thought it was best to allow people the option. Looks like you've got it working! Hopefully it will be helpful in the future!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I tried to just change the existing single-photo widget background that it would not resize as the browser
shrunk. (?) So I ended up adding additional banner single-photo widgets site-wide and added CSS to hide/show.
The only problem I'm having is adjusting the top and bottom banner margins so the space at top of page
and below between menu is consistent. Used specific CSS affecting Firefox, Chrome and IE. But I seem
to be chasing these margin adjustments. I've looked at the order the widgets are placed on "entire site"
figuring if I adjusted Top/Bot margins from first to last this would work. Are I going about this correctly?
BTW, each banner is a different height.
My Website index | My Blog
It works fine for small logos (side bar) but for a banner across the top it does not.
I tried to swap the widget image again and the only way I can think of changing the image size as the
browser shrinks are using @media rules.
There has to be a better way, any ideas?
Big problem:
When adding a new widget and replacing image using CSS the CSS replacement image does not resize when shrinking the browser.
Here's all the banners I've added so far in the header site-wide using CSS to hide/show per page or folder flow down.
[strike]The bottom banner was added (hidden everywhere) and image was replaced (just this page) using CSS.[/strike]
http://www.photosbyat.com/Banners/n-xfXD7
Current CSS shown at bottom.
Although there is a lot of CSS there are only these four CSS sections:
- banner borders
- margins/position for specific browsers
- hide all specific banners site-wide
- change banner for each specific area
Another problem is with all these banners I'm chasing the top and bottom margins for every
banner. I have set each widget to zero top and bottom margin. But they still seem to affect each
other. Edit: I have found 3 parent div's for the img that have a height set to 18px.
I think these additional heights are messing with controlling any banner positioning. Using inspect
element in WebDev I see blank div's blocking moving the below content up.
My Website index | My Blog
What if you placed a number of single image content blocks in for each banner. You hide all of them (using display: none;) and then depending on which page you're on, you show a specific one (using display: block;)? The content blocks themselves should scale with the window.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
positioning them on each page. I'm using margins top and bottom for each to adjust spacing at page top
and between menu at bottom. For some banners (smaller height ones) there is something blocking
the bottom margin at a certain -XXpx moving it up. I see the red outline of empty (?) blocking div in
WebDev inspect element.
I now have 8 single photo content blocks in the header site-wide, each one a different photo/banner.
I hide them all site-wide except for my default site-wide photo/banner. You can see them all on the link below.
Page showing all banners. See CSS in html box at the bottom.
http://www.photosbyat.com/Banners/n-xfXD7
My Website index | My Blog
http://www.photosbyat.com/FloraandFungi/Wild-Flowers/
This is what is blocking the banner bottom margin being adjusted more negative
and moving the menu up closer.
<div data-layout-row="t" class="sm-page-layout-row yui3-g"
id="yui_3_8_0_1_1415742794075_2968">
...
</div>
There are three blank nested div's above nested with this one also showing a 17px height.
My Website index | My Blog
On your Wild-Flowers page, the following code seems to get rid of the extra space above and below the banner and moves the menu closer to the banner. Is this what you were looking for or did I misinterpret?
/* Get rid of the extra margin above/below the banner */ .sm-page-widget-8684620 .sm-page-widget-content { margin: 0; }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
/* wild flowers */
.sm-page-widget-8684620 .sm-page-widget-content {margin: 0;}
x.sm-page-widget-8684620 {margin-top: -70px auto -60px;}
.sm-browser-firefox .sm-page-widget-8684620 {margin: -110px auto -40px;}
The red element box is what is blocking the bottom margin. More neg margin has no effect.
My Website index | My Blog
Strange, it appears to be a Firefox only issue. It looks perfect (no gap between the banner and the menu block), although the banner has some space above it (which I actually prefer).
In firefox it has to do with the fact that you're moving widget 8684620 up by -110 pixels but not your menu blocks.
If you move ".sm-page-widget-375144", and ".sm-page-widget-864555", and ".sm-page-layout-region-body .sm-page-layout-region-center" up by 110pixels it works fine (using "position; relative; top: -110px;")
For the record, I hide your margin: -110... code and replaced it with "position: relative; top:-110px;" to move it up. I then had to move your 2 menu's and the gallery DIV's up with it.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Looks like I can tweak the menu elements underneath.
.sm-page-node-LKwv6 .sm-page-widget-375144 {margin-top: -40px;} /* top menu */
.sm-page-node-LKwv6 .sm-page-widget-964555 {margin-top: -40px;} /* bottom menu */
But this doesn't move body up to follow. This doesn't work either.
.sm-page-node-LKwv6 .sm-page-layout-region-body {margin-top: -30px;}
My Website index | My Blog
/* wild flowers */
.sm-page-widget-8684620 {margin: -40px auto -5px;}
.sm-browser-firefox .sm-page-widget-8684620 {margin: -120px auto -70px !important;}
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-widget-375144 {margin-top: -30px;} /* top menu */
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-widget-964555 {margin-top: -30px;} /* bottom menu */
.sm-browser-firefox .sm-page-node-LKwv6 .sm-page-layout-region-body {margin-top: -20px;}
My Website index | My Blog
Had to lower .sm-page-layout-region-body a little to fix this. Although nothing is seen this
div covers the menu. Not sure if menu is positioned relative with a higher z-index but I guess not.
Edited last post with new value.
My Website index | My Blog