Wrap multi-content blocks with div and then style?

Teetime · October 11, 2015

I have numerous places where I have an HTML content block followed by several video content blocks. I would like to visually connect the HTML text content block with the video content blocks by enclosing them all in a shaded background. I suspect this could be done if I could wrap these content blocks with a div wrapper, and then style the div. Is that possible in SM, or is there a better way?

Allen · October 11, 2015

The only way in NewSmug would be to butt the widgets together using its margins. Each widget will
require separate CSS rules in the "Just This ...." CSS widget. Add a background to each rule.
Each widget has a unique class name
like this.

<div id="sm-page-widget-K9bb9Kwt" class="sm-page-widget sm-page-widget-html 
     [COLOR=Red]sm-page-widget-1516504[/COLOR]" data-typeid="1516504">

You might also have to play with each widget height in the CSS.

Allen · October 11, 2015

BTW, there is no way on NewSmug to add html on a page without it being in a widget, gallery
description or caption. And you can not add widgets in html boxes/widgets to get a

around them.

Take a look at my Guestbook, three widgets side by side. 2 slideshows and html widget.
I have a border around all the widgets including comments using the butt together method.
Each has the same background applied so it all looks like one box.

Allen · October 11, 2015

Just had a thought. There is a page content div that contains the center section between the header and footer.
That's probably an easier place to apply background and any border.

Teetime · October 12, 2015

Allen wrote: »

Just had a thought. There is a page content div that contains the center section between the header and footer.
That's probably an easier place to apply background and any border.

Thanks, I'll try that Allen. In the meantime I accomplished it block by block per your previous instructions and it was easy enough thanks to your instructions. I've finally gotten proficient at finding the page element id via the Chrome inspector so that is progress.

One more question please. How can I extend the background a few pixels below the edge of the Vimeo video content block (see image). I tried this but it extended the white portion rather than the shaded portion:
[HTML].sm-page-widget-12446899{ margin-bottom:50px !important; }[/HTML]

I tried this CSS above and below the shading CSS but neither extended the shaded area. I suppose I could add a one line HTML block below the Vimeo block and style and nudge it, but is there a CSS way to extend the bottom margin of the Vimeo block?

Allen, I really appreciate your willingness to share your knowledge here!

Allen · October 12, 2015

See if padding-bottom extends it. Not the widget but the div with the background.

Teetime · October 12, 2015

Allen wrote: »

See if padding-bottom extends it. Not the widget but the div with the background.

Makes sense and worked nicely. Thanks again!

ChancyRat · October 14, 2015

Allen's code
This might be a bit astray from the topic, but maybe not. This code from Allen:

.sm-page-layout-region .sm-page-layout-column .sm-page-layout-row {
  background: rgba(153, 180, 193, .90);
  padding-top: 0;}
}

I have it in this gallery (gallery css):
http://www.joinrats.com/ModifyBehavior/The-Heart/

It was, Allen, part of your original code to put titles and captions on the right side in collage landscape galleries. (Thread http://dgrin.com/showthread.php?t=255309, #10 post.)

Anyway, the code has an interesting effect if you add borders, in that each content block gets it's own border.

.sm-page-layout-region .sm-page-layout-column .sm-page-layout-row {
  background: rgba(153, 180, 193, .90);
  box-shadow: 0px 0px 1px 0px #000000;
  padding: 5px; 0 20px 0;
  margin: 5px;
}
}

This kind of achieves what your Guestbook achieves, except the background color goes all the way to the top.

Allen · October 14, 2015

ChancyRat wrote: »

...

Whatever you said you lost me.

ChancyRat · October 15, 2015

The OP asked how to put a background color or border around multiple content blocks as if they were one group (or within one DIV). This:

.sm-page-layout-region .sm-page-layout-column .sm-page-layout-row {
  background: rgba(153, 180, 193, .90);
  padding-top: 0;
}

will do that. It goes in the gallery CSS. This code doesn't requires butting widgets together so that the background borders merge. It acts like a DIV grouping all content blocks. The only "additional" side effect is that the background goes up to the top of the page, all page content, top to bottom.

Then you could give the left and right edges, borders. Or, borders to all four sides of each content block, but the latter would be a very different format choice.

Wrap multi-content blocks with div and then style?

Comments