320
edits
Editing website pages: Difference between revisions
→Constructing your own Theme
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
| Line 108: | Line 108: | ||
You will then need to tweak '''all''' the combined colour classes to ensure sufficient contrast. | 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. | |||
===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''' | |||