Editing website pages

Editing Website Pages

Page under Development

Re-arranging Panels

Both the public and AI sites use a feature called flexboxes which, among other features allow for child elements to be given a style 'order' . This dynamically changes the order in which they are displayed on screen regardless of where they were coded in the document. To explain this please view the code snippet below:

<div class="ow-sixCol">	<!-- This is a flexbox-->
	<div class="ow-theme-add5 ow-card" style="order:0;"> <!-- This is a child of a flexbox -->
		<p>Card One</p>
	</div>
	<div class="ow-theme-add4 ow-card" style="order:0;">	<!--This is also a child of a flexbox	-->
		<p>This is card two</p>
		<div class="ow-btnBar">	<!--	This is NOT a child of a flexbox - its a grandchild	-->
			<button>Button</button>
		</div>
	</div>
	<div class="ow-theme-add3 ow-card ow-animate-drop" style="order:0;">
		<p>This is card three.</p>
	</div>
	<div class="ow-theme-add1 ow-card w3-animate-opacity" style="order:1;">
		<p>ow-theme-add1</p>
	</div>
	<div class="ow-theme ow-card" style="order:-1;">
		<p>ow-theme</p>
	</div>
	<div class="ow-theme-sub1 ow-card ow-animate-drop">ow-theme-sub1</div>
	<div class="ow-theme-sub1 ow-card ow-animate-drop">ow-theme-sub1</div>
</div>

In the above code snippet, the div with the class ow-sixCol is defined as a flex box in the main stylesheet.

• The divs that are indented 1 level are all children of it and can be given an order style.
  • If no order style is used then they are all assumed to be order 0 and will be displayed in the order they are written in the code.
• As the first two child divs are also order 0, they will also be displayed in the order they are coded; i.e., before them.
• The third div, has an order style of 1 placing it after everything else - it will be drawn last even though it was coded third.
• The forth div has an order value or '-1'.

  This comes before the value zero so will be displayed first before any other div.

Changing Panel (and other elements) Colours

In the above snippet you will also see that each child div has been given a class ow-theme-xxxY or ow-theme. This assigns a foreground and background colour to the panel. There are a number of classes that control the colours used:

Foreground & Background Classes

The classes available are:

ow-theme-add5,	ow-theme-add4,	ow-theme-add3,	ow-theme-add2,	ow-theme-add1,
ow-theme
ow-theme-sub1,	ow-theme-sub2,	ow-theme-sub3,	ow-theme-sub4,	ow-theme-sub5

On light themes these get progressively darker while on dark themes they get progressively lighter. Remember that these change both the fore- and back-ground colours.

If you only want to change the text colour, then you have access to the following classes:

ow-theme-txt-add5,	ow-theme-txt-add4,	ow-theme-txt-add3,	ow-theme-txt-add2,	ow-theme-txt-add1,
ow-theme
ow-theme-txt-sub1,	ow-theme-txt-sub2,	ow-theme-txt-sub3,	ow-theme-txt-sub4,	ow-theme-txt-sub5

There are many other classes available. To see them look at any of the theme cascading style sheets in the '/themes' folder.

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.

: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%);
}

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.