Editing website pages

From Cumulus Wiki
Revision as of 16:38, 21 March 2024 by NeilThomas (talk | contribs) (→‎Columns)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

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 explicitly order 0, they will also be displayed in the order they are coded; i.e., before the later divs.
  • The third div, has an explicit 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 of '-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.

Your Own Pages

As with previous releases, the public website template also includes a template page.

The template.html page is provided to make it easier for you to add your own pages while retaining the look and feel of the website. The template page is called template.html.

Columns

The template page shows all the different column layouts that are available. These are: 

ow-oneCol,   ow-TwoCol,   ow-ThreeCol,   ow-FourCol,  ow-FiveCol    and ow-SixCol
These will always try to display the indicated number of columns but as the screen becomes small will automatically collapse into fewer columns as appropriate.
If there are more panels than columns they will gracefully split onto additional rows while retaining their column settings.
Rows with fewer panels than columns will centre panels up to the stated number of column.

You should decide how many columns you require and delete any sections of the page not required.

It is possible to have eccentric panels, i.e., panels of different widths in a 3, 4, 5 and 6 column layout but to do this you need to investigate the template. In particular the Four Column section starts with two oversize panels making it appear as though it is a two column layout.

Panels

Unless you specify otherwise, children of the div specifying the number of columns, will be the same colour as the page background. Specify a colour using one of: 

ow-theme-add5,  ow-theme-add4,  ow-theme-add3, ow-theme-add2,  ow-theme-ad1,
ow-theme,
ow-theme-sub1,  ow-theme-sub2,  ow-theme-sub3,  ow-theme-sub4,  ow-theme-sub5
ow-Gradient1,   ow-Gradient2

These get progressively darker in light themes and progressively lighter in dark themes. These classes set both the fore- and back- ground colours. The gradients set a header bar and gradient for the rest of the panel as well as the foreground colour.

Title Bars

Title bars (ow-titleBar) are flexboxes that allow you to have multiple html elements on a single line. They do not wrap so putting too much will disappear off the right of the panel.

ButtonBars

Button Bars (ow-btnBar) are flex boxes that format buttons placed in them correctly. These do wrap so buttons will spill onto multiple lines. They align items at the top by default but this can be over-ridden using one of these classes: ow-flex-centre to vertically align items in the centre, ow-flex-bottom to align item on the bottom or ow-flex-baseline to align items along their baseline. 

To be continued
Retrieved from "https://www.cumuluswiki.org/index.php?title=Editing_website_pages&oldid=11653"