EndPreviousNextEnd EndPrint This TopicEnd

Using Selectors to Control Design

The Content Editor can be used as an effective design tool to ensure that the design is replicated as it is intended to be - no matter who is updating or adding content.

 

We can do this by limiting certain Selectors to the styles they are indented for. This way it would be hard for a website administrator to get the design wrong when making content changes.

 

1.Prefix any standard font Selector to the front of any custom class within content.css and FTBDesign.css. [P, Table, A, etc]
 

2.If a website administrator chooses a Class that doesn't have a matching Selector to the element they are trying to style, the style will not show and the design will not be compromised!

 

 

Example

 

For the following style example, I want to target a Paragraph, not a Span, Table or Font. My design has a background that relies on a certain width and padding around the text, so I know that if this style was applied to a Span tag, it would look wrong.

 

p.Highlight-Chat {

 font-family: Georgia, "Times New Roman", Times, serif;

 font-weight: normal;

 font-style: italic;

 font-size: 1.5em;

 text-align: center;

 margin: 10px 0px 10px 10px;

 width: 280px;

 float: right;

 clear: none;

 padding: 50px 60px 30px 60px;

 background: url(/Templates/_images/html-Highlight-Chat.gif) no-repeat top left;

}

 

Within the Content Editor, I can see that the style is specific only to Paragraphs as indicated by the Paragraph Icon.Selectors3

Style Selector

 

The result is a perfectly styled Paragraph with correct width, alignment and background image.

 

Styled Content

 

 

See also

content.css

FTBDesign.css

Topic Link