Skins

Can I change the yellow header of the default skin?

Scenario:
"I want to change the header of the default skin to my own image. How can I do this?"

Original forum thread (thanks, admun & ftruscot!):
http://forum.nucleuscms.org/viewtopic.php?t=9477
http://forum.nucleuscms.org/viewtopic.php?t=15097

Solution:
You will need to replace the existing header.jpg file with your own picture and modify your default_left.css or default_right.css file.

Method:
The default skin header is a file called header.jpg, which is repeated horizontally. The dimensions of this file is 704px by 174px. There is also another file, called header_sm.jpg which is repeated horizontally, with a dimension of 15px by 162px.

To replace the default header image, create your own image and save it as header.jpg. Delete header_sm.jpg from the /skins/default/ directory and overwite the old header.jpg with your new file.

You will also need to make a modification to your .css file. If you have your sidebar on the left of the screen, open the default_left.css file. If it is on the right, open the default_right.css file.

Next, find this code:

/*-------------------------------------------------
  Header
-------------------------------------------------*/
#header
{
   position: relative;
   width: 704px;
   height: 168px;
   /* large header image is defined below */
   /*background: white url(images/header.jpg) no-repeat; */
   background: white;
   border-width: 2px 2px 0;
   border-style: solid;
   border-color: #E0E0E0;
   margin: auto;
}
#header h1
{
   /* small header image specific lines */
   height: 168px;
   width: 692px;
   background: white url(images/header_sm.jpg) repeat-x 0 6px;
   margin: 0 6px;
   /* end small header image specific lines */
   font-size: 38px;
   text-align: center;
   line-height: 160px;
}

Change it to this code instead:

/*-------------------------------------------------
  Header
-------------------------------------------------*/
#header
{
   position: relative;
   width: 704px;
   height: 168px;
   /* large header image is defined below */
   background: white url(images/header.jpg) no-repeat;
   background: white;
   border-width: 2px 2px 0;
   border-style: solid;
   border-color: #E0E0E0;
   margin: auto;
}
#header h1
{
   /* small header image specific lines */
   height: 168px;
   width: 692px;
   /*background: white url(images/header_sm.jpg) repeat-x 0 6px; */
   margin: 0 6px;
   /* end small header image specific lines */
   font-size: 38px;
   text-align: center;
   line-height: 160px;
}