ThemeShaper Forums » Thematic

[sticky] [closed]

Adding a Header Image

(85 posts)
  • Started 12 years ago by Ian Stewart
  • Latest reply from accessprogram
  • This topic is not a support question


  1. Regarding adding logo to left of anchor:

    "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."

    Depending on the height of your logo, you may also need to add padding to the top:

    #blog-title a {
    background:url(images/image-name.png) no-repeat top left;
    padding-left: XXpx;
    padding-top: XXpx;

    Play around with padding px until you get it just right.

    Posted 11 years ago #
  2. I'm not sure this totally belongs in this forum, it's the access div. I've changed the color but do not want it spanning all the way across. I want to make it the same width as the header and also center it.

    I've tried setting a left margin in the css as well as changing the size in the header-extensions.php function like so,

    <div id="access" style="width:960px;" align="center">

    Still it's offset. How can I make it be the same width as the header and be centered?


    Posted 11 years ago #
  3. Ok, found it, just needed to look harder - To center the #access div, I needed to add the following:

    margin:0 auto;

    Posted 11 years ago #
  4. THANK YOU!!

    Posted 11 years ago #
  5. Hi there.

    I am really new to amending themes so this is a little confusing.

    Please take a look a the following site.

    I would like to add the hubpage logo in the header on the right hand side but am confused as to how to upload the image. i usually place my logos on photobucket. do i have to do the same for a header?

    Many thanks

    Posted 11 years ago #
  6. Any way to use a conditional to display different header images on different pages? I've got the header image working by editing styles.css but can't figure out how to change it for specific pages. is my site btw

    Posted 11 years ago #
  7. stabxxx

    Hello all! Thematic
    I put the picture in Header. And how to replace "1" and firefox tab?????

    Sorry for my bad english...)

    Posted 11 years ago #
  8. mithers

    Your post gave me some nice new thoughts - a very solid read.

    Posted 11 years ago #
  9. benDugdale


    I'm using the Thematic template for the first time and could do with a few words of wisdom.

    My plan is to create a number of page templates with each having a unique header image.

    I have the header image in place for the index.php file. I would like to duplicate and alter this template to allow for alternative header images and tweaked layouts. But because all of the templates/header.php files pull from the same styles.css file I am unable to have different header images.

    I hope this makes sense, any help would be greatly appreciated.

    My test site is up at


    Posted 11 years ago #
  10. I love Thematic and am using a child theme at I've got the logo showing but currently the whole header is clickable using onclick etc in the header div. I'd like to put the onclick code in the branding div so only the logo is clickable but I don't see that as an actual div in the header, only in the CSS. Before I start adding divs inside the header on my child style sheet I thought I'd see if anyone could give me some help on this.


    Posted 11 years ago #
  11. I made a blog post on the tutorial for the header image based on this thread and how I did mine. You can check it out here:

    this can also apply to other thematic child themes

    Posted 11 years ago #
  12. you used a text indent, it's a good technique to use for other areas as well, such as footer area if it has the sites logo.

    Posted 11 years ago #
  13. Danieliser

    Try this for your header image. Using text-indent:-9000; can get you penalized in google rankings, its best to not try and hide text anywhere outside the renderable window. This method 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>';

    And this to styles.css

    #branding {
     height: 187px; /* Change this to your images height */
     padding: 0;
    #header-image {
     background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
     cursor: pointer;
    Posted 11 years ago #
  14. Hi,

    I am a complete newbie with CSS but somehow I managed to upload header pics into css and update it through FTP. However, how do I insert the logo on the right hand side of my header instead of replacing the blog title? ( I want to keep the blog title on the left side of the header) Thanks in advance

    Posted 10 years ago #
  15. So I have the Autofocus Pro theme and it lets you upload a custom image for a header, but at the cost of losing its "clickability."

    Can someone who has this exact theme please tell me how to make the image I uploaded clickable again. I am a newbie at CSS but with clear directions I can do it.

    Posted 10 years ago #
  16. I just wanted to thank you guys for this post and this forum. Thanks to them, I've figured out how to get rid of the blog's name above my header image on the Power child Thematic theme and how to hyperlink my header image. This is no small feat for me!

    Posted 10 years ago #
  17. Hi guys,

    I modify the code manually to insert the logo

    <div id="logo">
    /" rel="home"><img src="<?php echo get_bloginfo('stylesheet_directory')?>/images/logo.jpg" title="<?php bloginfo('name') ?>"></div>
    <?php /*add_wicked_top_aside();*/ thematic_access(); ?></div>
    <div id="branding"> ...

    but what is the code to get the skin folder path?
    I mean:



    Posted 10 years ago #
  18. ingular

    Hi, I have a small image next to my blog-title, and I was wondering if there was any way to have the image link be different to the link of the text? So basically is it possible to have two links in the blog-title instead of one?

    thanks a lot for thematic! and all the forum posts, really helpful

    Posted 10 years ago #
  19. Awesome! Thanks for sharing!

    Posted 10 years ago #
  20. sooraw

    Hi I am using the code that Danieliser posted a few post earlier to display the header

    I have a wrapper also.
    The wrapper is 1000 px wide and my header is 1000px wide.
    But I cant get the header to line up with the wrapper on the left side, there seems to be some kind of padding that I have to change but I cant find it
    I posted an image of what my site looks like now.

    Anyone know how I can move the header to the left?

    This is the code for the wrapper im using

    #wrapper {
    	margin: 0 auto;
    	width: 1000px;
    #wrapper {
    	background: #f1e9e9;
    	margin-top: 0px;
    	border:0px solid #ccc;
    	padding: 0 20px;
    Posted 10 years ago #
  21. hey

    Posted 10 years ago #
  22. I'm a watch addict who likes to share any information and design toward Tag Heuer Replica Watches, if you are looking for a great watch then consider going to the best online store.

    Posted 10 years ago #
  23. Logan

    Depends on how the themes HTML was built.
    If you add it, it may mess other things up.
    If you aren't good with HTML and CSS, I suggest you not worry about it.
    If you want it hat bad, find the author of theme and get his/her assistance.
    If you don't know the author, look in themes HTML for that. It's usually at the top or at the bottom.

    Posted 9 years ago #
  24. Upload your header image (which should be 960px wide) to your media library and then post the URL of that image here and we can help you with the code.

    Posted 9 years ago #
  25. accessprogram

    You all doing a great job thanks for sharing such a nice and informative post.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.