Wherever posible, we try to utilize standard DotNetNuke classes in building out our templates so that the styling of your articles will fit in with the design of your skin without requiring customization. But we also wrap the standard classes with Article specific classes to ensure you can customize the styling of the various pieces of an article solely through CSS. This article will provide examples of custom styling the articles module through CSS.

Styling the Article Title

For the title, the templates we create use the Head class so that it will use the style of whatever is defined by the Skin for Head. If you want to use a different style, you can use:

.Article .Head { ...}

As for color, it will default to whatever is specified in the other .css files (skin.css, portal.css, default.css) for A tags and the related pseudo-classes (:link, :visited, :hover). If you want to override this, you can use something along the lines of:

.Article .Head A {color: green;} /* for articles with no details */
.Article .Head A:link, .Article .Head A:visited, .Article .Head A:active { color: pink;}
.Article .Head A:hover { color:purple;} 

More Details Coming Soon...

Where do I style the font size and color of the Title of the Article?

For the title, the templates we create use the Head class so that it will use the style of whatever is defined by the Skin for Head. If you want to use a different style, you can use:

.Article .Head { ...}

As for color, it will default to whatever is specified in the other .css files (skin.css, portal.css, default.css) for A tags and the related pseudo-classes (:link, :visited, :hover). If you want to override this, you can use something along the lines of:

.Article .Head A {color: green;} /* for articles with no details */
.Article .Head A:link, .Article .Head A:visited, .Article .Head A:active { color: pink;}
.Article .Head A:hover { color:purple;}