Page tree
Skip to end of metadata
Go to start of metadata

When specifying CSS for use in an instance of EditLive!, you may not necessarily want every style to appear in the styles drop-down combo box. Using specific CSS attributes, you can hide or display specified CSS elements in the styles drop-down in EditLive!.

Showing or Hiding the Style

Using the stylesVisibility attribute of the <wysiwygEditor> configuration parameter you can limit the styles that are displayed such that

  • only styles that have the CSS attribute ephox-visible set to "true" are shown.  This is known as "whitelisting", or 
  • all styles are displayed except styles with the ephox-visible set to "false".  This is known as "blacklisting"

the default behaviour of EditLive! is to use blacklisting.

Identify Specific Styles 

To show/hide a style in the styles drop-down combo box in EditLive!, developers can use the ephox-visible CSS attribute. 

If the attribute is not included, the decision on if it's is included or not is dependent on the stylesVisibility attribute of the <wysiwygEditor> configuration parameter

ephox-visible Attribute

Description
The ephox-visible attribute specifies whether the style this attribute belongs to will render in the Styles drop-down combo box in EditLive!.

Permitted Values
true
The style this attribute belongs to will appear in EditLive!'s style drop-down combo box.

false
The style this attribute belongs to will not appear in EditLive!'s style drop-down combo box.

Example

The following style sheet has three styles showing different values of the ephox-visible attribute.

.myCSSClass {
}
.navigation {
	ephox-visible: false;
}
.content {
	ephox-visible: true;
}

If the <wysiwygEditor> attribute stylesVisibility is not included, or set to "blacklist" the following styles will appear in in EditLive!'s style drop-down combo box.

  • .myCSSClass
  • .content

If the <wysiwygEditor> attribute stylesVisibility is set to "whitelist" the following styles will appear in in EditLive!'s style drop-down combo box.

  • .content

See Also

  • No labels