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.