Customize the ploneCustom.css

You should now be looking at the screen showing the ploneCustom.css, as is shown below (note the path underlined in red):

Select your a_new_skin from the drop-down menu and click the Customize button.

This will copy it and zap you immediately to the ploneCustom.css page in your skin:

You might as well memorize this path to your ploneCustom.css in your skin, as you will return to it over and over again.

Look at the comment that I have circled in the text of the file. This is where we will type (or cut and paste) CSS code. Do not delete the other lines in this file. You can insert as much as you want, but do it in this center area.

When you make changes in the ploneCustom.css, be sure to click the Save Changes button.

Remember that after clicking Save Changes in the ZMI, what change will you see immediately when you flip to the website itself? None. Not until you clear the cache and reload the page will you see the change.

Lets Make a Test Change

Lets just do a crazy change to the ploneCustom.css to prove that it is working. Insert the following code into the proper part of the file (the part circled above in red):

body {



background-color: red;



}

Now check the results (from now on I will say this instead of saying "Click Save Changes, look at the website, clear the Cache, reload the website..."

You should be seeing a lot of red! The body is the name of a "class" in the page templates, and you are basically telling Plone to fill in the background color with the color red all over. Notice a few places are not red, as they may have explicate CSS instructions in another CSS file telling them to be white or whatever.

Now let's flip back to the ploneCustom.css in the ZMI. Make the following change to your test code:

/* set background color of the body behind all parts of the web page */

body {

background-color: white;

}

Besides changing the color from red to white, notice that we added some text between /* and */ symbols. These are comments and are ignored by the system, but they come in real handy for you 6 months later when you need to make a change and can't remember anything. All examples that follow have extensive comments.

Now check the results. You should no longer see red all over your site!

Leave that change in the ploneCustom.css. We will need that to achieve the desired look we are shooting for. But you should start to see the idea and the power behind the CSS and skin system...

Things To Keep In Mind

I should title the following as "Goofs I have learned the HARD way in the school of hard knocks". I hope they help you avoid problems:

TIP: If you happen to make a glaring mistake on any of the files we modify in the site, always remember that there is an undo button. If you see errors appear (they might appear at the top of the screen you are in redish-colored  text or in the website itself), just undo the last change manually or by clicking the undo.

ADVICE: I always have Firefox open as my main browser, as I like tabs and other tools that I have added to it. However, I constantly check how my website changes look in Internet Explorer (both 6 and 7). You can have FireFox and IE open at the same time on the same machine. Also check your site from time to time on PCs running different screen resolutions on a variety of monitors. CSS can look different on the various browser people are using, or on the different sized monitors and resolution settings everyone has now. You can also simulate some of this on your PC by clicking the browser's restore button in the upper right corner, changing the size of your browser window. Look at how your website looks as the effective size of the screen changes. Also try changing your monitor resolution from 800X600 on up to see how this changes things. Do not do a hours or days of work on a "completed" website, only to find out that half the visitors see a scrambled up site!

LAST ADVICE: Work in small steps when making changes to the style sheets or any other changes in the skin. If you type in or cut and paste all the CSS code found in the rest this lesson at one time, then click Save Changes, what are the odds that you didn't make a typo or skip some important line of code? .01% is my guess if you are like me. Also, working in on the ploneCustom.css is really more an art than a science. Try small changes to one parameter at a time, save, clear the cache, then look at the visual impact. You can find lots of CSS help on various websites, Plone.org, these lessons, and from books.

Be sure to have fun, as we are about to do major visual changes very quickly...