Adding a Header Image « ThemeShaper Forums

ThemeShaper Forums » Thematic

[sticky] [closed]

Adding a Header Image

(85 posts)

Started 14 years ago by Ian Stewart
Latest reply from accessprogram
This topic is not a support question

Tags:

header
css

1 2 3 Next »

Ian Stewart
Key Master
I find that the best way to add a header image is with CSS image replacement on the anchor in the #blog-title div. That way, the image is "clickable". There's a good example of it here. But here's how I do it (you'll want to be dropping the following code snippets into your Thematic Child Theme style.css):
```
#blog-title a {
background:url(images/image.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}
```
If you want to just add a logo to the left of the anchor you can add some padding to the left and drop in a background:
```
#blog-title a {
background:url(images/image.jpg) no-repeat top left;
padding-left: XXpx;
}
```
If you want to just add an image behind the blog title you can use the background selector on #header or #branding. Make sure to use top center like this:
```
background:url(images/image.jpg) no-repeat top center;
```
That'll keep your image in place when the screen is resized.

More info can be found under CSS Background on the w3schools site. That site taught me almost everything I know about CSS. That and hacking around with blog templates!

Play around with CSS and experiment. You'll find that it can be really easy to work with—and fun.
Posted 14 years ago #
asoundmatch
Member

I feel ridiculous asking this ... where is the image folder in the thematic 0.9 folder? I cannot find it anywhere.

I ask because I want to upload an image into the header.

Thank you!!!

Posted 14 years ago #
Ian Stewart
Key Master

There is no image folder in the Thematic directory. But you can make one in your Child Theme directory.

Posted 14 years ago #
asoundmatch
Member

Thank you, Ian! Time for one more very green Q?

Into which php file, and where do I insert or replace the div tag for #blog-title a?

Thanks, Lynne

Posted 14 years ago #
Ian Stewart
Key Master

I don't quite follow.

Posted 14 years ago #
asoundmatch
Member

I figured out to insert the div tag into the header.php file.

My image is displaying now ... but it shows up twice, even though I put the no repeat code in css. Any proposed solution? Thank you for the support! ~Lynne

My code:
#blog-title a {
background:url(http://asoundmatch.com/blog/wp-content/themes/thematic.0.9/asm_theme/images/WP_Header1_030409.gif) no-repeat top center;
display:block;
text-indent:-9000px;
width: 540px;
height: 170px;
}
#blog-description {
color:#fff;
padding:0;

Posted 14 years ago #
Ian Stewart
Key Master

Do you have a link to the site?

Posted 14 years ago #
asoundmatch
Member

sure! http://asoundmatch.com/blog

Posted 14 years ago #
Ian Stewart
Key Master

Ah. You didn't need to add any markup to header.php (but you are using a Child Theme, very good!). The blog-title div was already there. Revert back to the default thematic header and you'll be fine.

Posted 14 years ago #
asoundmatch
Member

Thanks very much. All set.

Posted 14 years ago #
cregy
Member

Hi Ian

Just wanted to add how I added a header slideshow to Lostwithiel. It looks a bit crude at the moment but I am using NextGen gallery and I changed the header.php to include this:

<div id="header">
<?php echo nggShowSlideshow(gallery2,965,200) ?>

<?php thematic_header() ?>
</div>

I need to tidy things up a bit and I ought to use a gallery that has properly optimised images but give it time and it should look good.

Any thoughts?

Cheers

Rich

Posted 14 years ago #
Dores
Member

Hey,

Even though being quite the beginner I manage to add a header image using the very first of the described ways.

How can I have my Blog title appear right under the image?

I'm sure it's very easy.

Thanks,
Dores

Posted 14 years ago #

ric
Member

First, I would like to thank you for creating such a brilliant theme!

What I would like to accomplish is to have a banner and logo image similar to what you have in http://themeshaper.com/ (not the similar graphics ofcourse)

