Support » Fixing WordPress » Move header text into image

  • Resolved santa2


    Hi All,

    Can anyone tell me how to move the header text of my website into the image? I saw a website that did this using twentytwelve and would like a similar look. I see a code for moving the header above the image on forum discussions, but i want something different. I am new to this so taking it a step or problem/challenge at a time.

    This is my website, so far, I recently developed a child theme for twenty twelve and will change the image.
    this is the header look and menu I would like to have..

    please advice on any tips.

Viewing 15 replies - 1 through 15 (of 20 total)
  • the header text is ‘photoshopped’ into the image;

    and the site title and description are hidden.

    Ok. I will give it a try. I saw a few suggestions on how to hide site title and description (some describe a line appearing after they do this).

    I am not clear on the following:
    1. Where I am supposed to look for the style.css, am I going to the child them (which contains the code I entered only) or the original twentytwelve theme? How does this work.
    2. After I do this, what is the next step? Can you please give more direction on the suggestion below. I am new to this.

    When I looked at the twenty twelve theme (appearance->editor) I did not see anything regarding “#site-title” in the style.css area. I did see the below under header.php

    <h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    The below instruction was found on the forum but once again I do not see site-title under style.css. Please advice! Thanks in advance!
    go to styles.css and look for:

    #site-title {
    directly underneath add
    That hides the title.

    Now look for:
    #site-description {
    and then directly beneath that like before add:

    Now if you want to get rid of the small space above it look for this:

    #header {
    padding: 30px 0 0 0;
    and change 30px to 0 like this:
    #header {
    padding: 0 0 0 0;

    [please mark any posted code – ]

    all changes need to be made in the child theme and its style.css;
    no next step, after you have added/edited the styles to hide the title and description or hgroup;

    The below instruction was found on the forum

    this is definitively for a different theme, and therefore, the css selectors of Twenty Twelve will be different.

    for all these general formatting problems, try to work with a browser inspection tool such as Firebug to identify what styles you need to edit.

    Great, thanks. I will give it a try and let you know how it goes.

    Hi again. THis may seem like a silly question but I majored in nursing this is all foreign to me.

    My twentytwelve stly.css file only has the code I inserted and nothing else. The appearance-> editor for child theme states “the child theme inherits templates from the parent theme”. So my question is below:

    1. Am I supposed to go to the parent theme as there is nothing in my style.css besides the code below, which i inserted.

    It is only when I go to the parent theme that I see the style.css…thus I am not clear on what you mean when you say I should only work via the child theme… Do you mean I go to the parent theme and type the changes in the child theme I created…thus below the command below? Please help again!

    Theme Name: Twentytwelve Child
    Description: Child theme for the Twenty Eleven theme
    Template: twentytwelve
    Version: 3.4.2

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


    you would need to add new styles to style.css of the child theme to overwrite the ones from the parent theme;


    Theme Name: Twentytwelve Child
    Description: Child theme for the Twenty Eleven theme
    Template: twentytwelve
    Version: 3.4.2
    @import url("../twentytwelve/style.css");
    .site-title, .site-description { display: none; }

    Great, thank you!

    I am working on the ‘photoshopped’ header and will try the above codes. Will let you know how it goes…

    Hi all,

    I can’t seem to get my twentytwelve child theme to match it’s default parent.

    I’ve got this as my style.css –
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Ian
    Template: twentytwelve

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

    but my child theme has no style as a result. I’ve created a twentyeleven child theme just fine but for some reason 2012 doesn’t work.



    Ok, will do. Thanks alchymyth.

    Hi. PLease take a look at the changes to my site, based on the above selections.

    I added the code, .site-title, .site-description { display: none; } to the bottom of my style.css child theme but when i pressed -update file” the title and description did not disappear.

    I was able to photoshop my image but it totally changed the shape of the header, which no longer is the length of the menu bar. I would like the header size to stay the same. I tried changing the scale and also inserting 960x 250 in the appearance-> header tab, however nothing is working

    …any further suggestions?

    Hi Alchymyth,

    I just looked at my site and the code you gave me works! Thanks!
    I am not sure why it did not update yesterday.

    So …one more task to go, which is adjusting the header size. 960×250 was the suggested size, which is more rectangular. My image was more like a square.

    I saw from past posts that I may have to look at the function.php file. Any further tips?

    Thanks again!!!

    in Twenty Twelve, the coding for this is in /inc/custom-header.php

    however, using a child theme, you can make the adjustments in functions.php of the child theme;


    function twentytwelvechild_custom_header_setup() {
    	$header_args = array( 'height' => 420 );
    	add_theme_support( 'custom-header', $header_args );
    add_action( 'after_setup_theme', 'twentytwelvechild_custom_header_setup' );

    Ok. I will give it a try. Thanks for the speedy response!!! I will let you know how it goes.

    Quick question Alchymyth.

    I am not sure if I am to use the above code as is, or adjust the height size indicated by “420”? Please clarify.

    In the event I am to adjust the height size , how do I know what to place into the child theme code. Thanks in advance!

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Move header text into image’ is closed to new replies.