Your website just got a whole new look by installing a WordPress Theme you eventually purchased on marketplaces like themeforest.net or downloaded from wordpress.org.
Now the theme really fits your corporate colors and it’s nice and easy to customize from the backend – what might won’t concern you yet is the logo space!
Note: The CSS classes, file names and line numbers are referring to the theme I am using to explain the customization – not every theme will have the same class names. If you are unsure I recommend installing Firebug for Firefox or using Chrome’s native right-click > Check Element feature to get the exact class and location of the CSS value.
We will be taking a look at “Free – a Premium Corporate WordPress Theme” Jay talked about some days ago and see how various logos work with that theme.
So that's what the theme's demo looks like
This is what it looks like after we uploaded our custom wide logo – dimensions 200px x 50px. Looks neat, right?
Now your logo might be square while the provided space wants it to be wide but not high – so you either shrink your logo or enlarge the space for the logo to keep the dimensions.
What I will do is showing you exactly how to change the height of the logo container to fit any logo!
The logo is too high – it pushes the slider to the side because the logo consumes too much space down there. What happens is a break of the layout.
Now this does not mean the theme is badly coded nor does it mean you’re going to have to buy another theme.
What matters and defines a theme as coded with clients in mind is the ease of being able to change the dimensions of the provided space.
Inspecting the container the logo is placed shows us the wrapping container has a height set in the CSS.
The matching CSS for this theme can be found in style.css, line 520 and says:
#navigationtop .ktwrap {
padding-top: 20px;
padding-bottom: 5px;
height: 71px;
}
What we will do now is changing the value of 71px to the value that suits our logo best. Since the logo in our case is 150px high and we want to add some extra space at the bottom for room to breathe, I will go for 180px.
Let’s see how that looks now:
See how great the logo fits the theme now?
So in the end, it really does not matter whether your logo is square, round or a star – knowing how to change the provided space is the only key.
I hope you learned something today and will be able to use it for any theme you will need to change the logo space.
If you are using our themes and are stuck, you of course can send us a message and we will look the exact CSS location up for you!
All the best
