Need to customize a header

  • Resolved Amanda Willness

    (@amanda-willness)


    12 years, 9 months ago

    I have downloaded Twenty Eleven 1.3 and would like to change the Website Title and Explanation of website into a logo. I have updated the CSS but I am not sure where to insert the HTML coding. Help!!!

Viewing 5 replies - 1 through 5 (of 5 total)

  • This might not be the best way to do this, but if you have access to the theme editor under Appearance, you can change the text within the <body> tag on the header.php page. If you open the Header page, scroll down until you find <body <?php body_class(); ?>>. There you will find the code for the site title bloginfo( 'name' ) and explanation bloginfo( 'description' ). These can be replaced with an image. However, if you use another theme you will lose these changes.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    You want to change the website title and explanation into a logo. If you mean to use the banner graphic as a logo, this may be a solution for you.

    Don’t edit anything in the wp-content/themes/twentyeleven directory, it will only cause you grief later on.

    Try this instead with a child theme.

    Create a new empty directory in wp-content/themes called twentyeleven-child. Once that’s created copy this style.css file into it.

    /*
Theme Name: Twenty Eleven Child Theme
Author: Self-Help WordPress User
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

#branding hgroup {
        display: none;
}
input#s {
        background: #fafafa url(../twentyeleven/images/search.png) no-repeat 5px 6px;
}

    You can download the style.css file from this Pastebin.com link.

    This will cause the text above the banner image to not be displayed and the banner image will move up on the page.

    The search box remains but has no background so the banner image shows through it. By adding the color #fafafa it now has a solid background in the input search field.

    Thread Starter Amanda Willness

    (@amanda-willness)

    Thank you both for your help on this, very much appreciated.

    If I want to use a seperate image such as a logo in place of the Website Title and Description instead of moving the banner up on the page. Can I create a child theme for that?

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Description instead of moving the banner up on the page. Can I create a child theme for that?

    Yes, and you should. ??

    If you can’t do it in CSS (my preferred method) you can identify the files you need to modify and only copy those replacement files into the child theme directory.

    That way you only need to maintain one file and let the parent theme take care of itself.

    Thread Starter Amanda Willness

    (@amanda-willness)

    Thank you it worked like a charm:

    If any one needs to create this child theme this is the coding I used in the style.css file.

    @charset “utf-8”;
    /*
    Theme Name: Twentyeleven Child
    Description: Child theme for the twentyeleven theme
    Author: Your name here
    Template: twentyeleven
    */

    @import url(“../twentyeleven/style.css”);

    #site-title { text-indent: -9999px; width: 281px; /* width of the image file. */ height: 94px; /* height of the image file. */ margin:30px 0 0 0; background: url(/logo.jpg) #fff no-repeat; font-size: 1px; line-height: 1px; text-decoration: none; }

    In the coding don’t forget to change the height, width and the url of where your image is.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need to customize a header’ is closed to new replies.