ThemeShaper Forums » Thematic

[closed]

Adding Custom Image Header

(21 posts)
  • Started 11 years ago by rebeccintosh
  • Latest reply from Robert.Wagner.VT
  • This topic is resolved

Tags:

  1. 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 11 years ago #
  2. 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 11 years ago #
  3. 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 11 years ago #
  4. 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 11 years ago #
  5. 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 11 years ago #
  6. 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 11 years ago #
  7. Works fine for me :-) .. went to http://imulan.com/news/ and added the above mentioned picture as background to blog-title.

    Posted 11 years ago #
  8. 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 11 years ago #
  9. rebeccintosh
    Member

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

    Posted 11 years ago #
  10. yes. and be careful to delete all previous occurencies of #blog-title and #blog-description!

    Posted 11 years ago #
  11. 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 11 years ago #
  12. when i will got a lttle bit of time, I will send you the code.

    Posted 11 years ago #
  13. rebeccintosh
    Member

    Thank you.

    Posted 11 years ago #
  14. Sorry, I can't see the title/description at http://imulan.com/news/... have you resolved the issue?

    Posted 11 years ago #
  15. 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 11 years ago #
  16. 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 11 years ago #
  17. 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 11 years ago #
  18. concretebox
    Member

    Yep, that's more like it.

    Posted 11 years ago #
  19. 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 11 years ago #
  20. 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 9 years ago #
  21. 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 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.