Jump to content
Sign in to follow this  
scientistsofmedia

fixed width background color in content area with full width header bar

Recommended Posts

scientistsofmedia+    0
scientistsofmedia

is it possible to have a fixed width background color in content area with a full width color header bar?

 

I have added a transparent background to my content area by adding this
.page-id-14 #content {background: rgba(255,255,255,0.8);}
 

However, I need the background color to only go the width of my content area, 1000pixels.  right now it is going full width.

 

here is a link to my site:

http://helenmoney.com/main/bio/

 

I've attached a mock up of the look I am trying to achieve.

 

I have my site set up as "Responsive with Pixel Width" and "Full Width Sections" so I can achieve the full width header.  I have tried switching to "Fixed Width Mode" and that makes the content background the size I want, but then the header is no longer full width.

 

any advice would be appreciated.

 

--

eric

 

 

 

post-38053-0-37420000-1356646296_thumb.j

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Yes you can do this using css. When you inspect the element for the main content area (i think it comes up as dynamic-content) that will affect the full width of the page, if you keep going down through the html hierarchy you'll get to a point where it says column-main and then m-column-pad. As you run the mouse over the name of each div you'll see the area that div affects highlight blue on the screen above, so then you can gauge which bit is best to apply your color bg too. I think the below will work well for you.

 

.fullwidth #column-main .mcolumn-pad {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.63);
    padding-left: 15px;
    padding-right: 15px;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
scientistsofmedia+    0
scientistsofmedia

that code worked!!  Thanks James B.  I love pagelines!

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×