WordPress.org

Forums

Coraline
Logo to replace header text and tagline (10 posts)

  1. bubbielicious
    Member
    Posted 1 year ago #

    I love the Coraline but I'm unable to get my logo to appear and replace the header text and tagline.

    Is there a code I could include without having to create a child theme? I'm using Custom CSS.

    The website I need help with is http://www.temasekclub.com.au.

  2. Have you tried uploading a header image through Appearance > Header? It should be at least 990px wide by 180px high, and in a proper image format like PNG, GIF, or JPG.

    The site title and tagline are changed under Appearance > General.

  3. bubbielicious
    Member
    Posted 1 year ago #

    I reiterate. I want to replace the header text and tagline with my logo. I don't want the logo to appear under the navigation bar but where the header text and tagline is.

  4. wazza1970
    Member
    Posted 1 year ago #

    Hi

    if i have this right you want to put your logo at the top of the page above your nav

    the way i had to do that was move the code above the nav code on my header.php
    but before you do this you want to back your site up just in case you mess it up to remove the header and tag text go into appearance> header and un tick the box for header and tag text.

  5. wazza1970
    Member
    Posted 1 year ago #

    have a look at this and see if this is what you want

    [Irrelevant link redacted]

  6. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Wazza, are you sure you linked the right website?

  7. bubbielicious
    Member
    Posted 1 year ago #

    Yes I want to put the logo ABOVE the navigation bar.

    I tried to read the tutorial on making a child theme but it's way too complicated for me. Thus I would like to know if it's possible to simply enter the CSS into Custom CSS?

  8. wazza1970
    Member
    Posted 1 year ago #

    you can try this first you have to insert your header img in Appearance > Header then go to you custom css file and try this you will have to look at your code to find the right class just move the img up then your nav done with the bottom and top px

    hope this helps you

    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    
      position: relative;
      bottom: 180px;
    }
    
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    
      position: relative;
      top: 180px;
    }

    [added code tags - moderator]

  9. bubbielicious
    Member
    Posted 1 year ago #

    HI wazza, I'm sorry but I don't understand what you mean by "just move the img up then your nav done with the bottom and top px". Can you please use punctuation?

  10. CrouchingBruin
    Member
    Posted 1 year ago #

    It can be done with CSS, but the logo won't be clickable like your site title; is that OK? Just add this to the end of your custom CSS:

    #site-title, #site-description {
       font-size: 0;
    }
    #site-title:before {
       content:url(http://www.temasekclub.com.au/wp-content/uploads/2013/08/box-singapore.jpg);
    }

    Change the URL value to point to whatever image file you'd like. The first CSS rule hides the title & tag line by setting the font size to zero, then the second rule inserts the image before the site title.

    By the way, you have a syntax error in your custom CSS. I see this at the end of your custom CSS:

    .three-column #secondary {
    	width: 44.89%;
    
    .widget-area,
    .widget-area input {
    	font-size: 15px;
    	line-height: 18px;

    You need to add the closing brace } for each of those rules, or those CSS rules, and any CSS which follows, will not be read.

    If, however, you would like your logo to be clickable, i.e., it takes your user back to your home page (the logo for most sites do this), you can easily replace the site title with a clickable logo by inserting a single line of JQuery code. Since you don't want to create a child theme, you can add this code using a scripting plugin, like Header and Footer:

    <script>
    jQuery(document).ready(function($){
       $("#site-title span a").html('<img src="http://www.temasekclub.com.au/wp-content/uploads/2013/08/box-singapore.jpg" />');
    });
    </script>

    This will replace the contents of the site title with an image (again, replace the src value with the file you want to point to). You will also have to hide the site description with this CSS:

    #site-description {
       display: none;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.