Home Forums Weaver Xtreme Theme Wide Background (or border) for Per Page Widget Area?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17674
    Kimmer99
    Participant

    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

    #21596
    scrambler
    Moderator

    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

    #21597
    Kimmer99
    Participant

    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.

    #21598
    scrambler
    Moderator

    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

    #21599
    Kimmer99
    Participant

    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;
    }

    #21600
    scrambler
    Moderator

    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




    #21601
    Kimmer99
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.