Introduction to the ploneCustom.css

90% of the rest of this lesson is going to involve editing a single text file in your skin - the ploneCustom.css

CSS stands for Content Style Sheets, and modern websites use CSS to control the visible style or look of the pages, avoiding hardcoding in the HTML pages themselves. In Plone, most of the time you never even see of think about HTML code, as the system takes care of all of that behind the scenes. The CSS lets you change the look of your site in very creative ways. After using this for 5 years, I don't think there is a website design that cannot be achieved using Plone.

Actually, as we shall see, the ploneCustom.css file starts out with no CSS instructions. It is an override file that allows you to build on and alter any of the styles in the other style sheets used by Plone. In other words, everything has some sort of style applied to it by default, and I will teach you how to "steal" (using copy and paste) styles and modify them. This will all be second nature to after we have done a few style sheet changes.

To get started, first go back to the portal_skins folder of your website, as we are going to customize the ploneCustom.css file. The list should look like this: