Results 1 to 9 of 9

Thread: Wordpress ?: How do I replace a Text header with a graphic header?

  1. #1
    Join Date
    Jul 2009
    Location
    Greater Houston Area, Texas
    Posts
    195

    Default Wordpress ?: How do I replace a Text header with a graphic header?

    Hi,
    I'm using a free wordpress template, that I've been tweaking, but now I've hit a wall. I have a new header graphic that I want to insert, but I can't seem to find the header code to insert. I've looked in the header.php file and the stylesheet, but I think I'm in over my head. Could someone point me in the right direction?

    Thanks!

  2. #2
    Join Date
    Jul 2009
    Location
    Missouri, USA
    Posts
    954

    Default

    If it's not in the header.php file, then look in the stylesheet.css for coding there for the header area, chances are the background graphic is being called in from there.
    Traci Knoppe
    Chronic Beauty Life

  3. #3

    Default

    Is it a "live" blog? If so, what's the URL? Seeing how it's set up might help us help you.

  4. #4
    Join Date
    Jul 2009
    Location
    Greater Houston Area, Texas
    Posts
    195

    Default

    Linda - yes - the url is http://www.ITCustomerservice.com I'm trying to put the following graphic in the header
    http://www.itcustomerservice.com/ima...ader-650px.jpg


    Traci, I found in the CSS where the background color is being set, but not a background URL. maybe I'm missing something?

  5. #5
    Join Date
    Jul 2009
    Location
    inside my own head
    Posts
    2,011

    Default

    This page on the WP site is generally helpful http://codex.wordpress.org/Designing_Headers

    You're not seeing a background URL in the CSS section, because there is no background image in the original layout. It's just a block of color, in this case the navy blue color. So you're in the right spot, you just need to add the background url information to it. Does that make sense?

  6. #6

    Default

    The codex is helpful, but sometimes it's hard for me to follow. I often find what I need in the WordPress.org forum. http://wordpress.org/support/

    I did a quick Google search and found a site that may be exactly what you need.
    http://tamba2.org.uk/wordpress/graphicalcss/ (under the "header" section)

    In addition to adding the header image, you need to suppress the text that is currently displayed in your header (title and description).

    You may find that the new header image is a little to wide. I think your content box is only 610px wide and new image in 650px.

    Once you get started if you have specific questions I'm sure we can help you more.

  7. #7
    Join Date
    Jul 2009
    Location
    West Coast, Canada
    Posts
    173

    Default

    Hi Sheakay,

    I have inserted an image on one of my sites before and I changed it through the header file. It worked for me.

    I suppose that it would depend on your theme if you can change it or not.

    Look at the bottom of the header.php file for:
    ---------------------------------------
    <body>
    <div id="wrap">

    <div id="header">
    ---------------------------------------
    (After the above and before the final </div> enter the following code. -- not this sentence or the hyphens. grins.)

    <br />

    <p>
    <a href="http://www.itcustomerservice.com"><img src="http://www.itcustomerservice.com/images/logo-header-650px.jpg" alt="ITCustomerService.com"></a>
    </p>

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

    Remember to copy and paste your header.php info in a text editor in case you need to change it back.

    Like was said above, make sure that your header image is the same width or it won't look right.

    Hope it helps.

    Al Smith
    There is no try. Just do...

  8. #8
    Join Date
    Jul 2009
    Location
    Missouri, USA
    Posts
    954

    Default

    This is how you would add an image as the background for your header; just insert this code below where the header background images is located in the CSS stylesheet:
    background: url(images/backgroundimagename.jpg) no-repeat 0 center;
    Just change the above to reflect that actual name of your background image and make sure the image is uploaded inside the images folder for the theme you're using; OR with the parenthesis, include the full URL to the background image if you have the image already on the web located outside of the theme's image folder.
    Traci Knoppe
    Chronic Beauty Life

  9. #9
    Join Date
    Aug 2009
    Location
    Cambridge, ON Canada
    Posts
    199

    Default

    Yes, I agree with some of the above mentioned points. That header is too big for your template as is.
    Working with graphics to replace text is not always easy. I searched high and low for the easiest template to replace headers. Try installing the theme "Unlimited 1.0" created by WP Theme Land which you can find in the theme directory or on their site. If you have problems finding it or getting it, just PM me and I can send you a zipped file.

    It is great because once installed all you do is go to the custom header tab under appearance in your wp tools bar(on left side) and then upload your image from pc. You can crop and everything there.

    If you try it out, let me know how it goes.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •