338
edits
Editing website pages: Difference between revisions
m
→Editing the Themes
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
|
===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.
| |||