Changing Colors Of Major Areas On The Website

To get the desired effect of having a dark blue bar across the top, down the left side, and across the bottom of the site, we need to add some CSS code to the ploneCustom.css .

In the previous step we added the code about the body, setting it to white. We will proceed piece by piece so you can see the results as we go.

Left Slots

Cut and paste the following into the ploneCustom.css , after the part about the body (not shown below):

/********************************************************************/

/* left slots, the left column with portlets is */

/* called portal-column-one */



#portal-column-one {

width: 20em; /* set a fixed width , similar to the logo width */

background-color: #00578A; /* fills whole column dark blue  */

}



#portal-column-one .visualPadding {

padding: 1.5em 1.5em 1.5em 1.5em; /* sides of portlets */

}



/* end of left slots */

Now check the results

Note that I have added a line /***********/ just to start separating the parts of the CSS from each other. My preference.

You should see following changes:

• We set the left column width to 20em, a bit wider than the default, to give the left side more strength. It also gives a bit more room for our portlet contents, like the menu.
• The color of the left colum should be a dark blue color, specifically color hex code #00578A.
• There is a bit more padding or space around all the sides of the portlets in the left column, 1.5em.

Right Slots

Cut and paste the following into the ploneCustom.css , after the part about the left slots (not shown below):

/*************************************************************/

/* right slots, the right column with portlets is called */

/* portal-column-two */



/* remove right slots */

#portal-column-two {

display: none;  /* turns it off */

}



/* end of right slots */

Now check the results

There is but one command issued above, the all powerful display: none; With this you can erase anything fromyour page - the search box, the logo, the content area, anything. You should see following changes:

• The whole right column is gone - it was there with the calendar portlet before. We don't want it in our design.
  
• Don't worry, all of it is really still there, or can be moved around later. Remember, the skin changes only the way something looks and does not alter the actual content!

Personal Tools

Cut and paste the following into the ploneCustom.css , after the part about the right slots (not shown below):

/*****************************************************************/

/* personaltools are the "login" button hyperlinks and their bar */

/* note that if you diasable the login and join from the ZMI  */

/* this bar goes away except when logged in */



#portal-personaltools {

background-color: #00578A; /* dark blue to match parts of the site */

border-top: 1px solid #00578A; /* gets rid of line under selected tab */

border-bottom:0px solid #8CACBB; /* zero out border between */

                                 /* personaltools and breadcrumbs */

margin: 0px 0em 0em;

padding-left: 1em; /* bring it under the tabs */

padding-right: 1em; /* same on right side */

color: white; /* text , so it shows through the dark color */

}



#portal-personaltools li a {

color: white; /* text , so it shows through the dark color */

}

Now check the results

There is a bit more to this section than just changing the color, but we will go over it all at one time. You might get more out of this by doing each line one-by-one, or by commenting out lines and seeing the affect. You can comment any line by adding a /* at the start of the line and making sure there is a */ at the end. Your lines can have the arrangement below, if you already have comments:

/* some css code /* this is a comment */

Note: It is easy to accidently open a comment with a /* and not close it properly with a */, which can cause other parts of the ploneCustom.css to be commented out accidenty. Work in small steps to catch yourself on these mistakes.

You should see following changes:

• Background color is dark blue color to match
• Some border lines either set to teh same color or made to go away by setting line width to 0px.
• margins and padding adjusted for design purposes
• text is white to show up on dark blue color, including any hyper-links ( that is why there is a separate entry with #portal-personaltools li a { )
  

Breadcrumbs

Cut and paste the following into the ploneCustom.css , after the part about the personaltools (not shown below):

/*****************************************************************/

/* the breadcrumb trail of where you are */



#portal-breadcrumbs {

background-color: #00578A; /* dark blue */

border-bottom: 0px solid #CAE4F1; /* zero out so no border between */

                                  /* breadcrumbs and left column */

margin: 0px 0em 0em;

padding-left: 1em; /* bring it under the tabs */

padding-right: 1em; /* same on right side */

color: white; /* non hyperlink words */

}



#portal-breadcrumbs a {

color: lightblue; /* hyperlink words */

}

Now check the results

Breadcrumbs are on a bar below the personaltools bar, and it shows you a trail of where you are when clicking around the site. Some people really like this (I do), but if you hate it, you can always add a display: none; to erase it. We are formatting it in much the same way as we did the personaltools, so I will note below only the new concept.

You should see following changes:

• The breadcrumbs trail consists of regular text, hyperlinks, with a special arrow symbol in between. We are altering the text color and the hyperlink color, and not changing the arrow symbol.

Footer

Cut and paste the following into the ploneCustom.css , after the part about the breadcrumbs (not shown below):

/***********************************************************/

/* footer */





#portal-footer {

background-color: #00578A; /* dark blue to match site colors */

                           /* and give site a solid "base" */

margin: 0em 0em 0em;

}



/* note leaving colophon as is */

Now check the results

Note that we will be changing the footer text in a later step in this lesson, but this CSS code changes the colors. I also note in a comment line above that the colophon is not being changed. I didn't have to put that in, but it may be useful days or months later...

• You should see the footer changing colors.

Now on to more advanced design changes...