Ocean Mist – change header

• 

  bluehighways · Member · Sep 9, 2007 at 10:42 am

  • Copy link
  • Add topic to favorites

  Hi,
  I’ve been trying to customize the black header in Ocean Mist on my blog http://thinktankitaly.wordpress.com/. Must say that I’m hopeless tampering with CSS … ;-)

  Two questions:

  1) can I remove the black header at all

  and

  2) if 1) is not possible, can I change the text colour to the same colour of the black background so it’s not visible?

  Many thanks,
  Luca

• 

  thistimethisspace · Member · Sep 9, 2007 at 3:58 pm

  • Copy link

  If you have css editing experience and you have purchased the css customization upgrade these things are possible. In order to receive help you will have to patiently wait for one of css experts to log into the forum and help you with the specifics.

• 

  bluehighways · Member · Sep 9, 2007 at 4:04 pm

  • Copy link

  Thanks for your reply. I did purchase the css custom upgrade and I’m in no particular hurry to fix this. So, I’ll be waiting for the next 3-4 days, hoping to get good news.

  I don’t have CSS editing experience though, and I really hope the tips will be really friendly…

  L

• 

  thistimethisspace · Member · Sep 9, 2007 at 4:09 pm

  • Copy link

  Well the css upgrade is not recommended for those who do not have css editing experience. There is no staff support for learning css and they will not repair what you muck up. Those who do have experience are professionals who occasionally donate some time to lend a hand.

• 

  bluehighways · Member · Sep 9, 2007 at 7:32 pm

  • Copy link

  Understand. I have fiddled for a while (I do have HTML skills…) and have been able to restore things when I did not like the outcome.

  Just need a tiny hint on how to rework the header section…

  L

• 

  raincoaster · Member · Sep 9, 2007 at 11:46 pm

  • Copy link

  I’m afraid you’ll have to wait till one of our rare CSS gurus happens along. It is a good-looking blog, I must say, and the header looks nice to me although I’d try to edit that tagline so that it fit on one line.

• 

  bluehighways · Member · Oct 11, 2007 at 1:13 pm

  • Copy link

  hi there, CSS wizards. Any wisdom from you about the issue above?

  many thanks,
  Luca

• 

  devblog · Member · Oct 11, 2007 at 6:12 pm

  • Copy link

  bluehighways,

  Try adding this to your CSS:

  #header h1, #header .description {display: none;}

  HTH

• 

  bluehighways · Member · Oct 14, 2007 at 7:03 am

  • Copy link

  Thanks devblog, that suppressed the text from the header. Any ways to take the black area off the layout at all?

  Best,
  Luca

• 

  sillybooks · Member · Oct 14, 2007 at 7:49 am

  • Copy link

  Log into your account and go to Presentation/Custom Image Header and look about there. Options to change text and backgrounds are all available.

• 

  raincoaster · Member · Oct 14, 2007 at 8:32 am

  • Copy link

  Not if you’re using custom CSS; as I understand it, the custom CSS overrides any changes you may make using the regular header uploader, that’s why this has to be written right into the coding for that.

• 

  judyb12 · Member · Oct 14, 2007 at 9:55 am

  • Copy link

  @bluehighways:
  i found the bit of CSS that refers to the element you want to get rid of:

  #header {
  background:transparent url(images/bg_header.gif) no-repeat scroll center top;
  display:block;
  float:left;
  min-height:355px;
  padding:0pt;
  position:relative;
  width:750px;
  }

  and the header image you want to keep:

  #mainpic {
  background:transparent url(http://thinktankitaly.files.wordpress.com/2007/09/header_white1.png) no-repeat scroll 0%;
  border-bottom:3px solid #67939B;
  border-top:3px solid #67939B;
  bottom:0pt;
  display:block;
  float:left;
  height:229px;
  margin:0pt 7px;
  position:absolute;
  width:736px;
  }

  i’m not good enough with CSS to figure out how to get rid of the dark grey bar without getting rid of the whole header, but you might want to try playing with the different attributes listed. At the very least, you can replace the dark grey bar with another image:

  #header {
  background:transparent url(YOUR_DIFFERENT_IMAGE_HERE) no-repeat scroll center top;
  }

• 

  bluehighways · Member · Oct 18, 2007 at 2:52 pm

  • Copy link

  Thanks a lot judyb12. I managed to get rid of the text, but the dark grey bar is still there…

• 

  naitkat · Member · Oct 21, 2007 at 12:25 am

  • Copy link

  quick and dirty solution:

  change

  #header {min-height: 355px;}

  to

  #header {min-height: 235px;}

  The thin gray line on top you can see now is the top border of the #mainpic, I presumed you wanted to keep it.

• 

  bluehighways · Member · Oct 21, 2007 at 4:34 pm

  • Copy link

  Thanks Naitkat, that’s exactly what I wanted!

  All the best,
  Luca

• 

  judyb12 · Member · Oct 21, 2007 at 4:50 pm

  • Copy link

  Yea! I’m so glad someone found something that worked for you :-D

• 

  timethief · Member · Oct 21, 2007 at 4:59 pm

  • Copy link

  YAY! devblog, judy and naitkat