Jump to content

Archived

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

photomom86

Full-Width Header?

Recommended Posts

photomom86+    1
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+    1
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    1,327
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+    1
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    1,327
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+    1
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    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
×