Adding Custom Image Header « ThemeShaper Forums

ThemeShaper Forums » Thematic

[closed]

Adding Custom Image Header

(21 posts)

Started 15 years ago by rebeccintosh
Latest reply from Robert.Wagner.VT
This topic is resolved

Tags:

header image

rebeccintosh
Member

Hi, I love the Thematic Theme. The clean design is perfect. I would like, however, to add an image header instead of the html title and blog description. I've tried several things but I just can't get the combination of code right. Could someone share how to do this?
Thank you.

Posted 15 years ago #
dannydamnboy
Member

You have to build a child theme for achieving this result, It's better than change thematic itself. if you could send a link to the image, I wll code it for you.

cheers.

Posted 15 years ago #
rebeccintosh
Member

Hi Danny, Thank you so much:)
Here's a link to the header imager: http://www.imulan.com/news/wp-content/themes/thematic/images/header.png
As you can see, I've modified the colors in the news blog (http:www.imulan.com/news), etc. to reflect the main site (http:www.imulan.com), but I just couldn't get the header to go right after endless hours of trying.

Posted 15 years ago #
dannydamnboy
Member

well, it's hard to understand why images doesn't show. I've tried a bit but tnothing.
what i suggest: download a fresh copy of thematic and overwrite the old one, downlaod a child theme, use it (in control panel, select the child theme instead of thematic), edit its style.css to achieve your color scheme (as you have done in your present version) and then post here that you have done the ugrade.
I can't do nothing right now, I hust can't figure out what is happening.

please rememeber: edit STYLE.CSS only!

Posted 15 years ago #
Chris
Moderator

Mmmh .. do you need only one picture in the header linking to "Home" or do you need the same behaviour like in your 'old' site dealing with 3 pictures and 2 different links?

Cheers,

Chris

Posted 15 years ago #
dannydamnboy
Member

Chris, I cannot add any image (in header, in blog-title, in blog-title a, in branding). only bg color works. and I cannot figure out why.

Posted 15 years ago #
Chris
Moderator

Works fine for me :-) .. went to http://imulan.com/news/ and added the above mentioned picture as background to blog-title.

Posted 15 years ago #

dannydamnboy
Member

yeah, in blog title now it works (i don't know why now it works and this early afternoon it doesn't...).
anyway,this is the code:

#blog-title {
background:transparent url(http://www.imulan.com/news/wp-content/themes/thematic/images/header.png) no-repeat 0 0;
border:none;
font-size:36px;
font-weight:bold;
height:200px;
letter-spacing:-1px;
line-height:54px;
padding:0;
width:1000px;}
#blog-description {
color:#76796B;
padding:0;
}

then try to adjust the link whereever you wolud like it to appear

Posted 15 years ago #

rebeccintosh
Member

Which file should I add the code to ... style.css?

Posted 15 years ago #
dannydamnboy
Member

yes. and be careful to delete all previous occurencies of #blog-title and #blog-description!

Posted 15 years ago #
rebeccintosh
Member

The code worked perfect ~ except I can't seem to find the code to remove the blog title/description.... is there something I should take out in the header.php?

Posted 15 years ago #
dannydamnboy
Member

when i will got a lttle bit of time, I will send you the code.

Posted 15 years ago #
rebeccintosh
Member

Thank you.

Posted 15 years ago #
dannydamnboy
Member

Sorry, I can't see the title/description at http://imulan.com/news/... have you resolved the issue?

Posted 15 years ago #
rebeccintosh
Member

I was just playing around with it ~ and yes, it appears to be gone (with the exception of a tiny, tiny little line at the top - which I have no idea what it is or why it is appearing.

I changed the code in the style.css (font size from 36 px to 0 px)
}
#blog-title {
background:url(http://www.imulan.com/news/wp-content/themes/thematic/images/header.png) no-repeat 0 0;
border:none;
font-size:0px;
color:#fff;
height:200px;
padding:0;
width:1000px;}
#blog-description {
color:#fff;
padding:0;
}

FYI ~ I also added onclick="location.href='http://www.mywebsite.com/';" after the <div id="blog-title" so the header would link back to the home page. That one worked out.

Posted 15 years ago #
concretebox
Member

That seems to put the header image as the background for the title of the site/blog, but a couple of things:

Why doesn't a color:#00FF00; in the #blog-title change the color of the title text?

And isn't there a place to put the header image so that it is the image for the whole header div, not just the #blog-title?

Posted 15 years ago #
Anthrax
Member

my background image is in #header ?!?!?!

#header {

background:#000000 url(img/headerbg.png) no-repeat scroll 20px 20px;
border-left:4px solid #DDDDDD;
border-right:4px solid #DDDDDD;
margin:0 auto;
width:890px;

}

Posted 15 years ago #
concretebox
Member

Yep, that's more like it.

Posted 15 years ago #
concretebox
Member

Anthrax, yep, I was so new I did not know to do that... I was excited to get an image up IN the header, period ... but clearly what I was after was a header image that was the background for the whole #header {}

Posted 15 years ago #

Danieliser
Member

For header images i have created a better method if you would like to check it out. It keeps all of the Thematic SEO Goodness by adding a span with link to the header below the blog title and description. This span is sized to 100% of the header div and will appear layered over your header text. You can read about it here.

Here is the snippet

Add this to functions.php

// Add Header Image // Add Header Image
function thematic_logo_image() {
 echo '<a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name').'" ><span id="header-image"></span></a>';
}
add_action('thematic_header','thematic_logo_image',6);

And this to styles.css

#branding {
 height: 187px; /* Change this to your images height */
 padding: 0;
 position:relative;
}
#header-image {
 background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
 height:100%;
 width:100%;
 position:absolute;
 cursor: pointer;
 top:0;
}

Posted 13 years ago #

Robert.Wagner.VT
Member

Hello Danieliser,

Tried this technique that you posted, but it does not do anything save move the blog title/description up to the very top of the web browser with no padding space above it.

Could it be that the web server (Apache) is caching the CSS or something?

Just getting started with theme customisation... thanks for being patient !

Cheers,
Robert in Vermont

Posted 13 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.