Jump to content
severxance

Header Logo - remove padding, center, background color

Recommended Posts

severxance

Hello, I need help with the header:

1. Change the color behind my uploaded logo to black

2. Center the logo (I will not be using the area to the right for social media icons)

3. Remove the space/padding around the logo so that it is flush with the top of the screen, the nav bar, and left and right margins -- Actually if I did this, I guess changing the color behind it would be irrelevant because it would take up the entire space.

 

See http://severxance.com/

 

I am trying to get it to look similar to the attached mockup.

 

Thank you.

 

Share this post


Link to post
Share on other sites
James B

Hi there

 

In order to change the color of the container behind your logo, center the logo and make adjustments to the padding, you'll need to use custom css.

 

If you've not used css before, check out our guide and overview here - http://support.pagelines.me/docs/customization/custom-css/ which advises on the tools we suggest you use to find and edit the various css selectors.

 

There's also a plugin called Sexy Snips which has some general css snippets inside you can copy-paste. www.pagelines.com/store/plugins/sexy-snips/

 

Your custom css can be pasted in to Pagelines>site options>custom code. This will override the default styles.


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
severxance

Thanks.  Sexy Snips worked for the centering of the logo.  Still trying to figure out how to either make it fit into the entire space or make the background blank.  

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Glad that worked for you. To get the background image full width you'll need to remove the padding in the .content-pad for the branding section, then set the width for the image to 100%.

 

Look for the class .section-branding in firebug, you'll see an area in the css for the image where can adjust the width. Also within the branding section you'll see a class for .content-pad.

 

http://screencast.com/t/o1G20cq1aY


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
severxance

UGH.  Thank you for your help but unfortunately I am no programmer.  The best I have come up with for the CSS is the following:  

 

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black;}} which takes care of everything but the margins.

 

I don't understand why the margins aren't 0 (zero) -- flush to the edge of the header area.  I have also tried adding in padding: none and padding: 0 ... as so:

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black; padding: 0;}}

 

I am assuming that there is just some snippet missing in the line of code above to remove all padding from the header image.

Share this post


Link to post
Share on other sites
James B

Hi there, when you format your css you'll need to do it in the following format (using the above code you posted as an example)

#branding .mainlogo-link, .mainlogo-img {margin:0 auto; float:none; background-color: black; padding: 0;}

The padding you have left on the page is coming from the content-pad inside the branding area. 

 

http://screencast.com/t/QWvrscxA5j

 

So if you look at the screenshot above, you'll see id on the left in the html, and the css on the right relating to the padding. So in order to remove that you'd write the css as below

.section-branding .content-pad {padding:0;}

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
severxance

Hallaleujah!  It worked.  THANK YOU!  :)

 

Now, can you help me with the navigation bar: changing it to a custom image (repeatable) that goes full width (out to the very edges of the screen)?

 

I really appreciate your help.

Share this post


Link to post
Share on other sites
James B

Hi there,

 

I would advise using the background-image css command - http://www.w3schools.com/cssref/pr_background-image.asp and applying it to the #navbar container which will go right to the edge of the screen, and to the .content-pad otherwise you'll find your page canvas color will show over the top of the navbar background. You'd apply an image as a background in the format of

#navbar {background:url(your full url goes here);}

However you'll have the existing nav bar colors are showing still as they're applied to another class called - .navbar.pl-color-black-trans on top of the navbar container.

 

You'll need to set the background-image in that class to :none; so only your custom background image displays.

 

The end result will be something like http://screencast.com/t/J4pcDKBgEcFa

 

Unfortunately we're not able to provide css code directly for making css customizations, we can only point you to relevant resources so you can learn the required skills to find/edit the code etc.


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
severxance

Yes!  That example you gave is exactly the sort of thing I am trying to do.

Share this post


Link to post
Share on other sites
severxance

OK, I am getting somewhere.  I got the nav bar graphic image to show and go full width and I even centered the menu items.  But I still can't figure out how to get the default black nav bar and background behind it to go away.  I don't know how to edit the Classes or which Class file to choose.

 

Here's my site: www.severxance.com

 

Here's my CSS:

 

 

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black;}}
.section-branding .content-pad {padding:0;}
/* Centered Navigation */
#page {
  #navbar,
  #nav{
    .navline,
    .main-nav{
      float:none;
      text-align: center;
      li {
    display:inline-block;
        float:none;
        text-align:center;
      a {
        float:none;
        text-align:center;
      }
      }
    }
    .dropdown-menu {
        text-align:left;
    }
  } 
}
/* Centered Navigation Media Query*/
@media(max-width:767px){
body.pagelines {
  #page {
     #navbar {
        .navline {
          float:none;
          text-align:left;
          li,a {
            display: block;
            float: none;
            text-align: left;
          }
        }
      }
    }
  }  
}

 

What you said about the existing nav bar makes sense but can you tell me which Class file to edit?  I thought maybe it was class.css but I am lost again.

 

Thank you again.

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Custom CSS isn't 'nested' as you've done.  This causes the code to break and become ineffective.

 

Within the curly brackets of a CSS tag, you need to include only those elements that are to be changed, as well as any others within the tag that may not be changed now, but perhaps in future.

 

So, this is correct:

#nav .navline, .main-nav{      float:none;
      text-align: center;
      }
This is not:
#nav{    .navline,
    .main-nav{
      float:none;
      text-align: center;
      li {

As you can see, it's both nesting, and, it fails to close the operands, so the browser doesn't have any idea where one thing begins, and the other ends.

 

I'd suggest you spend some time looking over examples found here: http://www.w3schools.com/css/

 

When you craft some CSS, before implementation, try using the By direct input tab here: http://jigsaw.w3.org/css-validator/  It will make sure your code is correct before you implement. Additionally, it will guide you to fix errors.

 

 

 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
severxance

Thanks, I am just going to hire someone at this point.

Share this post


Link to post
Share on other sites
severxance

Yes, I hope to talk with someone at tunatraffic.com tomorrow.  Thanks.  :)

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


  • Similar Content

    • gregory.guz
      By gregory.guz+
      Hi ,
      I just noticed that the color picker has stopped showing up on my PL5 site ( please see attached image ) 
      Any idea what could be causing the problem?
       
      Thanks 
      Greg

    • 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 !

    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • greatthingsllc
      By greatthingsllc+
      In Platform 5, Using Framework Section for Content , I have set the hyperlink colors in the CUSTOMIZE section.   However, none of the pages are properly displaying the link colors.   Just defaulting to black, and underline on hover.   I did not see where this would be controlled at the page level or lower
      Site    doritbrauer.com
      Thanks
      Josh

×