(TODO - UPDATE THESE DOCS; MUCH OF THIS NO LONGER APPLIES)
Before you start any theming work, it is highly recommended that you read the theme README file so you can make sense of how the theme files are organized.
Base CSS
CKEditor is configured to display the "Styles" dropdown. This lets the user apply a span with a certain class to the selected text or to apply a class to a selected block-level element. To add/remove options from the styles dropdown, take a look at /sites/all/themes/zenuchicago/js/ckeditor.styles.js.
This theme borrows a few styles from Twitter Bootstrap to make things look a little better out of the box and to provide some basic formatting options. If you are familiar with the Bootstrap, some of these will look familiar to you.
Inline Styles
The user can apply inline styles by selecting text in the editor and then choosing the appropriate style from the Styles dropdown. Styles include:
- Label classes for inline labels
- Badge classes for indicators and counts
- And, of course,
code tags, for inline monospace text
Image Styles
When an image is selected, the user can select an alignment option from the Styles dropdown. Either a left or right float will be applied, along with a sensible margin so that it is not directly adjacent to the surrounding text.
Tables
Tables can be either condensed, striped, bordered, or a combination of the three, again using the Styles dropdown. This table is striped, bordered, and condensed:
| Lorem Ipsum | Dolor Sit Amet | Consectetur Adipisicing Elit |
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
| Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Reprehenderit in voluptate velit esse cillum dolore. | Ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. | Dolore eu fugiat nulla pariatur. | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui. |
Navigation
Any menu blocks placed in the navigation region will inherit styling similar to the Bootstrap nav bar. If you prefer to disable those styles entirely, simply remove the "bar" class from the navigation div in page.tpl.php.
Similarly, any menu blocks placed in the left or right sidebar region will inherit styles similar to the Bootstrap nav list.
Forms
Form component styles have been borrowed from Bootstrap as well, providing a much more sane starting point than the blank slate you would have otherwise. Since most form markup generated by Drupal can be difficult to alter, only the basic form styles have been ported over to style input boxes, textareas, selects, buttons, etc. Most of the form layout options have not been included.