Move header text into image
-
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
-
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> </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 ]
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 orhgroup;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.
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 ..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”);
——-
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; }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.
Thoughts?
Thanks
please start a new topic
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?
Thanks!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;
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' );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!
The topic ‘Move header text into image’ is closed to new replies.