Weaver Xtreme – Full/Wide Screen Background

I’m a big fan of Weaver Themes. I’ve used Weaver II Pro for a while on several sites. I found it to extremely versatile with great support forums. But all good things must come to an end and the creator decided to come out with an entirely new theme that reflects more of today’s design criteria (e.g., responsive design). So while they will continue to support Weaver II Pro for a bit, they are strongly encouraging everyone to design any new sites using Weaver Xtreme, or its expanded version, Weaver Xtreme Pro. Eventually, I will need to convert my Weaver II sites (stay tuned for some blog entries on that experience). Also, I still haven’t decided if I need/want to purchase Weaver Xtreme Pro (again, another blog entry). For now though, I decided to use Weaver Xtreme for a brand new site upon which I am working.

Right off the bat, it’s been pretty easy using the new theme. Many settings are controlled by simple check marks. They are also easily identified. But this week, upon client request, I ran into a bit of a snag. You see, the client wanted a wide screen background behind one section of the site on the home page. In Weaver Xtreme, it’s easy to accomplish this behind the header or footer. It’s simply a check box in the Appearance–>Theme Options–>Header (or Footer) tab.

Extended BG Attributes - Weaver Xtreme

But getting this to happen in a different area of the site (in my case, the bottom page widget area), proved to be extremely difficult. I started by trying to finagle the widths of different sections of the site via the Appearance panels but that didn’t work. Then I tried by custom CSS but that didn’t work either. I even changed the site so that the entire content area would be wide/full width. I didn’t like the look of that. I wanted the content to be mostly centered and just wanted the background to be different to give the appearance of full width.

So I went over to the Weaver Support Forums and found these tips from “Scrambler”: Full Width Designs. Though it seemed to me that these tips applied more to Weaver X Pro so I asked how to accomplish this using standard Weaver Xtreme and Scrambler came through.

CSS & Settings for Full/Wide Screen Background in Weaver Xtreme

Here’s the code in case anyone needs it:

@media screen and (min-width:768px) { /* rules for desk top */
#id-area-name-in-which-you-want-wide-background {
position: relative;
}
#container, #content, #id-area-name-in-which-you-want-wide-background {overflow:visible;}
#id-area-name-in-which-you-want-wide-background:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid replace-this-with-hex-code-for-background-color;
box-shadow: 9999px 0 0 replace-this-with-hex-code-for-background-color;
z-index:-1;
}}

Additionally:

  • in the Appearance–>Theme Options–>Content Area you must set the Content Area BG to transparent
  • in the Appearance–>Theme Options–>Sidebar & Layouts, you must set the corresponding Widget Area BG (in my case the Bottom Widget area), to match the color you set in the border-left and box-shadow colors above.

That’s it. Then you’ll have a wide/full screen background behind that widget area on your site.

Comments are closed.