Jump to content


Photo
- - - - -

Full-Width Header?

header full width

Best Answer Danny , 25 August 2014 - 09:11 AM

Yeah I mentioned in my previous post, as far as I am concerned (I could be wrong), the simplest way to have a full width header and have a fixed width content area is to use the full width mode and then apply custom CSS to your content area giving it a background color, padding etc...

 

I did this quick in Chrome dev tools - https://cloudup.com/cN5FbT6R4rd

 

You're going to need use additional CSS on the footer too. In regards to that code provided in Batmans post, that code can not work in Boxed mode, I've tried and it doesn't work, but does in Full Width mode. Whether this is to do with updates to DMS or the code is out dated, I don't know. Basically, Box mode wraps everything in a container which has a specific width, margins etc.. it is not possible to achieve a full width element without extensive CSS to my knowledge.

 

The best thing I can recommend is that you play about in Chrome dev tools, I have provided the basic code I used for as a starting point, but please be aware we do not provide extensive CSS/LESS support which in my opinion this requires.

 

#pl_areau36299 .pl-content {
  background: white;
  padding: 40px;
  box-sizing: border-box;
}
Go to the full post


  • Please log in to reply
7 replies to this topic

#1 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 23 August 2014 - 01:48 PM

Is there a way to make the header only full width? I changed my layout to full width in the settings but that makes the whole site full width and it also makes all section areas transparent. I fiddled around with it and added a background but I couldn't get it to work.

 

I added screenshots, all I really want to change is everything above the red line to be full width with no changes to the content/sidebar/widget areas.....I want to keep the green and white chevron background on the sides....below the menu bar.

 

Attached File  Full Width Header.jpg   133.01KB   0 downloads



#2 batman

batman

    Bat Learning

  • Members

  • 2202 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 August 2014 - 02:48 PM

Hi @photomom86

Please, you take a look to this

http://www.pagelines...ion-full-width/

 



#3 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 23 August 2014 - 03:16 PM

@batman thanks for the link. I've followed all the instructions on that page and it isn't working. :(



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 August 2014 - 10:50 AM

HI,

 

You're using Boxed Mode, the CSS as far as I can tell is only for the full width layout option. So it is not possible to make the header full width because the box container is set to width you have specified and the header element tag is placed inside the the boxed mode container.

 

To have a full width header area you're going to want to switch to the Full width option and then add CSS to the content container giving it a specific width.



#5 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 24 August 2014 - 01:41 PM

@Danny, ok thanks for the info. I tried switching to full width mode but I can't seem to make that work either. When I switch to full width mode then the "content areas" are transparent and the chevron background shows up everywhere. But also, when it's in full width mode the content/widget areas are the same width as the header and trying to change one changes the other.

 

also, in the link batman posted the CSS code says boxed mode no full width?

 

thanks



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 August 2014 - 09:11 AM   Best Answer

Yeah I mentioned in my previous post, as far as I am concerned (I could be wrong), the simplest way to have a full width header and have a fixed width content area is to use the full width mode and then apply custom CSS to your content area giving it a background color, padding etc...

 

I did this quick in Chrome dev tools - https://cloudup.com/cN5FbT6R4rd

 

You're going to need use additional CSS on the footer too. In regards to that code provided in Batmans post, that code can not work in Boxed mode, I've tried and it doesn't work, but does in Full Width mode. Whether this is to do with updates to DMS or the code is out dated, I don't know. Basically, Box mode wraps everything in a container which has a specific width, margins etc.. it is not possible to achieve a full width element without extensive CSS to my knowledge.

 

The best thing I can recommend is that you play about in Chrome dev tools, I have provided the basic code I used for as a starting point, but please be aware we do not provide extensive CSS/LESS support which in my opinion this requires.

 

#pl_areau36299 .pl-content {
  background: white;
  padding: 40px;
  box-sizing: border-box;
}


#7 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 25 August 2014 - 10:34 AM

@Danny thanks! I messed around with it yesterday and almost got it how I wanted it. I'll add in this code you gave me and see what I can also do with that. thanks so much!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 August 2014 - 10:53 AM

No problem.







Also tagged with one or more of these keywords: header, full width