Knowledge Base

ActivEdit and CSS

Applying stylesheets to ActivEdit

ActivEdit 3.0 and later versions have built-in support for CSS style sheets via the stylesheet attribute, quickstyles attribute, quickstylenames attribute, and the quickstyles toolbar item.

To use a style sheet specify the full url to a style sheet, eg
http://mysite.com/style.css with the stylesheet attribute/property or use a site-relative value, such as /style.css when the baseurl property is also defined.. ActivEdit will use this stylesheet when displaying HTML inside the editor.

Here's an example style.css:

.articleTitle {
   font-size: medium;
}

.quote {
   font-weight: bold;
}

To allow the ActivEdit user (the document editor) to apply styles to their content you need to add the "quickstyles" selector to the toolbar attribute, toolbar="quickstyles,bold,...".

Next you can specify which style classes the user can apply to their content. This is done with the quickstyles attribute or property. To allow the user to use the articleTitle class and quote class, simply list the classes in the quickstyles attribute/property:
quickstyles="articleTitle,quote"

Because, sometimes your style classes are not named with friendly names for your user, you can use the quickstylenames property to set friendly names for the classes: quickstylenames="Article Title,Quote" the quick style names should correspond to your quickstyles.

Here's an example using CSS in ActivEdit:

<cf_activedit stylesheet="http://mysite.com/style.css"
toolbar="quickstyles,bold" quickstyles="articleTitle,quote"
quickstylenames="Article Title,Quote" name="content" inc="/inc/">

<div class="articleTitle">This is an article</div>
<p>This is an article with a <span class="quote">Quote from
someone</span> in it.

</cf_activedit>

Note that when a stylesheet is attached to ActivEdit, rules or selectors automatically apply to elements within the document currently being edited in ActivEdit. So, if you're stylesheet defines a rule for the body or paragraph element, the font properties within the rule will be applied to all content within the editor or only content wrapped in <p></p>.

body { font-family: Arial; }

p { font-family: Arial }

This is an effective way of enforcing consistent style within an application. To override the CSS rule or selector, the user could choose to apply a different class to a paragraph or apply older formatting techniques, such as wrapping a selection with a font tag by using the font button. The font tag would take precedence over the class, selector or rule. In some functions, inline styles may alternatively be applied. Inline styles generally take precedence over CSS, but defer to older formatting tags except for the tag that contains the style.

Search Knowledge Base:

List All