Add CSS for Header in On Demand Theme

• 

  baoch · Member · Feb 3, 2014 at 2:08 am

  • Copy link
  • Add topic to favorites

  Does anybody know whether it’s possible to insert a header via CSS for the On Demand theme?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 6, 2014 at 5:23 am

  • Copy link

  Hi there, yes, you can add a header image to On Demand with CSS. The existing header area had a width of 980px and a height of about 125px, but the height can be changed reasonably easily.

  You need to create your header image, upload it to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks in the background declaration below.

  #header-inside {
  background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 150px;
  }

  The above is the basic code. I included a height, which you can adjust to match the height of the image you are going to use. You will have to let us know if you wish to keep or remove the existing site title and tagline. That can be removed if you are going to incorporate it into the header image.

• 

  baoch · Member · Feb 6, 2014 at 6:26 pm

  • Copy link

  Thank you so much! I love WP forums. I am learning as I go from you experts. Many, many thanks!

• 

  thesacredpath · Member · Feb 7, 2014 at 6:16 am

  • Copy link

  You are welcome.

• 

  baoch · Member · Feb 13, 2014 at 9:54 pm

  • Copy link

  Hi, so I followed your instructions, but the image needs to be moved over to the left…any ideas how I should do that or do I need to upload different dimensions for the header?

  Baochi

• 

  baoch · Member · Feb 14, 2014 at 2:05 am

  • Copy link

  Ok, I got the right dimension now for the banner. Do you know the code to insert a url so that when people click on the header, it goes to the blog home?

  Thanks!

• 

  thesacredpath · Member · Feb 25, 2014 at 6:37 pm

  • Copy link

  Hi, add the following CSS to make the entire header clickable as a home link. The first rule (.site-title) you have now in your CSS, but get rid of the display: none; declaration in that and replace with what I have below.

  .site-title {
      width: 960px;
      height: 156px;
  }
  #header-left {
      height: 156px;
      max-width: 960px;
      padding-bottom: 0;
      padding-top: 0;
      width: 100%;
  }
  .site-title a {
      color: rgba(0, 0, 0, 0);
      display: block;
      width: 960px;
      margin-top: 0;
      margin-bottom: 0;
      height: 156px;
  }

• 

  baoch · Member · Feb 27, 2014 at 12:47 am

  • Copy link

  That worked. You are a genius.

  Regarding this thread (https://en.forums.wordpress.com/topic/space-out-header-topics-text-1?replies=5#post-1643637) about spacing out the words on the blog navigation, is it possible to even out the left and right margin, i.e., the first category, Home, and the last category, Music, should have equal spacing from the edges?

  Baochi

• 

  thesacredpath · Member · Feb 27, 2014 at 6:43 pm

  • Copy link

  Add padding-left: 0; to #navigation .menu in your custom CSS so that it looks like this:

  #navigation .menu {
      padding-left: 0;
      text-align: center;
  }

• 

  baoch · Member · Feb 27, 2014 at 7:19 pm

  • Copy link

  That worked, thanks so much! May the force continue to be with you ;)

• 

  thesacredpath · Member · Feb 27, 2014 at 9:19 pm

  • Copy link

  Many thanks, and you are welcome.