Theme Selector

Current theme:
w3-theme-l5 or
w3-theme-light
w3-theme-l4
w3-theme-l3
w3-theme-l2
w3-theme-l1
w3-theme
w3-theme-d1
w3-theme-d2
w3-theme-d3
w3-theme-d4
w3-theme-d5 or
w3-theme-dark
w3-theme-l5-bdr
w3-theme-l4-bdr
w3-theme-l3-bdr
w3-theme-l2-bdr
w3-theme-l1-bdr
w3-theme-bdr
w3-bottombar + w3-theme-l3-bdr

Available themes

Use the selector to choose a theme for this session: 

Use as default
Restore original

All thems have eleven (11) shade variations shown on the left.  You can hover over the first 11 blocks shown to see their hover combinations.

The lower 7 panels opposite show some of the 11 borders that are included.  There are light, theme and dark hover variations for individual borders and text elements.

Not all theme variations are used in the supplied Interface or default website; they are provided so that you can edit pages to suite your own taste.

Editing colours on pages

The blocks on the left show the css style format used on both the Interface and Default website.  To use just text or borders the style formats are:

  • w3-theme-l5-txt:  for text colours
  • w3-theme-l3-bdr:  for border colours, and/or
  • w3-theme-dark-txt-hvr or w3-theme-d5-bdr-hvr:  for hover over elements.

The 'l5', 'l3' and 'dark' above can be replaced with any of the theme shade codes except for border hover as only 'light (l5))', 'theme' and dark (d5)' are valid.

The last example in the panel opposite shows the use of the style w3-bottombar. There is also w3-topbar, w3-leftbar & w3-rightbar. To use any borders, you also need to apply the style 'w3-border'.