Default Website Development: Difference between revisions

Default Website Development (view source)

Revision as of 08:35, 1 October 2021

1,169 bytes removed , 08:35, 1 October 2021

m

→‎Colour Themes

NeilThomas

313

edits

@@ Line 39: / Line 39: @@
 ===Colour Themes===
-The website and templates use colour themes to make it easier to change the colour throughout the site.  By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site.  All colour themes have now been updated to use ''css variables'' for the available theme colours.  This makes it much easier to add your theme colours to your custom pages. or style sheets.  It is also possible to apply theme colours to the gauges tooltips in this way.
+The website and templates use colour themes to make it easier to change the colour throughout the site.  By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site.  All colour themes have now been updated to use ''css variables'' for the available theme colours.  This makes it much easier to add your theme colours to your custom pages, or style sheets.  It is also possible to apply theme colours to the gauges tooltips in this way.
 For example, to add a coloured border to an element you can add the style like so:
-<nowiki><span style="border-color: var(--d2);"></span></nowiki> or <nowiki><span style="w3-theme-d2-bdr w3-border">##</span></nowiki>.
+<nowiki><span style="border-color: var(--d2);">**</span></nowiki> or <nowiki><span style="w3-theme-d2-bdr w3-border">**</span></nowiki>.
-Visit the new '''[https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer]''' to preview any of these themes on a basic template page.  You can download individual themes directly from this page.
+Visit the new '''[https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer]''' to preview any of these themes on a basic template page.  You can download individual themes directly from that page.  Alternatively you can download all themes (plus a 'readme.txt' file explaining the styles) [[File:ColourSchemes.zip||here]]
+.
-You will also find that additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables.
+Additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables.
 The current list is:
 {| class="wikitable"
 |-
-! Theme !! Description !! Theme !! Description
+! Theme !! Theme !! Theme !! Theme
 |-
-| '''AlmondBuff''' || A brownish theme. || '''AlmostMauve''' || Mauve like in colour!
+| AlmondBuff || AlmostMauve || Arcadia || BasicGrey
 |-
-| '''Arcadia''' || Almost a bottle green! || '''CherryTomato''' || A muted red based on #e94b3c.
+| CherryTomato || ChiliOil || colours || CrocusPetal
 |-
-| '''ChilliOil''' || A reddy brown based on #944743. || '''ChilliPepper''' || NEW: A Rusty red colour.
+| CylonYellow || Emporador || GreyBlue (new) || GreyGreen (new)
 |-
-| '''CoconutMilk''' || A slightly sandy milky colour! || '''CrocusPetal''' || A very purple/mauve like theme.
+| GreyRed (new) || HarbourMist || Limelight || LimePunch
 |-
-| '''CylonYellow''' || More of a light brown colour. || '''Emporador''' || A mid misty brown based colour.
+| Marsala || MartiniOlive || MeerKat || NebulasBlue
 |-
-| '''HarbourMist''' || A warm grey based on #b4b7ba. || ''Limelight''' || A very bright yellow!
+| QuietGrey || ReadPear || RussetOrange || SailorBlue
 |-
-| '''LimePunch''' || This is a greener yellow than Limelight. || '''Marsala''' || NEW: A slightly orange muted red.
+| SargassoSea || SlateGrey || SpringCrocus || Tofu
 |-
-| '''MartiniOlive''' || A very dark grey brown. || '''MeerKat''' || A turquoise blue green.
+| UltraViolet || ValiantPoppy || WarmSand || -
-|-
-| '''NebulasBlue''' || Almost a royal blue. || '''QuietGrey''' || A slightly cooler grey based on #bcbcbe.
-|-
-| '''RedPear''' || A variation between CherryTomato and ChiliOil based on #bcbcbe. || '''RussetOrange''' || A reddy orange based on #bcbcbe.
-|-
-| '''SailorBlue''' || A strong dark blue ||  ||
-|-
-| '''SargassoSea''' || An even stronger dark blue than SailorBlue || '''SlateGrey''' || NEW Darker than the other greys.
-|-
-| '''SpringCrocus''' || A muted purple theme based on #bc70a4. || '''Tofu''' || A colour often found in nappies.
-|-
-| '''UltraViolet''' || Theme based on purple / violet || '''ValiantPoppy''' || Another theme based on purple / violet
-|-
-| '''WarmSand''' || The lighter colours are sandy coloured while the darker range have a distinct orange tinge. ||  ||
 |}
-Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemes.  Please note Themes marked 'NEW' are only available on my website.  Just follow the next link.  You can view them in action at [https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer] page.  Updated: 6th Sept 2021.
+Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemes.  You can view them in action at [https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer] page.  Updated: 1st Oct 2021.