When you add custom CSS using the dialog above, you can designate styles to appear in the “Style” drop-down of the advanced content editor. To do so, mark these styles with a comment between the selector and the opening brace:
.class-name /* editor */ {
…
}
This will appear in the editor styles list as "class-name". To assign a user-friendly name to the class, use this format:
.class-name /* editor:"Nice Name" */ {
…
}
This will appear in the editor styles list as "Nice Name". Note that the exact spacing between the data parts and the comment parts is not important. The braces and styles can be on the same line, or separate lines.
There are three kinds of styles available:
Inline Styles will attach a CSS class to the currently selected page element. If the selection is just text, the text will be wrapped in a <span> with the class assigned. These styles can be applied just about anywhere. They should be used for assigning simple things like text fonts, colors, etc. They are always available, though they may not always have an effect (for example, assigning a style with a text color to an image won't do much.) The .class-name example above is an inline style
Element Styles are similar to inline styles, except they are only available for specified page elements. To create these, use the element tag as part of the selector:
a.orange-link /* editor:"Orange Link" */ {
color:orange;
text-decoration:none;
}
In this example, "Orange Link" will only appear in the editor’s styles list if a link (<a>) tag is currently selected in the editor.
Block Styles do two different things. You can define and use them just like element styles, except they are only available for block level page elements (<p>, <div>, and <h1>, <h2>, etc. tags).
p.orange-text /* editor:"Orange Text" */ {
color:orange;
text-decoration:none;
}
This will insert <p class='orange-text'></p> into the editor. If any text is currently selected, it will be included inside the <p>. Otherwise, an empty <p> will be inserted.
You can also use block styles to insert block level elements (<p> and <h1>, <h2>, etc.; <div> is not supported) into the page. These can be inserted with or without CSS classes.
h4 /* editor:"Heading 4" */ {
}
This will insert <h4></h4> into the editor. If any text is currently selected, it will be included inside the <h4>. Otherwise, an empty <h4> will be inserted. Note that it is not necessary to include any styling.
<h1>, <h2>, <h3>, and a .ce-button (ClubExpress’s built-in button style) are automatically included in the list in all cases, even if there is no custom CSS.
Note on "selected text" - most of the tools apply to the current word or paragraph, even if nothing is "selected", or else to the selection if something is "selected".
To remove formatting, using the built-in Format Stripping tool. Note that this tool will strip formatting from the entire document unless something is selected. (If you make a mistake, use the Undo option to reverse it.)
ClubExpress cannot provide support for custom CSS. This feature is for experienced website designers only.