Jump to content

Archived

This topic is now archived and is closed to further replies.

photomom86

Full-Width Header?

Recommended Posts

photomom86

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.

 

[attachment=2387:Full Width Header.jpg]

Share this post


Link to post
Share on other sites
photomom86

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

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

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

Share this post


Link to post
Share on other sites
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

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!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • flourishdesignstudio
      By flourishdesignstudio+
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
×