Uploading and positioning a logo

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

The default logo for Chameleon is a little small for what most people probably want. This tweak will show you how to upload your logo and then how to position it. To upload your logo, you'll want to follow these steps:

- Open the epanel in your WordPress dashboard under Appearance->Chameleon Theme Options.

- Under Logo, click Upload Image.

- Drag your logo image within the dashed lines or select the file from your computer

- Select Full Size and then click the Use for Logo button.

- Make sure you click Save at the bottom of the epanel screen and your new logo should now display

- You may have to clear your browser's cache if the new logo is not displayed

As you can see from the screenshot above, our bigger logo has created a new problem. Our WordPress tagline is bleeding into the middle of the logo. If you do not have a tagline set and do not want one, skip to the next section for tips on positioning your new logo. If you are new to WordPress, you can easily remove the "Just another WordPress site" tagline in the WordPress dashboard under Settings->General. If you want to keep a custom tagline but prevent it from bleeding into the logo, do this:

CSS

Locate your style.css file in /chameleon-child/

Add this code:

p#slogan {
margin-left: 20px
}

Changing the left margin to 0 will butt the tagline right up against the logo on the right side. You can see in the screenshot below how 20px adds a little separation. You can also adjust the top and bottom margins of the tagline or font color, size or family using the p#slogan style. 

If you want to align the tagline beneath part of your new logo like in the default logo, give your left margin a negative value like this: 

p#slogan {
margin: 75px 0 0 -50px;
}

 

Now if you want to adjust the positioning of the logo, add this to the style.css file:

#logo {
margin: 10px 0 20px 0;
}

This positions the logo 10 pixels further from the top and 20 pixels from the bottom of the header. Depending on the size of your logo, you can play with these numbers to get the results you want.

    4 Comments

  1. This is an artcile that makes you think “never thought of that!”

    Christiana

    February 23, 2015

  2. Whoo hoo! It worked! Thanks!

    Dafydd

    March 21, 2018

  3. Thank you for the info

    Amanda Orleander

    January 5, 2021

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This