320
edits
Editing website pages: Difference between revisions
m
→Editing the Themes
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
| Line 58: | Line 58: | ||
===Editing the Themes=== | ===Editing the Themes=== | ||
The themes make extensive use of css variables. This enables a colour to be defined once only making it considerably easier to make global changes. | |||
The relevant section of the default ' ''Nebulas-Blue'' ' theme is shown below but this is the same in all themes. | |||
<nowiki> | |||
:root { | |||
--add5: #f3f6fb; | |||
--add4: #d7e1f0; | |||
--add3: #afc3e1; | |||
--add2: #86a5d2; | |||
--add1: #5e87c4; | |||
--theme: #3f69aa; | |||
--sub1: #39609a; | |||
--sub2: #335589; | |||
--sub3: #2c4b78; | |||
--sub4: #264067; | |||
--sub5: #203556; | |||
--modal: rgba(63, 102, 170, 0.3); | |||
--LRgradient: linear-gradient( 90deg, var(--theme), var(--add3) 50%); | |||
--RLgradient: linear-gradient( 270deg, var(--theme), var(--add3) 50%); | |||
--Gradient1: linear-gradient( 180deg, var(--add2) 2.6em, var(--add3) 2.7em, var(--add4) 100%); | |||
--Gradient2: linear-gradient( 180deg, var(--add3) 2.6em, var(--add4) 2.7em, var(--add5) 100%); | |||
--Grad1Text: var(--sub5); | |||
--Grad2Text: var(--sub5); | |||
--BtnGradient: linear-gradient( 0deg, var(--add2) 5%, var(--add4) 95%); | |||
--BtnGradientHvr: linear-gradient( 180deg, var(--theme) 5%, var(--add3) 95%); | |||
}</nowiki> | |||
Above you can see the main theme colours defined as variables ''--add5'' - ''theme'' - ''--sub5''. In this theme the colours get progressively darker as you go down the list. | |||
Although there is nothing to stop you editing the hex values for the colours, remember that they will have global consequences. | |||
====Gradients==== | |||
This section I would recommend editing to suit your taste. | |||
* The first two are not used in the public website but may be used in the AI - the themes are common. | |||
* '''Gradient1''' and '''Gradient2''' form the basis of the gradient panels. | |||
** With the initial angle set to 180deg, the first variable controls the top colour which is constant until 2.6em down the panel. | |||
** The second variable, starting at 2.7em down the panel is the slightly lighter colour. | |||
*** If you change the 2.7em to 2.6em you get a sharp line, change it upwards and you will get a blurred line. | |||
** The third variable is the ending colour at the bottom of the panel. | |||
* '''Grad1Text''' and '''Grad2Text''' control the text colour used on the respective gradients. | |||
** It is not possible to select a single colour that works for all themes so you may also end up having to change the colour used on a panel by editing a page. | |||
There is nothing stopping you adding more steps to any of the gradients. | |||
====Constructing your own Theme==== | |||
Firstly it takes time and effort so think carefully before doing this. | |||
I constructed the themes by using an on-line tool to generate 10 variations on a base colour of my choice. I then copied the hex values generated into the variables ''--add5'' down to ''--sub5''. It is possible, with care, to use the same colour for multiple variables. | |||
You will then need to tweak '''all''' the combined colour classes to ensure sufficient contrast. | |||