Viewing 15 replies - 1 through 15 (of 19 total)
  • Josh Feck

    (@builtbynorthby)

    Check out:
    https://css-tricks.com/css-image-replacement/
    I like technique #3.

    Does your theme have a Header option in the Appearance sub-menu?

    Thread Starter davidaka

    (@davidaka)

    @esmi , yes it does…

    Thread Starter davidaka

    (@davidaka)

    @builtbynorthby sorry I should have added I am a novice with code at best… i need a dumb dumb proof solution…lol

    Why can’t you upload the new header image via Appearance->Header?

    Thread Starter davidaka

    (@davidaka)

    when I tried to replace what I thought was the section of the code for the header what I got was a header replaced by the literal code (html blah blah blah) so apparently i did something wrong… I don’t know exactly where to put the code…

    Why can’t you upload the new header image via Appearance->Header?

    Josh Feck

    (@builtbynorthby)

    This theme does not a header replacement option.
    There are themes that have that functionality built in, but this one doesn’t have a functions.php file. That’s okay, it’s a nice looking theme, just no options to configure.

    I’m sorry my suggestion wasn’t what you we’re looking for. With the theme you’re using, the easiest way to make the customization you require is to edit a few lines of CSS and upload the image into the theme folder.

    Thread Starter davidaka

    (@davidaka)

    do you know what line i need to replace/edit?

    Josh Feck

    (@builtbynorthby)

    I usually recommend creating a child theme for something like this (protects your changes from theme upgrades.) If you’re not going to upgrade the theme then you can just hack away I suppose.

    1) you’ll need to use the cropped version of the image found here
    2) upload the image to the images folder within the theme
    3) the following changes need to be made after the “Headers” comment in style.css

    /* Headers */

    h1, h1 a{
    background: url(“images/logosmall.jpg”) no-repeat scroll 0 0 transparent;
    height: 400px;
    text-indent: -9999px;
    margin: 0;
    width: 420px;
    display: block;
    }
    /*h1 a:link,
    h1 a:visited{
    color: #000;
    }
    h1 a:hover,
    h1 a:active{
    color: #000;
    text-decoration: underline;
    }*/

    Should look like this: https://dl.dropbox.com/u/622475/Screenshots/newheader.png

    Thread Starter davidaka

    (@davidaka)

    thanks so much! I copied the code and added the link url link from photobucket… that’s what I’m used to… it cut off the name and is off to the right? can you tell what I did wrong?

    Josh Feck

    (@builtbynorthby)

    Yeah, you did’nt follow step 2. That image needed to be cropped in order to center it.
    Either crop the one you’ve got at photobucket, or use the one I cropped for you:
    https://dl.dropbox.com/u/622475/Screenshots/logosmall.jpg
    Right click download it

    Josh Feck

    (@builtbynorthby)

    Don’t link to that because I’m going to remove it. Upload that image into your theme folder. You’ll need to FTP it or use the file manager in your cpanel.

    Thread Starter davidaka

    (@davidaka)

    Josh! You are the man bro! Thanks so much… I am a photographer/graphic designer and though you probably don’t need it if you need me to design anything let me know! Cheers!

    Thread Starter davidaka

    (@davidaka)

    last question… the changes are only showing up on in Safari… is that normal?

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘How to replace header text with image’ is closed to new replies.