CSS style list | ![]() |
![]() |
![]() |
CSS style list | ![]() |
![]() |
![]() |
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>
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
|
![]() |
HEADLINE AND SUBHEAD STYLES | |
h1, h2A headline |
![]() |
h3A sub-head |
![]() |
TABLE CELLS / GENERIC BACKGROUND AND BORDER COLOURS | |||
.col1i, td.cell1i, td.cell1i_thin, td.cell1i_thin_pale
|
![]() |
||
td.cell1i_thin_pale
|
![]() |
||
.col1f, td.cell1f, td.cell1f_thin, td.cell1f_thin_pale
|
![]() |
||
td.cell1f_thin_pale
|
![]() |
||
.col2i, td.cell2i, td.cell2i_thin, td.cell2i_thin_pale
|
![]() |
||
td.cell2i_thin_pale
|
![]() |
||
.col2f, td.cell2f, td.cell2f_thin, td.cell2f_thin_pale
|
![]() |
||
td.cell2f_thin_pale
|
![]() |
||
.divider, .padded_table td.divider, .padded_table_thin td.divider
|
![]() |
||
.icon_blocks span.fullnum Used to display 'service graphic' numbers, with a full number inside ![]() 7060-2000 ![]() |
![]() |
||
.icon_blocks span.range Used to display 'service graphic' numbers, with the number range inside ![]() ![]() |
![]() |
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 |
![]() |
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
|
![]() |
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, h2A headline |
![]() |
h1.borderedXComponent name |
![]() |
h3A sub-head |
![]() |
a.nu Number links in number choosers 020-7060-2000 |
![]() |
.price The price in a shopping trolley £29.95 |
![]() |
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 |
![]() |