So I added the following code in my style.css in my child theme (also created the image folder) but I encountered a problem right after I uploaded the new stylesheet. The banner did show up on the site but the it messed up the css layout.

#blog-title a {
background:url(images/image.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}

Here's what my style.css looks like

/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

#blog-title a {
background:url(images/header.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 988px;
height: 132px;
}

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Posted 14 years ago #

Ian Stewart
Key Master

Start your custom CSS after the @import declarations.

Posted 14 years ago #
antoniothonis
Member

When I add the header image there is a huge space above it. Fixed by adding this:

#branding {
padding:8px 0 1px;

Umm now i have a diffrent problem header of 960px doesnt vertically align with the #main if u give it a diffrent packground color. Header seems 8 pixel toomuch to the right. www.strategieforum.nl/test/

also imagine i want the main to have 2 colors one left with the posts and one right where the widgets are. As u can see now i can only give these #primary and #secondary boxes a color, but not the #main is not devided in 2 parts. Im kinda new to css so I dont know how would you do this? Removing the top and bottem paddings and adding a bg image with that color so it will fillout the rest underneath it?

Posted 14 years ago #
aoda
Member

I'm having problems with my header image appearing. There's just a black space, even though I've uploaded an image (header.jpg) to my media library in WP and entered the following in my style.css.

/*
Theme Name: Humble
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author:
Author URI:
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed-1024.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

#blog-title a {
display:block;
text-indent:-9000px;
height: 80px;
width: 940px;
background:url(images/header.jpg) no-repeat top center;
}
#blog-description {
position:absolute;
left:-9000px;
}

Site can be viewed here: http://www.humblebeanblog.com/
Any help is appreciated!

Posted 14 years ago #
Chris
Moderator

Hey,

.. create the directory /wp-content/themes/*YourChildTheme*/images and copy header.jpg into this directory.

Cheers,

Chris

Posted 14 years ago #
aoda
Member

Thank you, Chris!

Posted 14 years ago #
Resmyrranda
Member

Hi Rich,

I see you're using the same child theme I like, could you please tell me exactly where in the header.php file you placed the code for nextgen gallery? thanks!

Posted 14 years ago #
jhorac1
Member

Thanks for the suggestions as to how to go about adding a header image. I've been experiencing a bit of difficulty with the layout of the main content after adding my image, however, and I can't quite figure out what I need to change in the CSS in order to fix it.

The main content on my page http://samlrichards.com/wordpress is crammed way up into the header, so that the header is actually on top of the first post of the blog. The odd thing is that the vertical location of the main content differs by 50 or so pixels between Firefox and Safari. I can't quite figure out which parameter to change in the CSS in order to correct this. I have added the header image using the following code:

#blog-title{
display:block; /* We do this so we can add a background image */
text-indent:-9000px; /* Hides the text--but not from search engines */
height: 135px; /* height of your logo, like 180px */
width: 612px; /* width of your logo, like 940px */
background:url(images/logo.jpg) no-repeat top center; /* adds in the logo image */
}

But I'm baffled when it comes to the positioning of the main content. Can anyone offer any insight into this?

Posted 14 years ago #
hydrophyte
Member

hi,

this is a quick dumb question. i'm so tired i am seeing double. i am working directly in Thematic with no child theme. i just want to add a banner image. here is what i have done so far:

http://hydrophytesblog.com/

i got into the default.css in the library/styles directory and started hacking away following the directions above for working in child theme. here is the mess i made:

default.css

all i want is a banner image displaying all the way across the top of the page, with the blog title hidden. the only way that i was able to get that image to display was by manipulating padding around blog-title a. i know that's not right.

does anybody have any suggestion? if you note, there is also a rather large margin beneath the banner image. i want to figure out hope to draw the banner down further.

and lastly, i wonder where that "skip to content" came from(?).

thanks and regards,

hydrophyte

Posted 14 years ago #
hydrophyte
Member

i posted the previous comment. i have basically resolved the issue.

hydrophyte

Posted 14 years ago #
shawnblog
Member

