Jump to content
Sign in to follow this  
dmgusa

Change Content Width Only

Recommended Posts

dmgusa    0
dmgusa

Hello--

 

I'd like my website to look like this: (see attached file)

 

This is what it looks like now:

 

http://peppersloughoutfitters.com/the-lodge/

 

 

I don't want the content to be all the way to the edge like that, BUT I do want the header to be full width like that. Is there a way to change the content width ONLY? 

 

Also, if you go to the main page: http://peppersloughoutfitters.com

 

The background doesn't even appear. Any suggestions?

 

Thank you.

post-40018-0-46228800-1363127808_thumb.j

Share this post


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

Hi there,

 

Ok you have a js error on the front page which is stopping the bg image from showing. If you disable your plugins it should come back, then you'll need to turn each one on, one by one to see which is causing the problem.

 

To get your logo/top banner to span the entire width of the site you'll need to use a css solution and change the set up of the site to 'full width' sections in the layout editor.

 

Once you've done that you'll be able to remove the logo you've uploaded from Pagelines>site options>website setup. Now you'll have a page with just the back on etc.

 

Then you'll need to apply a background to the header are of the site using css. If you've not used css in the framework before please check out - http://support.pagelines.me/docs/customization/custom-css/

 

Basically you'll be giving a new instruction to the header area using the background-image instruction.

 

 

#header {background-image: url(your url goes here);}
 

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
dmgusa    0
dmgusa

I tried disabling each plug in, but the background still never appeared. I'm at a complete loss.

 

Thanks-

Share this post


Link to post
Share on other sites
catrina    103
catrina

Do you have the supersize background image option selected in Color Control?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

Catrina-- Yes, I do. I tried deselecting it and it still doesn't appear. 

Share this post


Link to post
Share on other sites
catrina    103
catrina

What happens if you upload the background image to just one page in PageLines Meta Settings (in the WP page editor)?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

I fixed it! For some reason the meta settings weren't showing up for a few days, but I checked back and they were there and I fixed the issue.

The header width issue is fixed as well.

 

Thank you.

 

My new issue though, is the NAV BAR. I've looked through the forums and tried so many different CSS codes, but nothing has altered its appearance.  I want to make it so that there is no background--just transparent. I also want to be able to move the nav bar below the header image.

 

Thanks!

Share this post


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

Hi there, in order to set the navbar to transparent you'll need to set each color option in the css to none. It might be easier to use the classic nav option if you're looking for just a plain text navigation.

 

If you wish to keep the navbar, take a look at this thread which shows you the color options for the code in css, you'll need to set each one of these to none in order for it to be transparent - http://www.pagelines.com/forum/topic/24634-fixed-navbar-css-for-changing-background-colour/?hl=fixed+nav+css#entry143608


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
dmgusa    0
dmgusa

What am I doing wrong? It just stays black EVEN though I changed it to blue and put this code in. I'm at a loss here. I have "Navbar" in the drag and drop section  in the content area too. Maybe that's the issue? Thanks

 

.navbar.pl-color-blue {
    background-color: none;
    background-image: none;
    background-repeat: none;
    border-top-color: none;
    border-top-style: none;
    border-top-width: none;
}

Share this post


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

Its showing on your site that the color is still set to black, try the below.

 

 

.navbar.pl-color-black-trans {

    background-color: none !important;

    background-image: none !important;

    background-repeat: none !important;

    border-top: none !important;

}
 

 


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
dmgusa    0
dmgusa

Still shows a slight transparent background...  I wonder why. Is there a way to move the navbar below the header background?

Share this post


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

Glad you got it resolved :-)


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  

  • Similar Content

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • reklov79
      By reklov79+
      Hi,
      Meganav seems to have a bug if you upload a Logo with a higher resolution (which actually is useful as it looks then sharper on mobile phones). But on mobile the Logo is then larger than on a desktop. Problem is the following code in the meganav style.css. Simply the "height: auto !important" needs to be removed.
      @media (max-width: 480px) { style.css?ver=5.0.14:133 body .meganav-logo img{ height: auto !important; } } But how to achieve that? What is the standard method for customizing that? Overriding via CSS / LESS doesn't work - in this case especially because of the !important derictive used in the original CSS I believe.
      Changing the original CSS is something I don't want to do as it leads into issues when upgrading.
      Btw: I seem not to be the only one with that issue - anyhow, the solution here (not displaying the Logo on mobile) is not acceptable for me.
      Thanks,
      Volker
       
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • liberatedspaces
      By liberatedspaces
      My site (http://caffefioresf.com/) started having a couple of weird problems on my home page all of a sudden, without me doing anything. It's run on the latest version of Pagelines Framework.
      1. My Facebook widget that is set to the secondary sidebar to the right of the page content (the info and Open Table widget) is dropping down into the box section
      2. The box section below the content is no longer conforming to the global content width set to 960px in the Site Option Layout Editor and stretching out to the edge of the browser on both sides.
      Any help would be much appreciated!

×