[Implemented] CSS Flow Down

2»

Comments

  • wsimpsonwsimpson Registered Users Posts: 8 Beginner grinner
    edited May 3, 2014
    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
  • DBRDBR Registered Users Posts: 145 Major grins
    edited May 3, 2014
    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.

    Sent from my SAMSUNG-SGH-I337 using Tapatalk
  • chemmizchemmiz Registered Users Posts: 3 Beginner grinner
    edited May 27, 2014
    would love to see this flow down of styles set up asap
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited June 22, 2014
    bump
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • LinhLinh Registered Users Posts: 68 Big grins
    edited July 27, 2014
    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 :(
    vote on the following smugmug feedback:
    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]
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited October 2, 2014
    bump
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited October 28, 2014
    bump
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited October 28, 2014
    BTW in the security tab of gallery settings you can set Privacy to "inherit" which means that Smug already knows what the parents are.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DBRDBR Registered Users Posts: 145 Major grins
    edited October 28, 2014
    And it would be tremendously useful to be able to select all images in the folders and galleries under the current one for use in a slideshow.

    Sent from my SAMSUNG-SGH-I337 using Tapatalk
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 29, 2014
    Allen wrote: »
    bump

    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.
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 4, 2014
    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}"
    <body class="... sm-page sm-page-node [COLOR="Red"]sm-page-node-447Cg[/COLOR] [B][COLOR="green"]sm-page-parentnode-XgH96 sm-page-parentnode-L8Dr8[/COLOR][/B] sm-page-gallery sm-page-gallery-album ...">
    

    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 */
    }
    
    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 November 4, 2014
    clap.gif Wow, can't wait to test this.
    Thanks
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 4, 2014
    It looks like I have to specifically target top folder along with children.

    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 4, 2014
    Allen wrote: »
    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!
    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 November 5, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 9, 2014
    Allen wrote: »
    ... 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]

    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 11, 2014
    Allen wrote: »
    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.
    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 November 11, 2014
    leftquark wrote: »
    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.

    Page showing all banners. See CSS in html box at the bottom.
    http://www.photosbyat.com/Banners/n-xfXD7
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 11, 2014
    Allen wrote: »
    ... 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..
    This page
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 11, 2014
    Allen wrote: »
    This page
    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.

    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;
    }
    
    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 November 11, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 11, 2014
    Allen wrote: »
    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.
    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 November 11, 2014
    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;}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 11, 2014
    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;}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 11, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.