| Using a car-driving metaphor, so far you have created some large signposts for style usage and blocked off a few undesirable routes to alter the page properties. Now it's time to more precisely direct Contribute's CSS capabilitiesand steer the user to a desired destination. You saw that Contribute automatically picks up all classes declared in your style sheet, even those defined implicitly. But what if you don't want all classes to be listed as style choices? Contribute offers methods to show only the CSS classes you want your content contributors to use. Moreover, through Contribute's administration interface, you can greatly affect how your content contributors format text and pages on a role-by-role basis. The intended division of abilities proves very helpful to any organization in which different skill and responsibility levels come into play. For example, while restricting administrators and staff writers to using only designated CSS styles, bolstered with a few other options such as bold and italic, another role could be created for temp workers with the ability to only add and change textnot to apply any formatting. Note The following lesson assumes that the design direction is to emphasize CSS over HTML formatting; use the following settings as a guideline for your own site.
Contribute can limit the classes displayed in the Styles list through the use of a CSS filter file. In the first part of this process, you'll create the filter file. A bit later, you'll set the appropriate options for this and other CSS-related choices in the Administer Website dialog box. 1. | In Dreamweaver's Files panel, expand the css folder in the site root and double-click bg_ct.css to check it out and open it. When the Dependent Files dialog box appears, click No.
The CSS filter file can take several forms. You can use
A fully formed CSS file, complete with attributes and values The class names and curly brace syntax by themselves A list of comma-separated class names
In this case, the easiest route to take is to adjust an existing CSS file with a little judicious cutting.
Note The other way to hide a style from Contribute is to preface the style name with mmhide. Although this mmhide method is useful on a case-by-case basis, the filter file technique described here is more generally valuable. | 2. | Choose File > Save As and store the file under a new name, bg_filter.css, in the same css folder.
You might recall seeing a class named .rightImage in the Styles list in Contribute. This class is used to float an image to the right of its containing element, typically a <div> tag. In this example, the designer has chosen not to make that style available in Contribute because it could be misapplied to text. You have to remove it and any other extraneous styles from the filter file.
| 3. | Select and delete all the style rules in the open file except those for .firstParagraph, .memberContent, .copyrightInfo, and.legalNotice strong. In this last class, remove the strong indicator to leave just .legalNotice. Select File > Save to store the file. From the Document toolbar, select Check In from the File Management menu. When the Dependent Files dialog box appears, click No.
Tip Although it's not strictly necessary to remove the strong selector, it makes for a cleaner, easier-to-read file. The CSS filter file must be available on the remote site before it can be selected in the Administer Website dialog box.
| 4. | In Contribute, choose Edit > Administer Websites > Bounty General localhost/designdeployweb. The Users and Roles category of the Administer Website dialog box is displayed. Choose your role, Administrator, and select Edit Role Settings. If prompted, enter your administrator password.
You can alter Contribute administration options from either Dreamweaver or Contribute. If both programs are running, accessing the Administer Website dialog box is more direct from Contribute.
| 5. | In the Edit Administrator Settings dialog box, click the Editing category on the left. Under the Paragraph Settings area, choose the Two Lines option to avoid inline CSS styles. In the Other Editing Options section, make sure that the "Use <strong> and <em> in place of <b> and <i>" option is checked.
Although the single-line option often feels more familiar to content contributors coming from a word processing background, it depends on inline styles placed in each paragraph tag. These styles, which look like the following, override any other CSS styles set in an external style sheet:
<p style="margin-bottom: 0">
The option to use <strong> and <em> for the bold and italic tags, respectively, although not exactly CSS-related, is in keeping with the spirit of CSS and keeps the markup logical rather than presentational.
| 6. | Select the Styles and Font category. Make sure that Style Support is set to document-level CSS and that the Allow Users to Apply Styles option is selected. Click the option "Show Only CSS Styles Included in CSS Filter File" and select Choose. In the Choose File on Website dialog box, navigate to the CSS folder in the site root and select bg_filter.css. Click OK to select that file.
If you don't want users to use your CSS formatting at all, you can deselect the Allow Users to Apply Styles checkbox. This action disables all of the other CSS style options in this category.
| 7. | Finally, uncheck the "Allow Users to Apply Fonts and Sizes" option and the "Allow Users to Apply Font Color and Background Color" option. Click OK when you're done.
|
 Disabling both these options removes their controls from the toolbar and disables the corresponding entries in the Contribute menu. The one remaining optionto allow bold, italic, underline, strikethrough, and fixed-width (using the <pre> tag) stylesis generally useful for content contributors and not intrusive on the overall design. |
