7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Need Help with Custom Wordpress Blog Header

by mlmwealthangel
5 replies
I have a custom header image that is uploaded to my wordpress blog. However, my theme requires that the header stretch across the width of the page.

Problem is that on my computer when the header looks fine, it looks distorted on other screens and vise versa. Arrghhh!

How do I adjust the code so that the header adjusts to the width of the screen no matter what the screen resolution is?

Thanks,
Tracey
#blog #custom #custom header #header #wordpress
  • Profile picture of the author Eric Lorence
    Without looking at your site, you will probably need to go into your WP theme's CSS file and find the code that looks something like this:

    #header {

    clear: both;

    padding: 10px;

    margin: 0 auto;

    background: url(http://example.com/images(or other)/header.jpg) top right no-repeat;

    height: 150px;

    }
    And make your modifications in there.

    Also check if you theme has an IE6 or Opera dedicated CSS file, you may have to change that as well.

    Good luck!
    {{ DiscussionBoard.errors[121650].message }}
    • Profile picture of the author Jill Carpenter
      Usually with something like a header if it is just a graphic, I work backwards. Find the size of the image first. Then create a new file with all the same sizing (like in photoshop) and drag the image you want to use into it. Tweek it to fill in the desired space. Rename it the same as the file you're replacing and upload it with a file manager or FTP and write over the old file.
      Signature

      "May I have ten thousand marbles, please?"

      {{ DiscussionBoard.errors[121808].message }}
      • Profile picture of the author jhongren
        Originally Posted by avenuegirl View Post

        Usually with something like a header if it is just a graphic, I work backwards. Find the size of the image first. Then create a new file with all the same sizing (like in photoshop) and drag the image you want to use into it. Tweek it to fill in the desired space. Rename it the same as the file you're replacing and upload it with a file manager or FTP and write over the old file.
        Good advice, Avenuegirl!

        With a smaller size graphic, it takes up less space and it loads faster.

        John
        Signature
        {{ DiscussionBoard.errors[121813].message }}
        • Profile picture of the author mlmwealthangel
          Thanks everyone...

          Avenuegirl...my theme didn't have a definite width, it was listed in the original theme as 100%. So in creating my header, it is designed as 980x250. But the format of the theme requires the image to stretch across the top...I have no idea what size is needed specifically because no matter what size I make it, it is distorted from one computer to the next.

          I did center it as suggested by one warrior but it looks horrible and off.

          So my main goal is to discover the code that allows the image to adjust no matter the screen resolution.

          I need a little more guidance. Oh, and I forgot to leave a link to the blog so people could see it in my original post. It is The Network Marketing Success Blog

          Thanks,
          Tracey
          {{ DiscussionBoard.errors[122977].message }}
          • Profile picture of the author ThomM
            Tracey this is the code in your css file for the header.
            #header{
            width: 100%;
            height: 120px;
            margin: 0;
            padding: 0;
            background: url(images/traceyheader980x250.jpg) center no-repeat;
            height: 250px;
            border-bottom: 6px solid #000;
            color: #fff;
            clear: both;
            }
            Add this to it and it may solve your problem.

            background-color:#580716;

            You may want to also change the height to 250 to match your header image.

            No need to worry about your IE style sheet.
            Signature

            Life: Nature's way of keeping meat fresh
            Getting old ain't for sissy's
            As you are I was, as I am you will be
            You can't fix stupid, but you can always out smart it.

            {{ DiscussionBoard.errors[123007].message }}

Trending Topics