I'm having a problem using above examples with the logo image showing up in IE. It only seems to appear in Firefox. The site is http://www.arborhealing.com/

I've tried a few things to fix it and wound up with the same result every time. The logo only appears in Firefox.

This is my current setup:

#header {
z-index:2;
}
#branding {
padding:44px 44px 0;
}
#blog-title {
color:#665533;
text-decoration:none;
display: ;
background:url(http://www.arborhealing.com/l1.jpg) no-repeat top left;
padding-left: 30px;
padding-right: 30px;
padding-top: 115px;
padding-bottom: 20px;
}
#blog-title a {
color:#665533;
text-decoration:none;
font-style:italic;
}
#blog-title a:active,
#blog-title a:hover {
color: #779999;
}
#blog-description {
color:#779999;
font-size:13px;
font-style:italic;
}

Posted 14 years ago #
shawnblog
Member

I changed this, but thanks for taking a look.

Posted 14 years ago #
bigvanilla
Member

Hi.

I am using Acamas 1.0.2 by Ian Stewart which I guess is a child theme for Thematic if I understand it right.

I have spent a few hours now to try to add a image at the head, with no success.

I have try to at the code:
#blog-title a {
background:url(image.jpg) no-repeat top left;
padding-left: XXpx;
}

Also try to add background image code in #header and #branding, and no results.

I wondering if I am using the right style.css file? That one I am working with is in "wp-content\themes\thematic\acamas". Is that the right place.

I have the image in the same folder as the style.css so it is not that.

I am not a beginner in either CSS or PHP. But new to Wordpress.

Can anyone give me some advice please?

Regards Patrik

Posted 14 years ago #
Chris
Moderator
Hey Patrik,

create a sub-directory 'images' under your Acamas directory .. copy your image file to the new 'images' sub-directory.

Try the original code in your style.css (Acamas directory):
```
#blog-title a {
background:url(images/image.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}
```
This will work .. tested and approved.

Cheers,

Chris
Posted 14 years ago #
bigvanilla
Member

Hi Chris and thanks for your answare.

I did go ok now :-)

// Patrik

Posted 14 years ago #
lala
Member

hi i tried to add the header into the blog; strangley it doesnt appear ; and i have followed the instructions which are quite simple ?!
im thinking maybe the root path it'snt correct ... here is exactly how it appears in my style.css :
/*
Theme Name:Layers
Theme URI:
Description: Trial blog theme
Author: Latifa
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

#blog-title a {
display:block;
text-indent:-9000px;
height: 300px;
width: 854px;
background:url(http://02a7e41.netsolhost.com/fileman/fileman.cgi?fdo=cmd_main_display;;work_path=htdocs/layers/images/layerslogo.jpg) no-repeat top center;
}
#blog-description {
position:absolute;
left:-9000px; /* We avoid display:none because it's bad for SEO */

/*i appreciate the help .. to those who are experienced bare with me; css is a new language to me :)*/

Posted 14 years ago #
dolvey
Member

I guess that I am another that is not quite getting how to put an image in the header.
Below is my code and I have the image in the images folder of thematicpowerblog.

#header {
border-top:1px solid #ccc;
margin-top:22px;
}
#branding {
background:url(images/header-image.jpg) no-repeat center bottom;
margin-bottom:22px;
padding:44px 0 198px 0; /* Bottom padding is the same height as the image called above */
}
#blog-title a {
background:url(images/Blog Header Image.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 1000px;
height: 200px;
}
#blog-description {
margin-bottom:22px;

The title does disappear but there is only white space in the place of the header

Posted 14 years ago #
dolvey
Member

I have now gotten the image to show, realizing I had a contextual error. My question now is can I just eliminate branding to get rid of the big white box below the header. I not sure that I understand its purpose.

I would also like to know if there is a way to have consistant background color for all areas or if I can insert an image as a backdrop.

Posted 14 years ago #

RSS feed for this topic

1 2 3 Next »

Topic Closed

This topic has been closed to new replies.