Hey Josh,
There are a couple of ways you can do this.
That theme’s CSS is setting the logo to a width 1000px. So the fastest way would be to open your image up in an image editor and make the width of the image 1000px without changing the actual size of the logo. In Photoshop you would do this by changing the CANVAS size – just be sure to put the logo where you want it (i.e. centered, left-aligned, right-aligned, etc.)
That’s a work-around. The correct way to do it, though slightly complicated way (since you’re new to WP) would be to change the CSS. You basically want this:
.center{width: auto;}
Instead of this:
.center{width: 1000px;}
Before going into too much detail on how to do this let me know if this is something you would need help to do.
You also need to undo what the other thread recommended because it didn’t work for you and somewhere during the manipulation your site now has this: “> near the logo.
Thanks so much for your help. I changed the .center{width: 1000px;}to auto and it made the image the correct size. It also shifted the content to the left. I removed what the other thread said to do, but I still have the”> next to the text (where the logo used to be) Any idea where that would be coming from?
Hey Josh,
Glad I could help.
I’m seeing this in your code:
<h1> "> THIS</h1>
So you’ve got “> in your header.php file or in your site title in General Settings.
I found it and took it out. Thank you. Now that I changed 1000px to auto it shifted the slider and content to the left side of the page. The logo is centered at the top. How do I align the content back underneath the logo?
Hey Josh,
These adjustments should not have caused that to happen. It looks like a <div> was deleted by accident somewhere- some kind of wrapper most likely.
I would highly recommend backing up your site and re-installing the Theme (newest version). Then do just the changes from above.
If this can’t be done let me know, and I’ll see what I can do.
Hey Justin, I looked into backing up my site and it seems way too intricate a process for me to handle (newb) If there is anyway you could look and see maybe what is causing the shift I would be in-debted man. If not no worries, I’ll make another post and see if someone would be willing to help out. Thanks for all your help!
Hey Josh,
It looks like you’re missing the </div> that goes with your <div id="header">.
In your header.php where you see this:
</div><!--HEADER END-->
Try this:
</div></div><!--HEADER END-->
@joshlferguson – you really should not be modifying any theme files – as all of your changes will be lost when the theme is updated. You should instead be making changes using a child theme – see:
http://codex.wordpress.org/Child_Themes
So before you get too far into modifying the theme, I’d strongly suggest you make a child theme – it’s really not a good situation to lose a lot of work when you update the theme.
Wpyogi, Thanks! I will look into that.
Hey Josh,
Okay, so this is the CSS you need to get it to work:
.center{
width: 1000px;
margin: 0px auto;
}
#header h1 img{width:auto;}
However, if you change this on the Theme stylesheet, and if you update the Theme down the road, the changes will disappear.
If you set up a Child Theme, and just put a single CSS file in there (and import CSS from Parent Theme Zenon-Lite folder) with the code above, an update won’t change these settings (or any other future CSS changes made to the file).
Justin, where would I place the #header h1 img{width:auto;}
Do I right click on the logo and inspect element then enter it in the bottom right of the screen? Or do I change it from appearance>edit from my dashboard?
If I purchase a premium theme will I be able to make changes and not have to worry about the theme reverting back to it’s original look when it gets an update?
Hey Josh,
The .center styling above is the theme’s original styling for that element and needs to be in the theme’s style.css file. You can change that under Appearance – Editor – stylesheet.css, but once it’s fixed you shouldn’t use this area to make adjustments to a Parent Theme, only a Child Theme. The code is this: .center{ width:1000px; margin:0 auto;} and is near the top after the comments and body{}.
The only way to make changes to a WP Theme and not have them revert back after an update is to create a Child Theme- regardless of whether it’s Premium or not.
For this reason, the #header h1 img styling (and any custom styling) should go in the stylesheet of a Child Theme (http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme).
Do you have an FTP client? You’ll need to navigate to your WP installation folder and find the themes folder inside of the wp-content folder. Then create a folder called zenon-lite-child.
Inside this folder you’ll want to have a stylesheet.css with at least the following:
/*
Theme Name: Zenon Lite Child
Template: zenon-lite
*/
@import url("../zenon-lite/style.css");
#header h1 img{width:auto;}
Once that’s done you can activate Zenon Lite Child from the Themes panel in your WP back-end and you should be good to go.
