WordPress.org

Ready to get started?Download WordPress

Forums

Header Image for Grimelda (21 posts)

  1. mediawatch
    Member
    Posted 9 years ago #

    Hello -

    I'm trying to replace the header text in my Grimelda theme blog with a clickable image. I've had zero success. I've search through these forums and many others and just haven't been able to get it to work. Can someone point me in the right direction?

    My site is http://www.dailytraveldeal.com

    I see header references in the styles.css and also code in the header.css. Not sure which to chance to add the image file to. The image file is named dailytraveldeal_trans.gif.

    Thanks

  2. moshu
    Member
    Posted 9 years ago #

    There are several solutions in this thread:
    http://wordpress.org/support/topic/18922

  3. mediawatch
    Member
    Posted 9 years ago #

    It's not so much about making it clickable as it is about getting the image to show in the first place. As I mentioned, I've been through many threads on these forums and tried a number of things, but something isn't clicking.

    In the Style.css there are these sections:

    #header {
    margin: -2.4em 0 0 -1.5em;
    padding: 0;
    width: 105.7%;
    width: 740px;
    background-color: #ffe090;
    text-align: center;
    border-bottom: 7px solid #7f0000;
    }

    #header a {
    display: block;
    width: 100%;
    padding: 2em 0;
    margin: 0;
    background-color: #e5f7ff;
    }

    #header a:hover {
    background-color: #dbf4ff;
    }

    The header.css has this:

    <div id="header"><h1>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></h1>
    <div id="tagline"><?php bloginfo('description'); ?></div>
    </div>

    I'm just looking for where to insert the image.

    Thanks.

  4. moshu
    Member
    Posted 9 years ago #

    1. Add a background image declaration to the header section, like
    background-image: url('images/yourimage.jpg');

    2. Since you asked about a "clickable" image I gave you some resources.

  5. mediawatch
    Member
    Posted 9 years ago #

    It just doesn't work. I've put that code into each of the header statements and at various times I get four images of the logo "blocked" across the header (I know: the "block" tag but changing that didn't help) and another time it appeared in the tagline section...even though I didn't put it there.

    I appreciate your patience.

  6. kickass
    Member
    Posted 9 years ago #

    Try making the img file reference an absolute path instead of a relative one. That worked for me.

  7. mediawatch
    Member
    Posted 9 years ago #

    I did try that. More of the same. Sorry about this. I actually do know a little about this stuff, it's just that this one has me baffled.

  8. Michael Bishop

    Posted 9 years ago #

    Where do you have the header image? Is it in your grimelda theme folder or somewhere else? That will determine the path.

  9. mediawatch
    Member
    Posted 9 years ago #

    The image does show up at times...it's just *where* and *how* it shows up that has me baffled.

    The image is at

    http://www.dailytraveldeal.com/wp-content/dailytraveldeal_trans.gif

  10. Michael Bishop

    Posted 9 years ago #

    One problem is that your header is 740x170 and the image you are trying to use is 312x91. So if you are not really specific how it is displayed, that may be one source of your problems.
    I would create an image 740x126(the area of your header, minus the tagline.
    Are your theme files loose in your wp-content folder, or are they in a folder called grimelda? If in the grimelda folder, I would move the image file there. In your header CSS, you could put something to the effect of:
    background: url('header.jpg') no repeat top;
    Which I believe would leave room for your tagline without interference. I would also specify a height for the header it appears to be approx 170px high, including the tag line.
    Also curious as to why you have a width of 105% AND width set to 740px in your header CSS.

  11. mediawatch
    Member
    Posted 9 years ago #

    I recreated the banner to be 740x126

    I put it into the Grimelda images folder.

    I changed the background to read:

    background: url('header.jpg') no repeat top;

    I tried an absolute path.

    Now if you look at the page, the tagline is pushed down into the body of the blog and still no banner.

    I'm not sure why there was both a % and a PX reference. Doesn't make any sense.

  12. mediawatch
    Member
    Posted 9 years ago #

    Here's what my stylesheet looks like now:

    #header {
    margin: -2.4em 0 0 -1.5em;
    padding: 0;
    width: 740px;
    background: url('header.jpg') no repeat top;
    text-align: center;
    border-bottom: 7px solid #7f0000;
    }

    #header a {
    display: block;
    width: 100%;
    padding: 2em 0;
    margin: 0;
    background-color: #e5f7ff;
    }

    #header a:hover {
    background-color: #dbf4ff;

  13. Michael Bishop

    Posted 9 years ago #

    I'm not sure if you changed it back or what, but I just looked at your style sheet and didn't see the changes. The other question is why the negative margins? I don't know enough about CSS to understand negative margins, but when I used the web developer plugin for FF and commented out the negative margins, it looked a litte better.
    Also, if you I tried looking in dailytraveldeal.com/wp-content/themes/grimelda/images/header.gif
    and couldn't find the header image.

  14. mediawatch
    Member
    Posted 9 years ago #

    I did set things back to the original way, just because it was butt ugly.

    The file is at: http://dailytraveldeal.com/wp-content/themes/grimelda/images/header.jpg

    I'm not sure about the negative margins and the two height listings...this is how the theme came...

  15. Michael Bishop

    Posted 9 years ago #

    OK, I figured it out. First, the header a, and header hover, are covering up your image. I commented them out, put in the image and it was there. I also set the header height to 150px, and put a top padding on the tagline of I think 80, and got what you are looking for, approximately.
    You will probably want to go into the index and pull the tag that get s the name, or I believe there is a css trick to leave it in, but it not show. Something about acccesibilty, haven't gotten that far in my design.
    Hope this helps.

  16. Lorelle
    Member
    Posted 9 years ago #

    You might want to check out the new article on the WordPress Codex, documentation site:

    http://codex.wordpress.org/Designing_Headers

  17. mediawatch
    Member
    Posted 9 years ago #

    Miklb - can you show me the code for those sections...I tried it as I know how, and it's still not showing...

    Lorelle thanks...that article is helpful, but the problem remains. Thanks to everyone for the input thus far.

  18. Michael Bishop

    Posted 9 years ago #

    you almost have it, I'd shorten the height to 140, and add px to 80 in the padding.
    Or, you can remove the tag line div, and use this graphic:
    http://www.miklb.com/images/traveldealheader.png
    You will then want to remove these from the header.php
    '<h1>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></h1>'
    And remove all of this (or comment it out)`<div id="tagline"><?php bloginfo('description'); ?></div>
    </div>'

  19. mediawatch
    Member
    Posted 9 years ago #

    I'm embarrassed to say it still isn't working. I had to again reset it back the original code because the page was so messed up after making those changes.

    I'm sorry to be such a pain with this. It's frustrating and I appreciate your trying to help me out.

  20. Michael Bishop

    Posted 9 years ago #

    allright. I'm more than willing to see if you can get what you want. But at this point, this might not be the best venue. email me at
    wordpress @ miklb dot com, and perhaps we can work through this.

  21. mediawatch
    Member
    Posted 9 years ago #

    After a couple weeks of trying, I finally got it to work...sort of.

    In the header template, This is what my header section says:

    <div id="header">
    <img border="0" src="http://www.dailytraveldeal.com/wp-content/themes/grimelda/images/traveldealheader.png">
    </div>

    I couldn't get it to turn into a link without making the page all screwed up, but I added a "home" link to the top of the sidebar to compensate.

    Thanks for everyone who took the time to assist, especially miklb...

Topic Closed

This topic has been closed to new replies.

About this Topic