multiple horizontal adjacent blocks - same background ?

photoclick · November 2, 2015

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

Allen · November 2, 2015

See my guestbook, I have three widgets across, two slideshows and html widgets.

Also my "Public Site Index, which has three html widgets of different heights. Used CSS
to set the same.

.sm-page-layout-region-body .sm-page-widget-html {
  border: 6px double #222;
  background: rgba(22, 22, 22, .30);
  padding: 0 10px;
  height: 1300px;
  width: auto; margin-top: 12px;
}

.sm-page-widget-1396618 {
  border: 6px double #222;
  border-width: 6px 0 6px 6px;
}

.sm-page-widget-1396688 {
  border: 6px double #222;
  border-width: 6px 6px 6px 0;
  padding:0;
}

.sm-page-widget-1396662 {
  border: 6px double #222;
  border-width: 6px 6px;
}

photoclick · November 2, 2015

Allen - Thanks! I greatly appreciate you taking a look into it. I see that you targeted the container way above the individual widgets. This is what I came up with as well.... but I hoped that I could avoid this approach. I updated the page: https://mvs.smugmug.com/AdjacentBlocks

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?

Allen · November 2, 2015

I think you're stuck with nth-child's, it seems simple enough. What control don't you have?
Might check smaller screens down to phones. http://quirktools.com/screenfly

photoclick · November 2, 2015

By "control" I meant to say that I am hesitant to rely on the way smugmug builds the page. Perhaps I might sound as unreasonably paranoid... but so far the only thing that was implicitly guaranteed is that the widget name is accessible by "sm-page-widget-NUMBER". The outside holding containers and their structure, I assume, might be changed anytime, I suppose?

Allen · November 2, 2015

I wouldn't worry about that now, maybe sometime in the future if you see something happening.

leftquark · November 3, 2015

You could also use the data-layout-types that we stick in, and are often sequential and do some of the counting for you.

For example, you could use:

.sm-page-layout-row [data-layout-row=K] {
    background-color: blue;
}

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).

photoclick · November 3, 2015

I wanted to use the "data-layout-row" with a letter... but was afraid that the letters might be randomly assigned for each rendering of the page. Certainly it is more preferable way than nth-of-type. Thanks for the info!

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

leftquark · November 3, 2015

The data-layout-row letter will only change if you make changes in the Customizer (similar to nth-of-type) so it looks like you can use either convention. Between page loads, though, it'll always be the same.

multiple horizontal adjacent blocks - same background ?

Comments