WP SITES

Log in

Add New Header Background Image To The Amped Child Theme By StudioPress

—

by

Brad Dalton

I just received this comment from Roy on my post about Genesis Header Images:

Do you know if this works for the Amped Child Theme?

I am trying to get a background image the length of the Nav Bar menu

Fair question because not all child themes include the same coding.

Amped is not mobile responsive at this stage and to be honest, i’ve never been asked a question before about this theme so it was time to activate it locally and take a look inside the files.

amped theme

The easiest solution to solve Roy’s problem is this:

Add this code to the end of your child themes style.css file:

#header {
background: url(images/logo.png) left top no-repeat;
width: 960px;
height: 100px;
}

Then replace the default logo.png file in your child themes images folder with the new one which matches the same dimensions as the values in the code above. 960 x 100.

You’ll also need to make sure your Genesis > Theme Settings > Header settings are set to image logo.

header

If this isn’t exactly what you had in mind, ask me a question in the comments and i will be glad to help you.

Comments

10 responses to “Add New Header Background Image To The Amped Child Theme By StudioPress”

  1. Summer Avatar
    Summer

    Thanks for reminding me about Amped! I had a really cool scifi tv show commentary podcast whose site I’d done in Amped, customized a full width rotating header for it and everything, but had neglected to include it in my projects portfolio 🙂

    1. Brad Dalton Avatar
      Brad Dalton

      Be interesting to see if they update it.

    2. Summer Avatar
      Summer

      So, I went to check that old website, get the details for it to add to my portfolio, and I realized I’d remembered things wrong!

      I had done the original version of that site using SP’s Tubular, because I’d loved the industrial look, and the TV show had a very industrial feel to it, even across the parallel worlds the story took place in.

      I remember now that I WANTED to update it to Amped, but never got back to it. So that site is still running Tubular, not even running Genesis. But it does still have the rotating header, where a new header image loads with each new page visited.

      Wow, talk about misremembering things 🙂

      But yes, I’m also curious if there’ll be a new version of Amped any time soon.

      1. Brad Dalton Avatar
        Brad Dalton

        hahahaha.

        Me too Summer.

        Hope they update all of them but i’m not sure they will.

  2. Roy Avatar
    Roy

    Thanks Brad, that worked great for the header.

    However, the right widget gets pushed down into the main area. You can see the words on the right peaking out, and the search bar now down below.

    How can I get the right widget back up where it belongs.

    Thank you so much.

    Roy

    1. Brad Dalton Avatar
      Brad Dalton

      What happens if you use this instead:
      [code]
      #header {
      background: url(images/logo.png) left top no-repeat;
      width: 960px;
      height: 100px;
      }
      [/code]

      1. Roy Avatar
        Roy

        Sort of fixes it.

        The right widget is closer to where it belongs.

        However, another image from nowhere appears on the left.

        Should I revert back to original fix ?

      2. Roy Avatar
        Roy

        Hi Brad,

        I got rid of the “extra” logo on the left.

        One more minor fix then. How can I get the right widget stuff up a bit more on the header so it aligns correctly ?

        Thank you

        1. Brad Dalton Avatar
          Brad Dalton

          Add a value to the margin-top:
          [code]
          #header .widget-area {
          width: 510px;
          float: right;
          color: #FFFFFF;
          margin-top: 30px;
          padding: 10px 0 0 0;
          }
          [/code]

          1. Roy Avatar
            Roy

            That works great. Thank you !

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.