Changing the CSS Code

What all the elements do are also discussed; in this section, I'll quickly show you how to change the CSS code for a Plone site.
First, access the ZMI, click portal_skins, click plone_styles, and then click ploneCustom.css. This opens the page for that object. This style sheet is actually straightforward; in fact, it's empty. Plone is using the cascading property of CSS. Because the Hypertext Markup Language (HTML) for Plone first imports plone.css and then ploneCustom.css, any changes to the latter overrides the standard style sheet. Why is this a good thing? It means you can make small incremental changes to ploneCustom.css without breaking or altering the core style sheet.

So, to customize the ploneCustom.css object, click portal_skins, click plone_styles, and then click ploneCustom.css.
Next, click the Customize button. Again, this object has been customized, and instead of being at portal_skins/plone_styles/ploneCustom.css, you'll notice you're now at portal_skins/custom/ploneCustom.css. Because file objects can now be edited through the Web, you can directly edit the style sheet through the Web.

As an example, make the background have an image in the middle of it (this isn't necessarily the best user interface, but it's a clear example of how to customize the CSS code). First, you need to upload an image to Plone. To do this, click portal_skins, click custom, click the Add button, and then select Image.

For the file I chose an image I found on the Web, but you could choose any image you have. Make sure that the ID of the image is background.gif.

 Second, you need to change the CSS code to point to the new image. You've already customized the CSS code, so return to portal_skins/custom/ploneCustom.css and change the text from this: to the following: body { background-image: url(background.jpg); background-repeat: no-repeat; background-position: center; } Click Save Changes to commit changes to this file. Then return to the Plone interface. If all went well, you should see the new image. /* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */