Wide Background (or border) for Per Page Widget Area?

[Kimmer99]

Okay – I’m working on a site here: http://www.sahmwebdesign.com/af/. At the bottom of the home page, I have a per page bottom widget area (3 boxes just above the footer). I’m playing with either having a top border (currently present), extend the full width of the widget area (or have it’s background go the full width) but can’t seem to figure it out using Xtreme. Possible? Any hints on how? Or do I need Plus to accomplish this?

Thanks for the help.
Kim

[scrambler]

If you want to extend the Background color of the Widget area, you can follow the method explained here.

http://forum.weavertheme.com/discussion/9712/extending-bg-to-full-browser-width

If you want the content of that area full width, you will need to set your theme with to be very wide, then you will have to reduce the area that are not full width using custom CSS.

Read the full width thread for more details 

http://forum.weavertheme.com/discussion/11124/full-width-designs

[Kimmer99]

Scrambler, am I missing something? I don’t want the entire container background to be full width, only the background (or border) of the per page widget. So would your code then become:

@media screen and (min-width:768px) {  /* rules for desk top */
#per_page_widget_name {
  position: relative;
}
#per_page_widget_name:before {
    content: “”;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid red;
    box-shadow: 9999px 0 0 red;
    z-index:-1;
}}

Again, I don’t want the content to be full width, just the background (or top border) of the per page bottom widget area for those 3 boxes.

[scrambler]

The CSS in the thread is an example, of course you need to replace #container by the appropriate one, in your case

#page-bottom-widget-area

You do need to set a background color for it too

[Kimmer99]

Yeah, I did that. What do you mean I need to set a background color for it too? Do you mean within the CSS you provided (i.e., replacing white with the background color I want), or an additional line in the css for #page-bottom-widget area with background-color: #b8b8b8; for example?

This is what I have and it’s still not working. There may be a syntax issue b/c when I inspect element, I don’t see the bit  following #page-bottom-widget-area:before

@media screen and (min-width:768px) { /* rules for desk top */
#page-bottom-widget-area {
position: relative;
}
#page-bottom-widget-area:before {
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid gainsboro;
box-shadow: 9999px 0 0 gainsboro;
z-index:-1;
}

[scrambler]

1- You need to add the rule below in the @media rule to make the areas overflow:visible

#container, #content, #page-bottom-widget-area {overflow:visible;}

2- You need to set the content background color to transparent

3- You need to set the Widget area BG color to gainsboro too in the bottom widget area BG box

[Kimmer99]

Scrambler – you are amazing! Thank you. If I could buy you a beer I would!!

[Author]

Posts