Drop shadow CSS on header

[Glen Lipka]

I'd like to add a drop shadow on the header (and maybe make it a little taller than it currently is. What CSS do I need on the style sheet?

Latest confluence server edition. 

Thank you

[David at David Simpson Apps · Accepted solution]

Hello, if you mean the page title for a particular page, I would add the following to the Global Stylesheet:

html #title-text a {
  text-shadow: 2px 2px 5px rgba(128,128,128, .6);
}

Giving something like this (text shadow on the page title):

If you mean making the actual header, then something like this will help:

body.theme-default #header {
  position: fixed;  /* needed because otherwise, 
                       the header is behind the left menu bar, 
                       and the box-shadow won't be seen*/
  top: 0;           /* place at the top of the page */
  width: 100%;     
  z-index: 101;     /* put the header in fronnt of the left menu bar */

  box-shadow: 0 0 10px rgba(128,128,128,.8); /** the shadow */
}

body.theme-default .ia-splitter {
  margin-top: 41px; /* push the main content below the header */
}

If you need the header to be larger, add some height to body.theme-default #header and increase the margin-top on body.theme-default .ia-splitter.

Aside: Here's another trick you can do to add header photos on pages :)

[Glen Lipka]

it was the latter, but thank you :)