WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Move header text into image (21 posts)

  1. santa2
    Member
    Posted 1 year ago #

    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.
    http://sesamesuban.com/
    ---------------------------------------
    this is the header look and menu I would like to have..
    http://kojikis.wordpress.com/

    please advice on any tips.
    -amma

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    the header text is 'photoshopped' into the image;

    and the site title and description are hidden.

  3. santa2
    Member
    Posted 1 year ago #

    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>
    		</hgroup>

    ---------------------------------------------------------------
    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
    display:none;
    That hides the title.

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

    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 - http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    1.
    all changes need to be made in the child theme and its style.css;
    2.
    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 http://getfirebug.com/ to identify what styles you need to edit.

  5. santa2
    Member
    Posted 1 year ago #

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

  6. santa2
    Member
    Posted 1 year ago #

    Hi again. THis may seem like a silly question but I majored in nursing ..so 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");

    -------

  7. alchymyth
    Forum Moderator
    Posted 1 year ago #

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

    example:

    /*
    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; }
  8. santa2
    Member
    Posted 1 year ago #

    Great, thank you!

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

  9. ian277
    Member
    Posted 1 year ago #

    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.

    Thoughts?

    Thanks

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    @ian277

    please start a new topic

  11. ian277
    Member
    Posted 1 year ago #

    Ok, will do. Thanks alchymyth.

  12. santa2
    Member
    Posted 1 year ago #

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

    http://sesamesuban.com/

    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?
    Thanks!

  13. santa2
    Member
    Posted 1 year ago #

    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. 960x250 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!!!

  14. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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;

    example:

    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' );
  15. santa2
    Member
    Posted 1 year ago #

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

  16. santa2
    Member
    Posted 1 year ago #

    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!

  17. alchymyth
    Forum Moderator
    Posted 1 year ago #

    yes -

    adjust the height size indicated by "420" to your own number value.

    how do I know what to place into the child theme code.

    either calculate that from the aspect ratio and width of your desired header image; or enter 1999 so that the image width will determine the cropping.

  18. santa2
    Member
    Posted 1 year ago #

    Ok. great,thanks again! Your an angel!

  19. santa2
    Member
    Posted 1 year ago #

    Thanks, for the above and all of your help Alchymyth! I was able to manipulate my header via photoshop and altered the image to get the header size I want. I will mark this topic as resolved. Everything looks good.

    Thanks again!!

  20. jojojovich
    Member
    Posted 1 year ago #

    Hi, I'm sure there is a way to keep the title+tagline on top of the header image; is that explained somewhere?

    I keep finding posts that touch on this then veer off. I'd like my site title and tagline to appear as text on top of my header image, so presumably I need to move the header image upward, and the title+tagline over/on-top-of the header image.

    Can this be explained here? This string's title is exactly what I'd like to do, without photoshopping it into the header image.

    Thanks so much. :)

  21. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @jojojovich - it can probably be explained if you start your own thread - and include a link to your site. This one is old and already marked resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic