Box background color

3PCo

On my homepage (at pillarpointposter.com) I have a large photo and, underneath it, a section set off by two separators and containing several photos and some text. I would like to change the background color of just this section of the page (between the separators), to set it off from the rest. Is there a way to do that?

More generally, is it possible to declare a div on a page so that you could direct css at that specific portion of the page?

Thanks
af

Allen

3PCo wrote: »

On my homepage (at pillarpointposter.com) I have a large photo and, underneath it, a section set off by two separators and containing several photos and some text. I would like to change the background color of just this section of the page (between the separators), to set it off from the rest. Is there a way to do that?

More generally, is it possible to declare a div on a page so that you could direct css at that specific portion of the page?

Thanks
af

Playing around I came up with this. Widgets reading down in CSS are right to left on page.

.sm-page-home .sm-page-widget-2457412,
.sm-page-home .sm-page-widget-2457504,
.sm-page-home .sm-page-widget-2457346,
.sm-page-home .sm-page-widget-2457466,
.sm-page-home .sm-page-widget-2459995,
.sm-page-home .sm-page-widget-2460111 {
   background:red; 
   height: 320px;
   padding-top: 20px;
   padding-bottom: 20px;
}

.sm-page-home .sm-page-widget-2460111 {margin-left:13px;}
.sm-page-home .sm-page-widget-2457412 {margin-right:13px;}

3PCo

Thanks - I'm on the road this week but will try this as soon as I get home!

3PCo

Identifiers
I used your code and it worked perfectly, thank you.

You refer to each content block with a numerical widget identifier ( like .sm-page-widget-2460111). Is there a way that I can find these numbers as I design the page? Where do you look them up?

Thanks!
af

Allen

3PCo wrote: »

I used your code and it worked perfectly, thank you.

You refer to each content block with a numerical widget identifier ( like .sm-page-widget-2460111). Is there a way that I can find these numbers as I design the page? Where do you look them up?

Thanks!
af

You can find those in your page source.

...
...
<div id="sm-page-widget-f9TCKqtL" class="sm-page-widget sm-page-widget-html [COLOR=Red]sm-page-widget-1640366[/COLOR]" data-typeid="1640366">

    <div id="yui_3_8_0_1_1381532797442_1605" class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-6xd5dgDZ" class="sm-page-widget-body">
            <div id="yui_3_8_0_1_1381532797442_1642" style="font-size: 140%; color: gold; float:left; margin-right: 10px;"> … </div>
...
...