ThemeShaper Forums » Thematic

[sticky] [closed]

Adding a Header Image

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

Tags:

  1. 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 5 years ago #
  2. 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 5 years ago #
  3. There is no image folder in the Thematic directory. But you can make one in your Child Theme directory.

    Posted 5 years ago #
  4. 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 5 years ago #
  5. I don't quite follow.

    Posted 5 years ago #
  6. 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 5 years ago #
  7. Do you have a link to the site?

    Posted 5 years ago #
  8. sure! http://asoundmatch.com/blog

    Posted 5 years ago #
  9. 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 5 years ago #
  10. Thanks very much. All set.

    Posted 5 years ago #
  11. 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><!-- #header-->

    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 5 years ago #
  12. 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 5 years ago #
  13. 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 5 years ago #
  14. Start your custom CSS after the @import declarations.

    Posted 5 years ago #
  15. 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 5 years ago #
  16. 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 5 years ago #
  17. Hey,

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

    Cheers,

    Chris

    Posted 5 years ago #
  18. aoda
    Member

    Thank you, Chris!

    Posted 5 years ago #
  19. 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 5 years ago #
  20. 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 5 years ago #
  21. 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 5 years ago #
  22. hydrophyte
    Member

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

    hydrophyte

    Posted 5 years ago #
  23. 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 5 years ago #
  24. I changed this, but thanks for taking a look.

    Posted 4 years ago #
  25. 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 4 years ago #
  26. 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 4 years ago #
  27. bigvanilla
    Member

    Hi Chris and thanks for your answare.

    I did go ok now :-)

    // Patrik

    Posted 4 years ago #
  28. 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 4 years ago #
  29. 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 4 years ago #
  30. 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 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.