Jump to content


Photo
- - - - -

Header Logo - remove padding, center, background color

header color center padding margins logo


  • Please log in to reply
13 replies to this topic

#1 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 19 April 2013 - 08:51 PM

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 

Please Login or Register to see this Hidden Content

 

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

 

Thank you.

 



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 09:22 PM

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 -

Please Login or Register to see this Hidden Content

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.



#3 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 19 April 2013 - 09:39 PM

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.  



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 10:11 PM

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.

 

Please Login or Register to see this Hidden Content



#5 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 19 April 2013 - 11:49 PM

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.



#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 April 2013 - 12:28 AM

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)

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content

 

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

Please Login or Register to see this Hidden Content



#7 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 20 April 2013 - 12:35 AM

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.



#8 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 April 2013 - 01:02 AM

Hi there,

 

I would advise using the background-image css command -

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

 

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.



#9 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 20 April 2013 - 04:55 AM

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



#10 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 20 April 2013 - 05:37 AM

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;}
#navbar {background:url ('

Please Login or Register to see this Hidden Content

');}
/* 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.



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 April 2013 - 03:12 PM

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:

Please Login or Register to see this Hidden Content

This is not:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

 

When you craft some CSS, before implementation, try using the By direct input tab here:

Please Login or Register to see this Hidden Content

  It will make sure your code is correct before you implement. Additionally, it will guide you to fix errors.

 

 

 



#12 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 20 April 2013 - 07:23 PM

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



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 April 2013 - 02:06 PM   Best Answer

These might help.

 

Please Login or Register to see this Hidden Content

or 

Please Login or Register to see this Hidden Content



#14 severxance

severxance

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:Developer
  • Country: Country Flag

Posted 21 April 2013 - 11:07 PM

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







Also tagged with one or more of these keywords: header, color, center, padding, margins, logo