Html Style Classes

This guide documents a standard set of style classes available for use in posts, meant for both authenticated users and content editors of sig9.com. Users have a restricted set of html tags displayed below the content submission forms, and any style attributes in these tags are stripped off. This is to make sig9.com more standards compliant and to preserve the integrity of its layout. The content editors on the other hand can use all html tags and features associated with them, and are expected to use them in a standards compliant and responsible way.

Most of the style classes mentioned below are meant to be used with block elements such as the P tag, unless otherwise specified. All class names begin with the prefix "c-". They can used as shown below.

Text Properties

c-quote/c-indent, c-quote-hl/c-indent-hl - The c-quote or c-indent classes cause the text to be indented. Use their variants c-quote-hl/c-indent-hl to highlight the block of text.

Usage-example:

... text ...

renders as ..

These markets are conversations. Their members communicate in language that is natural, open, honest, direct, funny and often shocking. Whether explaining or complaining, joking or serious, the human voice is unmistakably genuine. It can't be faked.

c-left, c-center, c-right, c-justify - These classes cause the text to be aligned left, center, right, or justified, respectively.

Usage-example: Center align an indented text.

... text ...

renders as ..

Node Avatars

An image relevant to the topic can be associated with every node using the style classes. This feature is not automated because we think that only the author knows which image is best associated with the topic of the post. An avatar is placed by adding the following line -

where xxx is anyone of the many possibilities listed below.

• bsd
• hardware
• ie
• linux
• mozilla
• programming
• science
• web
• windows

The avatar is inlined and floated to the left depending on where the placement code is added. It is preferred that it be placed at the top-left corner.

You can also use a custom class called "c-topicimg" to insert your own images. For an example of usage, see the Sig9 this! post. The custom image in this case must be wrapped correctly in an <img> tag, and must be of a maximum size of 190x90.