In development of the WoW Guild Roster, every effort is being made to CSS-enable the presentation layer and have graphics rendered as PNG files. This allows for sites to easily customize the look and feel of the roster to flow with their website - be it light, dark, or whatever - and provide a consistent portal experience to its members. The development of the module (and the CSS-styling) was done against the out of the box DNN blue skin - which provides a good foundation, but leaves much to be desired on a tweaked style/skin.

Cascading Style Sheets (CSS) are used in this module whereever possible. To override these styles, you can either modify the module.css file that is packaged with the PA, or add an entry in your portal's CSS files, which will override the packaged CSS entries.

The intent of this section of the wiki is to help the user understand which CSS entries are used where, to help you customize the presentation of the module for your guild's website.

This wiki article is broken up into three sections (and will be completed over time):
  • Styling the character list
  • Styling the character entry page
  • Customizing the module tagline at the bottom

Styling the Character List
The module tries to use as much of the DNN standard styles as possible - to help provide 90% of the look and feel that you will need on your guild's website. This includes error text and normal text as defined your portal.css file; to not override your portal's look, much of the tables use a 'transparent' background out of the box. Also, the hover actions use a separate CSS to mimic a Wowhead look and feel, and shouldn't need to be overriden/modified. This section shows which aspects of the character list use custom styles, so that you can override them.
css-01.jpg

In the screenshot above, we see the character list in the default DNN Blue skin. The cursor is hovering over one of the character names, so we see the Wowhead-style hover-over behavior. This style looks good for the default blue background, but you could imagine the need to change it if you were using the module with a tan or beige background. Let's explore how this would be changed.

The following styles are used in the module.css file that is packaged in the Module PA file:
.wgrCharListRow TD, TR.wgrCharListRow {
    background-color: Transparent;
    line-height: 100%;
    letter-spacing: normal;
    padding-bottom: 2px;
    padding-top: 2px;
}

.wgrCharListAltRow TD, TR.wgrCharListAltRow { 
    background-color:lightgrey;
    line-height: 100%;
    letter-spacing: normal;
    padding-bottom: 2px;
    padding-top: 2px;
}

.wgrCharListMainChar {
    font-weight: bold;
}

.wgrCharListAltChar {
    font-weight: lighter;
    font-style: italic;
}


Now, returning back to the list, let's look at where these CSS styles are used. I've taken the character list (without the hover over), and marked it up to denote where the above styles are used:
css-02.jpg

Looking at the above, it seems that we would need to change or override the .wgrCharListAltRow style, changing the background-color:lightgrey; attribute to something different, perhaps using background-color:brown; or something similar. You can use any valid CSS syntax, specifying either named colors or RGB colors.

Styling the Character Entry Page
This is a stub for more information about CSS customization for the module. More information soon for this section.

Styling the WGR Guild Roster Marker at the Bottom
This is a stub for more information about CSS customization for the module. More information soon for this section.

Last edited Mar 16, 2008 at 6:13 PM by CSimpkins, version 12

Comments

No comments yet.