CSS style list better business throught innovative telecoms dmClub logo

Dealer stylesheet styles

This page demonstrates all the dealer styles defined in the dealer override stylesheet (over.css), showing your browser's rendering of them on the left, and a screenshot from our reference browser (Firefox) on the right. If everything's working well the two should look very similar.

These styles are active within any HTML division of class 'dmb0':

<div class="dmb0"> ... </div>

Side by side style comparison

Styles appear below in the same order as they do in the dealer stylesheet.


BORDER STYLE
.border
showing the standard border style (applied to bordered XComponents, etc)

          

GENERAL TEXT STYLES
p, th, td, .key b
showing the font, size and colour of standard body text
b, th b, td b
showing bold body text
.voice_A
showing the voice_A class on body text
.voice_B
showing the voice_B class on body text
.voice_C
showing the voice_C class on body text
.voice_D
showing the voice_D class on body text
.key b
showing the keypad action class on body text
#25
ul li
  • The unordered list class
  • 2nd list item

HEADLINE AND SUBHEAD STYLES
h1, h2

A headline

h3

A sub-head


TABLE CELLS / GENERIC BACKGROUND AND BORDER COLOURS
.col1i, td.cell1i, td.cell1i_thin, td.cell1i_thin_pale
Text and background colour
td.cell1i_thin_pale
...thin_pale modification of text colour
.col1f, td.cell1f, td.cell1f_thin, td.cell1f_thin_pale
Text and background colour
td.cell1f_thin_pale
...thin_pale modification of text colour
.col2i, td.cell2i, td.cell2i_thin, td.cell2i_thin_pale
Text and background colour
td.cell2i_thin_pale
...thin_pale modification of text colour
.col2f, td.cell2f, td.cell2f_thin, td.cell2f_thin_pale
Text and background colour
td.cell2f_thin_pale
...thin_pale modification of text colour
.divider, .padded_table td.divider, .padded_table_thin td.divider
 
  Table cell divider background colour
.icon_blocks span.fullnum
Used to display 'service graphic' numbers, with a full number inside

+44-020-
7060-2000
.icon_blocks span.range
Used to display 'service graphic' numbers, with the number range inside

0800

FORM ELEMENTS
.form_text_field, .form_select, .form_submit
NOTE: The appearance of these elements varies between browsers and platforms






OLD
.form_text_field_error, .form_select_error, .form_checkbox_error
NOTE: The appearance of these elements varies between browsers and platforms





A checkbox

LINKS
a
A link looks like this
a.popup
A popup link looks like this
OLD
a.forward
A forward link looks like this
a.options
An options opener looks like this
.grabut_left, .grabut_right
Links styles as buttons.

OLD
.grabut_left_forward, .grabut_right_forward
Buttons that move to another page

.grabut_left_reload, .grabut_right_reload
Buttons that reload current page.

.tabs
Sets the footer line colour of a set of tabbled links.

.tabs li a
Sets the background and border colours of unselected tabbled links.
.tabs li a.current
Sets the background and border colours of the selected tab (the 2nd in this example).
OLD
.tab_body
Sets the background and border colours of the tab body (the part containing the content)

        

RIGHT ALIGNED FEATURE PANELS
.floatbox_narrow h1, .floatbox_medium h1
Sets the text and background colours of the heading block the top of a feature panel.

Box heading

.floatbox_brief
Sets the text, background and border colours of each story block in a feature panel.

Feature panel text looks like this, on this colour background, with these colour borders.
OLD

INFOTEXT INDICATORS, INFOTEXT BUBBLES AND INFOTEXT COPY
.infotext
Sets the style of text to which infotext is attached (the infotext indicator style).

Infotext indicator
.infotext_bubble
Sets the infotext copy colour, and background and border colours of the infotext bubble.

A useful message in a bubble

XComponent specific styles

These styles are active within any HTML division of class 'dmx' nested within a 'dmb0' division:

<div class="dmb0"><div class="dmx"> ... </div></div>

XCOMPONENT SPECIFIC STYLES
p, td
Applies to body text in XCpmponents.
Inherits from general .dmb0 text style.
h1, h2

A headline

h1.bordered

XComponent name

h3

A sub-head

a.nu
Number links in number choosers
020-7060-2000
.price
The price in a shopping trolley
£29.95

dmClub Specific styles

The following styles are used on dmClub pages only and are defined in over_dmclub.css, and not in the dealer override stylesheet (over.css). They mainly define the common structural elements of dmClub pages (eg Headers, NavBars, Help Areas), and are not relevant for use on dealer sites.

HEADER / NAV / ERROR MESSAGE / FOOTER BARS
#header_bar
Sets the colour (or background tile) of the header bar.






#header_bar title
Sets the colour of the page title that appears in the header bar.

 Page Title Colour
#nav_bar
Sets the colour of the nav bar.

#nav_bar a
Sets the colour of the text and dotted horizontal borders of nav bar links.

#err_msg_bar
Sets the text and background colours of the error message bar.

 Error messages look like this
#footer_bar
Sets the text and background colours of the footer bar.
#footer_bar a
Sets the colour of the text and dotted horizontal borders of footer bar links.

HELP AREA
#help_header_bar
Sets the background colour of the help area header bar.

 
#help_header_bar .title
Sets the text colour and font size of the title in the help area header bar

Help header bar title text
#help_header_bar a
Sets the text colour and left dotted border colour for the links that appear in the help area header bar

#help Sets the text, background and left, right and bottom border colours of the help area.
Help text ...
#help .emphasis, #help b
Sets the colour of emphasised or bolded text in the help area.
We want this to stand out
#help h1, #help h2
Sets the style of headlines that appear in the help area.

Help area headline