Change logo text to logo image - Zenon lite theme (7 posts)

  1. fierce
    Posted 2 years ago #

    I am stuggling to change my logo text to a logo image in the Zenon lite theme. This theme does not have an option to change or add an image in the theme options so I think I need to edit the CSS file?? I have managed to upload the file "logo.png" to the template images folder but not sure where to go from there. I know I need to edit the CSS but have not found any definitive way to do this.

    Any help would be greatly appreciated!!

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You can either use CSS to put the logo as a background image or you'll need to edit the header.php file. Posting a link to your site would be a good start.

  3. fierce
    Posted 2 years ago #


    I am still very new to wordpress so i didn't realise you could put the logo as a single fixed background image and delete the default text. I just tried that but it is not big enough and still not showing the entire logo...

    Any suggestions and help on what to change for use as a background image or with using CSS would be great! I have also copied the code if this helps. This is with the logo image as the background but it is not big enough or showing the entire logo.

    #header{width:100%; float:left;}
    .logo{ width:100%; float:left; margin-bottom:25px;}
    .logo h1{ text-align:center; margin-bottom:5px;}
    .logo h1 a{ color:#333; text-decoration:none;}

    .outer-center {float: right;right: 50%;position: relative;}
    .inner-center {float: right;right: -50%;position: relative;}
    .logo img{ margin-top:15px; margin-bottom:15px; border:none;}

    Thanks for the help!!

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Okay, before you do anything else you need to create a child theme -- otherwise you are going to lose all your changes when the theme is updated. After you've done that...and moved any changes you've made already into the child theme, then proceed on this.

    You need to put the logo as a background in the #header CSS -- not as a body background -- which is what you have. Try this in the child theme style.css file:

    #header {
        background-image: url("http://fiercepublicity.com/wp-content/uploads/2012/11/logo1.png");
        background-position: center top;
        background-repeat: no-repeat;

    You will then likely need to do some adjustments to the spacing, etc. in the CSS and hide the text already there.

  5. blackparrot
    Posted 2 years ago #

    Hi there! I was able to upload my logo to the header thanks to your guidance, but is there any way to reduce the header height? I would like to significantly reduce the amount of white space above and below my logo. I tried cropping the logo but that didn't help. Thanks for your help! http://www.blackparrotproductions.com

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    @blackparrot That's not the same subject.
    You can create your own thread to discuss that.

    Edit: Good night WPyogi :)

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Morning Andrew :)! Nitey-nite for me...

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.