• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

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.

Reader Interactions

Comments

  1. Summer says

    October 13, 2013 at 11:07 pm

    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 🙂

    Log in to Reply
    • Brad Dalton says

      October 14, 2013 at 3:28 am

      Be interesting to see if they update it.

      Log in to Reply
    • Summer says

      October 18, 2013 at 6:42 pm

      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.

      Log in to Reply
      • Brad Dalton says

        October 18, 2013 at 6:45 pm

        hahahaha.

        Me too Summer.

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

        Log in to Reply
  2. Roy says

    October 11, 2013 at 4:45 pm

    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

    Log in to Reply
    • Brad Dalton says

      October 11, 2013 at 4:54 pm

      What happens if you use this instead:

      #header  {
      	background: url(images/logo.png) left top no-repeat;
      	width: 960px;
      	height: 100px;
      	}
      Log in to Reply
      • Roy says

        October 11, 2013 at 5:05 pm

        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 ?

        Log in to Reply
      • Roy says

        October 11, 2013 at 5:15 pm

        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

        Log in to Reply
        • Brad Dalton says

          October 11, 2013 at 5:40 pm

          Add a value to the margin-top:

          #header .widget-area {
          	width: 510px;
          	float: right;
          	color: #FFFFFF;
          	margin-top: 30px; 
          	padding: 10px 0 0 0;
          	}
          Log in to Reply
          • Roy says

            October 11, 2013 at 6:06 pm

            That works great. Thank you !

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.