How to Add Styles to the Kupu Editor

Define and name the class

For this exercise we will create a class named "Alert". It will be large red letters in a black bordered box with a pale gray background.

Add the class definition to the style sheet

1. Login to the library Web site as admin
2. Click on site setup
3. Click on Zope Management Interface
4. Click on portal_skins (Controls skin behaviour (search order etc))
5. Click on Custom
6. Click on ploneCustom.css
7. Scroll about a third of the way down the template and place the cursor just above /* </dtml-with> */
8. Type, or copy and paste, your code (below is an example of creating an alert)
   

   p.alert {
       border: 2px solid #000000;
       background-color: #e0e0e0;
       font-family: Arial, sans-serif;
       font-size: large;
       color: red;
       text-align: center;
   }

9. Click on the Save Changes button

Invalidate the Cache

1. Click on the first / in the path at the top of the page
   
2. Click on CacheSetup_ResourceRegistryCache (Cache for saved ResourceRegistry files)
3. Click on the Statistics tab
4. Click on /anytown/portal_css (anytown will be your actual city name as it appears in the domain name)
   

• Note: If this is the first time you've changed this style sheet, there may not be a cached page. If this is the case, you will not see the /anytown/portal_css for your town. You may also see /portal_css for other PLOW Web sites. Skip ahead to step 6 in this section to complete this exercise

5. Click the Invalidate button
6. Click on the first / in the path at the top of the page
7. Click on the View tab

Add the Style to the Kupu Editor

1. Click on site setup
2. Click on Kupu Visual Editor
3. Verify that the Config tab is open
   
4. Scroll down to Paragraph Styles
5. Put the cursor at the end of the last item in the list (usually 'callout')
6. Press enter
7. Type:
   

   Alert|p|alert

8. Click on the Save button

Apply the Style to Text on a Page

1. Click on the Use Our Library tab
2. Click Edit
3. In the body text scroll down to the bottom of the text
4. Type this text:
   

   The library closes at 7:00 pm Mon - Thurs, May 28 - Sept 3

5. Select the text
6. Select Alert from the Styles menu in the Kupu editor toolbar
7. Click the save button
8. If the change is not immediately visible do a hard page refresh. Ctrl + Refresh button for Firefox and Shift + Refresh button for Internet Explorer.