Custom Banner CSS

• 

  sammcnerney · Member · Oct 27, 2011 at 6:24 pm

  • Copy link
  • Add topic to favorites

  I want to replace my default banner with a custom banner. My theme didn’t allow custom banners so I bought the Custom Design package. Now I need to know how to replace the default banner with a custom banner in CSS. I have no idea how to do this, please help!!!

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

• 

  timethief · Member · Oct 27, 2011 at 6:25 pm

  • Copy link

  We cannot help you until you post an active link starting with http:// to the blog in question. Will you do that now please?

• 

  sammcnerney · Member · Oct 27, 2011 at 6:27 pm

  • Copy link

  Sorry about that. Here it is

  http://whywereason.wordpress.com/

• 

  thesacredpath · Member · Oct 27, 2011 at 6:36 pm

  • Copy link

  You have 900px width clear across the top above the navigation. Height can be set to whatever is needed.

  Make your header image 900px wide and whatever height you want and then unload it to your media library, get the URL of that image (in the grey field down toward the bottom in the upload media window) and post it here and we can help you with it.

• 

  sammcnerney · Member · Oct 27, 2011 at 6:42 pm

  • Copy link

  Ok,

  Here is the URL of the image – it is 900px width

  

• 

  thesacredpath · Member · Oct 27, 2011 at 7:09 pm

  • Copy link

  Give the following a try and see what you think.

  #header {
  background: url("http://whywereason.files.wordpress.com/2011/10/whywereasonbanner.jpg") no-repeat scroll center top transparent;
  height: 171px;
  }
  
  #title, #description {
  margin-left: -9999px;
  }
  
  #navigation {
  border-top: none;
  margin-top: 70px;
  }

• 

  sammcnerney · Member · Oct 27, 2011 at 7:21 pm

  • Copy link

  Works great thank you!

• 

  sammcnerney · Member · Oct 27, 2011 at 7:22 pm

  • Copy link

  Actually there is one problem – it no longer acts as a link back to the home page. How do I fix this?

• 

  thesacredpath · Member · Oct 27, 2011 at 7:38 pm

  • Copy link

  That is an involved thing. First you have to create a transparent (no background color) PNG image the exact size of your header image and upload it to your media library as you did with the header image. You then put that image into a text widget at the top of your sidebar and link it to your main page. Then we have to use CSS positioning to move that text widget up and over the top of your header image.

  An alternative is to put a “home” tab in your top navigation using a custom menu.

• 

  sammcnerney · Member · Oct 27, 2011 at 7:42 pm

  • Copy link

  Ha, i’ll go with the home tab.

  Thanks for your help

• 

  grcyrn · Member · Oct 30, 2011 at 11:29 am

  • Copy link

  Hello,

  sorry if my question is silly, im new to this, i want to put my own banner, where do I have to put the code?:D

  thanks

• 

  thesacredpath · Member · Oct 30, 2011 at 6:51 pm

  • Copy link

  @grcyrn, we need a link to the site you are talking about please.

• 

  thesacredpath · Member · Oct 30, 2011 at 6:52 pm

  • Copy link

  @sammcnerney, that is certainly the easiest and you are welcome.