Applying Styles to your Content Islands

 

When creating a content island, you have three main output options – styled HTML, unstyled HTML, and RSS feeds.

 

The only "human-readable" content islands are the styled and unstyled HTML islands.  Each uses a different method to determine what the final island looks like.

 

Styled HTML Content Islands

 

When creating a styled HTML content island, you are asked to select an existing style template to be used for colors and fonts.  Content islands use only a small portion of the colors available to the complete style template.  This is best explained by viewing this diagram:

 

 

1. This font is the standard board font, in the "Table Header Strip Text Color" color.
2. This background color is the "Table Header Strip Background Color" color.
3. This background color is the "First Alternating Table Column Color" color.
4. This background color is the "Second Alternating Table Column Color" color.
5. This is text is the standard text color using the standard board font.
6. This is the standard link color of the current page, using the standard board font.

 

Please note item number 6 – the link color is used from the current page, not the link color as defined by the style template.

 

If none of your existing templates result in good looking content islands, you can easily create a new style template exclusively for content island use.

 

 

Unstyled HTML Content Islands

 

If you desire an increased level of control over the styling of your content islands, you may choose to use the Unstyled HTML format.  The Unstyled HTML format uses a series of CSS rules to provide color and font information for normally unstyled <div> and <span> HTML tags.  You should only use Unstyled HTML content islands if you are comfortable with CSS.  CSS can be very complex to work with.  This guide is designed for those already familiar with CSS. 

 

Class Names

 

Each content island is surrounded in a single <div> assigned to the class ip-ci.  The first child is a <span> containing the title of the content island, assigned to the class ip-ci-title.  Each additional <span> within the content island is an individual line.  Evenly numbered <span>s are given the class ip-ci-entry-even.  Oddly numbered <span>s are given the class ip-ci-entry-odd.  This allows you to define alternating colors, like Styled HTML content islands.  Inside each ip-ci-entry line are two tags – an <a> tag to provide the link, and another <span> with the class ip-ci-byline.

 

This image demonstrates the various classes.  ip-ci has a 2 pixel red border, ip-ci-title has a 2 pixel blue border, ip-ci-entry-even has a 1 pixel green border, ip-ci-entry-odd has a 1 pixel purple border, and ip-ci-byline has a 1 pixel orange border.  Please note that all of these classes, other than ip-ci-byline, have been given a display value of block and 2 pixels of margin and padding.  Normally <span> tags are displayed inline and have no margin, nor padding.

 

 

Please note how the alternating even and odd <span>s start with the ip-ci-entry-even class rather than the ip-ci-entry-odd class.  This is done because of the way each content island identifier is created

 

Identifier Names

 

Each of the <div> and <span> tags in each content island contains an id attribute that is named after the number of the content island.  For this demonstration, our working content island is number 2.

 

The id of the outer <div> would then be ip-ci-2, and the id of the title would be ip-ci-2-title.

 

Each entry line is similarly numbered.  The first line would have an id of ip-ci-2-entry-0.  The second line would have an id of ip-ci-2-entry-1.  This is why the ip-ci-entry-odd class comes before the ip-ci-entry-even class.

 

Please note that the ip-ci-byline <span> within each entry does not have its own id.  You may access this span through the following CSS rule:

 

#ip-ci-2-entry-0 span.ip-ci-byline {

     /*

          Place your rules here.

     */

}

 

Similarly, you may access the <a> tag within an entry using either of these CSS rules:

 

#ip-ci-2-entry-0 a {

     /*

          Place your rules here.

     */

}

 

.ip-ci-entry-even a {

     /*

          Place your rules here.

     */

}

 

Other Classes

 

There are five other classes used by content islands – ip-ci-numline, ip-ci-pntf-guests, ip-ci-pntf-overflow, ip-ci-pntf-joiner, and ip-ci-pntf-userlist.

 

ip-ci-numline is used in the Recent Members content island to provide the member number and registration date of each user.  It is used in place of the ip-ci-byline class used in the Recent Posts and Recent Topics content islands.

 

The four ip-ci-pntf classes each provide a different function for the Recent Visitors content island.

 

These classes are best explained by viewing this image:

 

 

The ip-ci-pntf-userlist class is used by the sole child <span> within the Recent Visitors content island <div>.  It encapsulates the remaining three <span> classes and the links to each user's profile.  It is shown here with a 2 pixel red border.

 

Each name in the list of users is separated by a string  - either a comma alone, or a comma and the word "and."  This string is encapsulated by a <span> with the class ip-ci-pntf-joiner.  It is shown here in a 1 pixel green border.

 

A ip-ci-pntf-guests <span> is used to encapsulate the number of guests on the board, if any.  It is shown here in a 1 pixel orange border.

 

The ip-ci-pntf-overflow class is used to encapsulate any text used to indicate that there are more users online than can be linked to by the content island.  The exact point at which this would occur is controlled within the content island itself.  It is shown here in a 1 pixel blue border.

 

Unless you wish to make drastic changes to the normal layout, you may safely ignore all classes other than ip-ci-pntf-userlist and the <a> tags within it.