Jump to content
severxance

Header Logo - remove padding, center, background color

Recommended Posts

severxance    0
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    436
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    0
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    436
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    0
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    436
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    0
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    436
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    0
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    0
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    547
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    0
severxance

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

Share this post


Link to post
Share on other sites
severxance    0
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

    • lionel1
      By lionel1
      Hi,
      i try to put some images (Logos) in the Agency module / clients module section
      But i only can put 6 logos though the module propose to add more item
      Thanks for ur help
      Lionel 
      Capture d’écran 2017-06-27 à 20.55.27.png 
    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • 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…
×