Border around group of content blocks?

Teetime · September 29, 2015

I have an HTML content block with some text followed by three video content blocks. I would like to surround all of these with a single border, and set a background color for the area bounded by the border. I would also like to reuse this same scheme in several places in my site. Is this possible? If so, how would you approach it in SM?

Thanks,

Jerry

Allen · September 29, 2015

You will have to play with the margins to get blocks together.
Might have to play with box widths to get equal widths.

For CSS set border then use border-width for what sides to show.

/* top box */
.sm-page-widget-XXXXXX {
border: 2px solid #fff;
border-width: 2px 2px 0 2px; /* top R bottom L */
background: #666:
}

/* middle box */
.sm-page-widget-XXXXXX {
border: 2px solid #fff;
border-width:0 2px 0 2px; /* top R bottom L */
background: #666:
}

/* middle box */
.sm-page-widget-XXXXXX {
border: 2px solid #fff;
border-width: 0 2px 0 2px; /* top R bottom L */
background: #666:
}

/* bottom box */
.sm-page-widget-XXXXXX {
border: 2px solid #fff;
border-width: 0 2px 2px 2px; /* top R bottom L */
background: #666:
}

Example: HTML box on top of folder box
http://www.photosbyat.com/Birds

Teetime · September 29, 2015

Hi Allen. First, the example page you provided is really beautifully done. Thanks for sharing that. What I am looking for is just the parent border and background in your example. By parent, I mean the one box that encloses all of your folders and galleries. So, are you saying, for example, that the top line of that parent border is the top box in your code example, and that you have positioned each box (line) via margins so they are connected at the corners? If so, then how did you set the background for the enclosed part of the parent box?

Thanks,

Jerry

Allen · September 29, 2015

Teetime wrote: »

Hi Allen. First, the example page you provided is really beautifully done. Thanks for sharing that. What I am looking for is just the parent border and background in your example. By parent, I mean the one box that encloses all of your folders and galleries. So, are you saying, for example, that the top line of that parent border is the top box in your code example, and that you have positioned each box (line) via margins so they are connected at the corners? If so, then how did you set the background for the enclosed part of the parent box?

Thanks,

Jerry

This should get it them in one area. Padding can add some space around them.
I would suggest use the page ID added to this so it doesn't affect whole site.
Look in the <body> for the ID.

.sm-page-node-XXXXX .sm-page-layout-region-center .sm-page-layout-region-body {
border: 4px double #fff;
background: #ccc;
padding: 0 5px; /* top/botton R/L */
}

Border around group of content blocks?

Comments