Oaktree Weather Systems

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Themes ======

As with all the 'Alternative' sites produced by me, this site includes colour themes that can be swapped out at will.  All colours used on the site are held in a single cascading style sheet that is configured and loaded as the page loads.

This page explains how to use them, their structure and how to create your own.  Of course, if you are happy to use the default grey theme then you do not need to do anything.

<WRAP tabs>
  * [[#Available Themes|The Available Themes]]
  * [[#The Theme Structure]]
  * [[#Creating your own Theme]]
  * [[#Screenshots]]
  * [[:start| The start page]]
</WRAP>
===== Available Themes =====
The available themes are:

<WRAP group>
<WRAP third column>
  * <color #E99318>**Cherry Tomato**</color>
  * <color #8E6836>**Chili Oil**</color>
  * <color #AF544F>**Cranberry**</color>
  * <color #B99BC5>**Crocus Petal**</color>
  * <color #60b922>**Field Green**</color>++ Note | Added in build 003. ++
  * <color #915BA3>**Lilac**</color>
  * <color #BACD98>**Martini Olive**</color>
  * <color #3a893a>**Meadow Green**</color>++ Note | Added in build 003. ++
  * <color #2D62A3>**Nebulas Blue**</color>
  * <color #808>**Purple**</color>
  * <color #7B3539>**Red Pear**</color>
  * <color #E16F1D>**Russet Orange**</color>
  * <color #B86498>**Spring Crocus**</color>
  * <color #BC322C>**Valiant Poppy**</color>
  * <color #92896C>**Warren Tavern**</color>

++++ Note | All stylesheets use only lower case and are not capitalised as written above. ++++
</WRAP>

<WRAP twothirds column>
=== Dark Alternatives ===
These colours are also available as **dark** versions by preceding the name with //dark-// as shown below((**Note** All themes are lower case when used in the CMXConfig object.)):

dark-grey, dark-cranberry, dark-russet-orange, dark-lilac, dark-warren-tavern, dark-martini-olive, dark-charry-tomato, dark-chili-oil, dark-crocus-petal, dark-nebulas-blue, dark-red-pear, dark-spring-crocus and finally dark-valiant-poppy.

The //dark-grey// theme is also provided as an alternative to the default theme.

==== Setting a Theme ====
To set a theme for your site, simply edit the **"Theme":"",** entry in **cmxConfig** - line 15.  Carefully enter the desired theme from the coloured list in lower case. ++ Important | You should replace spaces with a hyphen and preceed it with '**dark-**' if you want to use the dark version of the theme.++\\ 
If you make a mistake, it will be ignored and the default theme will be used.

**Save the file**.

</WRAP>
</WRAP>

<wrap box alert 60% round center  centeralign>
Unlike previous versions of the APW, you do not have to close and reload the page, the change is implemented by default.
</wrap>


===== The Theme Structure =====
The themes use just nine colours using on the monochromatic colours based on the primary colour.  These are then numbered color1 to color9 - dark to light for the main theme, light to dark for the dark variations.

=== Variables ===
These colours have been obtained from [[https://icolorpalette.com]].  The first section of the default theme specifies the values for the variables used throughout the rest of the stylesheet.   These are therefore available as css variables throughout the site - **%%var(--color1)%%** to **%%var(--color9)%%**.  None of the colours necessarily match the theme colour.  A number of other variables are defined but all these use the above variables.  This means that a change to **%%--color5;%%** for example will affect multiple styles throughout the sheet.

=== Background & Foreground styles ===
This section defines the basic styles used throughout the site.
  * **.ows-theme0** - Applies the parent containers themes to foreground and background.
  * **.ows-theme1** - shows the lightest text on the darkest background
  * **.ows-theme2** - shows the lightest text on the next lightest background
  * **.ows-theme3** - shows the lightest text on the next lightest background
  * **.ows-theme4** - shows the lightest text on the next lightest background
  * **.ows-theme5** - shows the darkest text on the next lightest background((This varies with each theme - sometimes it has to be the lightest text))
  * **.ows-theme6** - shows the darkest text on the next lightest background
  * **.ows-theme7** - shows the darkest text on the next lightest background
  * **.ows-theme8** - shows the darkest text on the next lightest background
  * **.ows-theme9** - shows the darkest text on the next lightest background

=== Hover Colours ===
**.ows-theme1-hvr** to **.ows-theme9-hvr**

This uses the same colour combinations as for the above but only when the mouse is hovering over them.  No effect would be seen if an html element had the class **ows-theme5 ows-theme5-hvr**.  

=== Text only colours ===
To change just the foreground colour, nine styles are provided - **%%.ows-theme1-txt%%** to **%%.ows-theme9-txt%%**.  They should be used after setting the main colour, i.e. **%%class="ows-theme5 ows-theme3-txt"%%**.  This ensures that the text colour overrides the default text colour set with **%%.ows-theme5%%**.

=== Border Colours ===
**%%ows-theme1-bdr%%** to **%%ows-theme9-bdr%%** can be used to put borders around elements but you will also need to use **%%w3-border%%**, **%%w3-topbar%%**, **%%w3-bottombar%%**, **%%w3-leftbar%%** or **%%w3-rightbar%%** as well to actually turn on the borders.

=== Other features ===
The style sheet also includes a small number of text hover classes, border hover classes and some gradients.

<WRAP box centre round centeralign>**Not all styles are used - you should experiment to find your ideal combination**</WRAP>

Below is the default grey theme that is used if no other theme is specified.
<code css theme.css>
/*  Theme colour variables */
:root {
    --baseR: 127;
    --baseG: 127;
    --baseB: 127;

    --color1: #191919;
    --color2: #333333;
    --color3: #4c4c4c;
    --color4: #666666;
    --color5: #7f7f7f;
    --color6: #999999;
    --color7: #b2b2b2;
    --color8: #cccccc;
    --color9: #e5e5e5;
    --modal: rgba( var(--baseR), var(--baseG), var(--baseB), 0.3);
    --menu: rgba( var(--baseR), var(--baseG), var(--baseB), 0.8);
    --shadow1: 0 0.3em 0.3em -1px var(--color5);
    --shadow2: 0.2em 0.2em rgb(var(--baseR), var(--baseG), var(--baseB), 80%), 0.6em 0.6em 0.6em rgb(var(--baseR), var(--baseG), var(--baseB), 50%);

    --gradient-down: linear-gradient( 0deg, var(--color7), var(--color5));
    --gradient-up: linear-gradient( 0deg,  var(--color5), var(--color7));
    --gradient-ltr: linear-gradient( 90deg,  var(--color7), var(--color5));
    --gradient-rtl: linear-gradient( 90deg,  var(--color5), var(--color7));
    --gradient-databar: linear-gradient( var(--color5) 0%, transparent 20%, transparent 80%, var(--color5) 100%);
}

/*  Combination colours foreground/background */
.ow-theme0 { color: inherit; background-color: inherit;}
.ow-theme1, .ow-theme1-hvr:hover { color: var(--color9); background-color: var(--color1);}
.ow-theme2, .ow-theme2-hvr:hover { color: var(--color9); background-color: var(--color2);}
.ow-theme3, .ow-theme3-hvr:hover { color: var(--color9); background-color: var(--color3);}
.ow-theme4, .ow-theme4-hvr:hover { color: var(--color9); background-color: var(--color4);}
.ow-theme5, .ow-theme5-hvr:hover { color: var(--color9); background: var(--color5);}
.ow-theme6, .ow-theme6-hvr:hover { color: var(--color1); background-color: var(--color6);}
.ow-theme7, .ow-theme7-hvr:hover { color: var(--color1); background-color: var(--color7);}
.ow-theme8, .ow-theme8-hvr:hover { color: var(--color1); background-color: var(--color8);}
.ow-theme9, .ow-theme9-hvr:hover { color: var(--color1); background-color: var(--color9)}

/* Gradients ~ You may wish to adjust the foreground colours used */
.ow-theme-grad-down            { background-color: var(--gradient-down);color: var(--color1)}
.ow-theme-grad-down-hvr:hover  { background-color: var(--gradient-down);color: var(--color9)}
.ow-theme-grad-up              { background-color: var(--gradient-up);color: var(--color1)}
.ow-theme-grad-up-hvr:hover    { background-color: var(--gradient-up);color: var(--color9)}
.ow-theme-grad-ltr             { background-color: var(--gradient-ltr);color: var(--color1)}
.ow-theme-grad-ltr-hvr:hover   { background-color: var(--gradient-ltr);color: var(--color9)}
.ow-theme-grad-rtl             { background-color: var(--gradient-rtl);color: var(--color1)}
.ow-theme-grad-rtl-hvr:hover   { background-color: var(--gradient-rtl);color: var(--color9)}

/*  Gradients */
.ow-theme-grad-down, .ow-theme-grad-down-hvr:hover { background: var(--gradient-down); color: var(--color2);}
.ow-theme-grad-up, .ow-theme-grad-up-hvr:hover { background: var(--gradient-up); color: var(--color2);}
.ow-theme-grad-rtl, .ow-theme-grad-rtl-hvr:hover { background: var(--gradient-rtl); color: var(--color2);}
.ow-theme-grad-ltr, .ow-theme-grad-ltr-hvr:hover { background: var(--gradient-ltr); color: var(--color2);}

/*  Colors for text only settings */
.ow-theme0-txt, .ow-theme0-txt-hvr:hover { color: inherit};
.ow-theme1-txt, .ow-theme1-txt-hvr:hover { color: var(--color1);}
.ow-theme2-txt, .ow-theme2-txt-hvr:hover { color: var(--color2);}
.ow-theme3-txt, .ow-theme3-txt-hvr:hover { color: var(--color3);}
.ow-theme4-txt, .ow-theme4-txt-hvr:hover { color: var(--color4);}
.ow-theme5-txt, .ow-theme5-txt-hvr:hover { color: var(--color5);}
.ow-theme6-txt, .ow-theme6-txt-hvr:hover { color: var(--color6);}
.ow-theme7-txt, .ow-theme7-txt-hvr:hover { color: var(--color7);}
.ow-theme8-txt, .ow-theme8-txt-hvr:hover { color: var(--color8);}
.ow-theme9-txt, .ow-theme9-txt-hvr:hover { color: var(--color9);}

/* Border only colours */
.ow-theme1-bdr, .ow-theme1-bdr-hvr:hover { border-color: var(--color1);}
.ow-theme2-bdr, .ow-theme2-bdr-hvr:hover { border-color: var(--color2);}
.ow-theme3-bdr, .ow-theme3-bdr-hvr:hover { border-color: var(--color3);}
.ow-theme4-bdr, .ow-theme4-bdr-hvr:hover { border-color: var(--color4);}
.ow-theme5-bdr, .ow-theme5-bdr-hvr:hover { border-color: var(--color5);}
.ow-theme6-bdr, .ow-theme6-bdr-hvr:hover { border-color: var(--color6);}
.ow-theme7-bdr, .ow-theme7-bdr-hvr:hover { border-color: var(--color7);}
.ow-theme8-bdr, .ow-theme8-bdr-hvr:hover { border-color: var(--color8);}
.ow-theme9-bdr, .ow-theme9-bdr-hvr:hover { border-color: var(--color9);}

/* Background only colours */
.ow-theme1-bkg, .ow-theme1-bkg-hvr:hover { background-color: var(--color1);}
.ow-theme2-bkg, .ow-theme2-bkg-hvr:hover { background-color: var(--color2);}
.ow-theme3-bkg, .ow-theme3-bkg-hvr:hover { background-color: var(--color3);}
.ow-theme4-bkg, .ow-theme4-bkg-hvr:hover { background-color: var(--color4);}
.ow-theme5-bkg, .ow-theme5-bkg-hvr:hover { background-color: var(--color5);}
.ow-theme6-bkg, .ow-theme6-bkg-hvr:hover { background-color: var(--color6);}
.ow-theme7-bkg, .ow-theme7-bkg-hvr:hover { background-color: var(--color7);}
.ow-theme8-bkg, .ow-theme8-bkg-hvr:hover { background-color: var(--color8);}
.ow-theme9-bkg, .ow-theme9-bkg-hvr:hover { background-color: var(--color9);}


/*  Extras */
.ow-theme-modal { background-color: var(--modal);}
.ow-theme-menu { background-color: var(--menu);}
.ow-theme-shadow1, .ow-theme-shadow1-hvr:hover {box-shadow: var(--shadow1);}
.ow-theme-shadow2, .ow-theme-shadow2-hvr:hover { box-shadow: var(--shadow2);}
</code>

===== Creating your own theme =====
The site that I use to generate the colour scales is [[https://icolorpalette.com| iColourpalette]] and then use the 'Monochromatic Colours.

  * Simply copy one of the existing theme in the css/themes/ folder and rename it to you desired theme name.
  * For the three variables: <color red>**--baseR**</color>, <color green>**--baseG**</color> and <color blue>**--baseB**</color>, enter the decimal value for the red, green and blue components of your chosen theme colour.((These are used for the transparent overlay colour used with popups.))
  * For each of the variables **ows-color1** to **ows-color9**, change the hex code to the desired colour.  **You should always arrange the colours in ascending or descending order to ensure contrasts are suitable**.
  * Save and check your theme by setting it in cmxConfig.

If the **menu** colours don't have sufficient contrast, you may need to edit two of the predefined classes: **.ows-theme5** and **.ows-theme5-hvr:hover**.

Initially change the color variable used from **1** to **9** or vica-versa.  Save and recheck your theme.

All themes provide access to the two styles either side of **.ows-theme5** so that you can also adjust these if required.

If you find that other styles also need tweaking then you can copy theme from the master theme **theme.css** and adjust as required.