ThemeShaper Forums » Thematic

[closed]

How do I add a header image?

(71 posts)
  • Started 5 years ago by melemel
  • Latest reply from Danieliser
  • This topic is resolved
  1. Yep. It should still be there.

    Posted 5 years ago #
  2. czarg
    Member

    YaHoo! Partially - baby steps Ian -

    When I created the banner I chose the size listed above it worked except for the sides of the banner which still show the original color.. Is there a way to change this so that it encompasses the entire browser window? I'm thinking maybe make it a transparent gif and have it load that? or change the color of the meta panel file? Suggestions?

    Now I gotta go figure out why my shutter reloaded plug-in don't work no more?

    Regards George

    Posted 5 years ago #
  3. czarg
    Member

    Scratching head - I jus deactivated nd activated plug-in - works fine... strange.. ahhh the idiosyncrasies of Wordpress -

    Posted 5 years ago #
  4. czarg
    Member

    Easy question - why does the meta panel not appear on some machines?
    george

    Posted 5 years ago #
  5. That's an easy question? I don't know. :)

    It won't appear in browsers that have javascript disabled.

    Posted 5 years ago #
  6. czarg
    Member

    Well I knew for you or some one could answer it right off.. but then reading through several of the posts - your gonna do away with the meta-panel-thingy... I for one thought it was cool.. Anyhow -

    Ian - On the banner is a faint underline that normally underscores the name of the site when a person names it using settings. I added my own banner and that underline still appears on top.. is there a way to remove it?

    Regards
    George

    Posted 5 years ago #
  7. Could you post the URL? Or email it to ian at themeshaper dot com?

    Posted 5 years ago #
  8. #blog-title {style.css (line 75)
    border-bottom:1px solid #242A30; /* Here's where your line is coming from */
    font-size:36px;
    font-weight:bold;
    letter-spacing:-1px;
    line-height:54px;
    padding:99px 0pt 0pt;
    }
    Posted 5 years ago #
  9. gracestanat
    Member

    to Ian regarding moving photo link (discussed earlier in this thread).

    Yep, on your advice, it was all accomplished in the styles.css file. Thanks!

    Had to do some fiddling with the position parameter for several divs, but working fine now.

    Posted 5 years ago #
  10. Here's a tutorial on adding a banner or header image to the basic Thematic theme: Edit your Wordpress theme - Headers.

    I don't recommend following this instruction however:

    Now, look inside a folder called library for a folder called layouts. In there you will find the ‘2c-r-fixed.css’ file. Look for your ‘branding’ class. This is where we will code in by hand your new background image that is going to be 940px x 244px. You will need to make one of your own, or you can download mine. I just used a generic graphic from the Juice Drops library (available for purchase online) to make my background. Here is that image, right click the image and save the actual 940px x 244px size.

    Make this change in a Child Theme.

    Posted 5 years ago #
  11. Hi,

    I added the #header code to the style.css as instructed in the third or fourth comment on this thread, and the header indeed loaded - but: now the page navigation links don't work.

    You can see it here: http://kangnamacademics.com/ Any guidance would be appreciated. Can't wait to delve into the child theme approach, but first things first :)

    Posted 5 years ago #
  12. Try removing the z-index.

    Posted 5 years ago #
  13. Excellent, Ian, thanks. (For others with this problem, that means just delete the "z-index" line in the code snippet for styles.css offered at the top of this thread.)

    Much appreciated :)

    Posted 5 years ago #
  14. JGFox
    Member

    I'm having a great deal of trouble with this. I'm trying to use a clickable header image without the SEO consequences per the original posts but I'm not having any success whatsoever.

    Here is the site: http://joshuabferris.com

    The problem is that it's creating space between the top and bottom of the header image. Any ideas?

    Posted 5 years ago #
  15. @JGFox: re "The problem is that it's creating space between the top and bottom of the header image"...

    Ian might have a better answer for you but take a look at the padding values in your #blog-title and #blog-description...

    -----------------------------------------------------------------------------------

    #blog-title {
    font-size:36px;
    line-height:54px;
    font-weight:bold;
    letter-spacing:-1px;
    padding:99px 0 0 0; <- here you have 99 px of padding at the top
    border-bottom:1px solid #242A30;
    }

    #blog-description {
    font-style:italic;
    padding:8px 0 63px 0; <- here you have 63 px of padding at the bottom
    color:#fff;
    }

    -----------------------------------------------------------------------------------

    If you reduce the size of the padding you won't have all that "space between the top and bottom".

    Posted 5 years ago #
  16. JGFox
    Member

    Thanks for the help Marti. I made the changes and now there is just a small gap that I'm sure I can figure out with Firebug. The theme is so unbelievably flexible that it's a little overwhelming at first glance. Thanks again!

    Posted 5 years ago #
  17. Constance
    Member

    i have what is probably a stupid question, but can anyone tell me where to find the images folder inside the thematic theme? i think monkeymartin's code will be what i need, but i can't figure out where this file is he refers to.

    Posted 5 years ago #
  18. @Constance... re "can anyone tell me where to find the images folder inside the thematic theme?"...

    In your Wordpress installation (I'm assuming you're creating a child theme) you should create a folder i.e. /wp-content/themes/yourchildtheme/images/

    Place the images for your child theme inside of the /yourchildtheme/images/ folder. Don't touch the images folder within Thematic itself, that will defeat the purpose of Thematic.

    So at minimum in /yourchildtheme/ you should have your file 'style.css' (that you'll do the CSS editing on) and then a folder named images for the 'yourchildtheme' project.

    Posted 5 years ago #
  19. I've followed this forum's steps to add an image into my header. However, I'm lost on the vertical spacing. (see the example at http://hydrovibe.com) How do I move the menu down without touching Thematic's files?

    Any help is greatly appreciated!

    Thanks, Heather

    Posted 5 years ago #
  20. him
    Member

    The easiest way in your case is to increase the height of the header image, probably leave some more black area at the bottom ( remember to check in ur style.css - header height, branding height)that will visibly push the menu down.

    Nice clean design btw!

    Posted 5 years ago #
  21. Thanks, him. I removed the branding after adding the image as a background image (from the tutorial on this forum). For some reason, the menu bar is now at the top... Not exactly what I wanted but it looks good enough to me. So I'll go with it!

    And thanks for the compliment on my site... :)

    Posted 5 years ago #
  22. I am completely new to css and have been teaching myself via the tutorials.

    I would like to insert a *.png image into the header, so that it sits over another background. As a first step, I created an images file into the child theme, then uploaded the file.

    The image should have graphic text with a transparent background, but for some reason, the background of the graphic stays gray no matter what I try in the style.css file.

    I am using WP 2.7, but I don't have a good understanding of the changes when it comes to using child themes - could I create a new header.php file in the childtheme folder instead?

    I hoping I have made a silly mistake that an experienced user can help point out.

    Here is what I have so far:
    /************** BODY *************/
    body {
    background-color: white;
    font-family: Candara, "Lucida Sans Unicode", "Lucida Sans",
    "Trebuchet MS", "Lucida Grande", "Bitstream Sans Vera",
    Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
    }

    /************* HEADER **************/
    #blog-title a {
    display:block;
    text-indent:-9000px;
    width: 500px;
    height: 50px;
    background:transparent url("http://66.147.242.161/~warewolf/wp-content/themes/WWGchildTheme/images/WWG Logo 500x50.png") no-repeat top left;
    }

    Comments would be greatly appreciated, thank you!

    Posted 5 years ago #
  23. This is what I have using your code on a basic child-theme:
    http://www.altamentedecorativo.com/featured/warewolf.jpg
    Is this what you expected? I can't see the gray background...

    Posted 5 years ago #
  24. by the way: I used Firefox 3 for rendering.

    Posted 5 years ago #
  25. That's exactly what I was hoping to get as a result! Odd, Internet Explorer on my computer shows the image with a gray background....

    I noticed that the file extension was changed to jpg, maybe that makes a difference? Does that mean that the background of that text will stay white?

    The reason I had thought of using a png, was if I wanted to use the graphic text is overlaid on top of another image, then I don't end up with two colours competing. Meaning, if the other header image is blue, for example, the graphic won't end up with white background rectangle on top of blue? Will that work with a jpg image?

    Posted 5 years ago #
  26. Hey .. if you need to overlay pictures the way you described it, you have to use the png format. JPGs do have a solid background.

    Cheers,

    Chris

    Posted 5 years ago #
  27. @dannyboy - I reread your posts and answered my own question about the jpg, when I realized your link is a screenshot showing the code I posted.

    @chris, here is the code snippet I would like to try and use for the overlaid image:

    #header {
    width: 800px;
    height: 200px;
    background: transparent url(http://headerimage.jpg) left bottom;
    position: relative;
    }
    /* header background image to be determined */

    #header h1 {
    position: absolute;
    text-indent: -9999px;
    width: 500px;
    height: 50px;
    background: transparent url("http://66.147.242.161/~warewolf/wp-content/themes/WWGchildTheme/images/WWG Logo 500x50.png") no-repeat;
    }

    The problem is, this seems to left justify everything, including the drop-down menu bar. Also, I try to view in two versions of Internet Explorer, and I still have the same problem with the png background. In one version, the background displays gray, and in the other version it is light blue. Looks ok in my picture viewer. Maybe this is an Internet Explorer issue?

    Posted 5 years ago #
  28. @labriej .. Currently testing.

    Posted 5 years ago #
  29. Ok .. added the following code to my style.css:

    #blog-title a {
    display:block;
    text-indent:-9000px;
    height: 50px; /* height of your header, like 180px */
    width: 500px; /* width of your header, like 940px */
    background:url(images/WWGLogo500x50.png) no-repeat top center;
    }
    
    #blog-description {
    position:absolute;
    left:-9000px; /* We avoid display:none because it's bad for SEO */
    }
    
    #header {
    background: blue;
    }

    .. using the blue background to verify that the PNG is working .. FF3 and IE7 are both perfect.
    .. removing the blue background to verify that there're no gray or blue shadows .. FF3 and IE7 are both perfect

    Cheers,

    Chris

    Posted 5 years ago #
  30. Thank you for checking/confirming.

    <scratches head> so IE is not the problem.... I am using IE version 6.0 with Vista to view. Also tried on a different computer IE7 with Vista and same issue.

    Here is the link for the temporary url I am using to play around with the images.
    http://66.147.242.161/~warewolf

    Will try just setting the background to a colour and see what happens on my browser.

    Posted 5 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.