Jump to content


Photo
- - - - -

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


Best Answer James B , 27 December 2012 - 10:48 PM

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;
}
Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 scientistsofmedia

scientistsofmedia

    Advanced Member

  • Members

  • 37 posts

Posted 27 December 2012 - 10:12 PM

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:

Please Login or Register to see this Hidden Content

 

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

 

 

 

Attached Files



#2 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 27 December 2012 - 10:48 PM   Best Answer

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.

 

Please Login or Register to see this Hidden Content



#3 scientistsofmedia

scientistsofmedia

    Advanced Member

  • Members

  • 37 posts

Posted 27 December 2012 - 11:59 PM

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



#4 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 28 December 2012 - 12:13 AM

You're welcome :-)