multiple horizontal adjacent blocks - same background ?
photoclick
Registered Users Posts: 278 Major grins
Hello All,
Hope I can ask for help here. Let's say I placed two or more blocks next to each other (one horizontal row). A single picture block, Text block, and, let's say HTML block. Let's assume I want/need all these blocks to appear as one whole on the same color (different than the rest of the website) background. Basically, making one horizontal section comprised of multiple blocks.
I can target each widget's background. That is easy. However it will set color ONLY for the content portion of the block. Meaning if I have a tall picture and much shorter other adjacent blocks - the shorter blocks will have the background color only behind the text and will not extend all the way down to the logical bottom of the row. Here is the example - https://mvs.smugmug.com/AdjacentBlocks
How else would you set the color that gives a perception of one contiguous row? To be honest, I did solve this problem, but the solution is far from elegant and I really hope someone has a better solution. What would be your approach?
Thanks!!!!
P.S. Link above poitn to a page with one CSS block and three widgets. The CSS code is primitive:
.sm-page-widget-12847002,
.sm-page-widget-12847045 ,
.sm-page-widget-12847075 {
background-color:blue;
}
Hope I can ask for help here. Let's say I placed two or more blocks next to each other (one horizontal row). A single picture block, Text block, and, let's say HTML block. Let's assume I want/need all these blocks to appear as one whole on the same color (different than the rest of the website) background. Basically, making one horizontal section comprised of multiple blocks.
I can target each widget's background. That is easy. However it will set color ONLY for the content portion of the block. Meaning if I have a tall picture and much shorter other adjacent blocks - the shorter blocks will have the background color only behind the text and will not extend all the way down to the logical bottom of the row. Here is the example - https://mvs.smugmug.com/AdjacentBlocks
How else would you set the color that gives a perception of one contiguous row? To be honest, I did solve this problem, but the solution is far from elegant and I really hope someone has a better solution. What would be your approach?
Thanks!!!!
P.S. Link above poitn to a page with one CSS block and three widgets. The CSS code is primitive:
.sm-page-widget-12847002,
.sm-page-widget-12847045 ,
.sm-page-widget-12847075 {
background-color:blue;
}
0
Comments
Also my "Public Site Index, which has three html widgets of different heights. Used CSS
to set the same.
My Website index | My Blog
Since I might have different sections, each different or alternating color on one page, I have to target "sm-page-layout-row" container of the center region. I also woudl have to "count" rows with "nth-child". Example:
.sm-page-layout-region-body .sm-page-layout-region-center .sm-page-layout-row:nth-child(4) {background-color:whatever;}
Do you think this is the only way? I really hoped to avoid this hack since I am not in control of container blocks - what if SM changes the way the page is built?
tailoredportraits.com
Might check smaller screens down to phones. http://quirktools.com/screenfly
My Website index | My Blog
tailoredportraits.com
My Website index | My Blog
For example, you could use:
To make the entire row blue, regardless of the height of each of its sub-widgets.
Changing data-layout-row from K to J would target the one you have with a white background.
I think it's good to be weary of using code that could break if we change things (like using nth-of-type) but Allen, myself, and the entire Support team are always around to help fix anything. We'll do our best to give heads up when we change things (feel free to monitor the Product News forum).
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Some sort of a container widget where you can host a few children widgets would definitely be helpful. I think there is already a feature request for that.
mike
tailoredportraits.com
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations