Options

Box background color

3PCo3PCo Registered Users Posts: 65 Big grins
edited October 11, 2013 in SmugMug Customization
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
af
http://www.pillarpointposter.com

Comments

  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited October 2, 2013
    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;}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    3PCo3PCo Registered Users Posts: 65 Big grins
    edited October 2, 2013
    Thanks - I'm on the road this week but will try this as soon as I get home!wings.gif
    af
    http://www.pillarpointposter.com
  • Options
    3PCo3PCo Registered Users Posts: 65 Big grins
    edited October 11, 2013
    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
    af
    http://www.pillarpointposter.com
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited October 11, 2013
    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>
...
...
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.