Default Website Development: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
Line 66: | Line 66: | ||
The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one. | The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one. | ||
== | ==Changing the Theme and Other Settings== | ||
This template comes with 33 themes to enable you to personalise the public website. Sixteen of these are light, 16 are dark and one is a high contrast theme. They are all located in the /themes folder. | |||
To change the theme you will need to edit the page-manager.js file located in the 'js folder. The pertinent section is shown below: | |||
<nowiki> | |||
let CMXConfig = { | |||
'Theme': 'Nebulas-Blue', | |||
'StaticHead': true, | |||
'StaticFoot': true, | |||
'Units': 'vh', | |||
'PaddingTop': 2, | |||
'PaddingBottom': 1, | |||
'Seagull': { | |||
'Animation': '', | |||
'Duration': 5, | |||
'OnTop': true | |||
}, | |||
'Version': 3.0 | |||
}</nowiki> | |||
This is located at the start of the file between lines 9 and 22. Do '''not''' edit anything else as you will in all likelihood break the site. | |||
===Theme=== | |||
The available themes are: | |||
<nowiki> | |||
Arcadia, Arcadia-Dark, Cherry-Tomato, Cherry-Tomato-Dark, | |||
Chili-Oil, Chili-Oil-Dark, Crocus-Petal, Crocus-Petal-Dark, | |||
Cylon-Yellow, Cylon-Yellow-Dark, Dark-Grey, Dark-Grey, | |||
Emporador, Emporador-Dark, High-Contrast, | |||
Lime-Punch, Lime-Punch-Dark, Marsala, Marsala-Dark, | |||
Martini-Olive, Martini-Olive-Dark, MeerKat, MeerKat-Dark, | |||
Nebulas-Blue, Nebulas-Blue-Dark, Red-Pear, Red-Pear-Dark, | |||
Russet-Orange, Russet-Orange-Dark, Spring-Crocus, Spring-Crocus-Dark, | |||
Valiant-Poppy, Valiant-Poppy-Dark</nowiki> | |||
Any of these can be used but be careful not to disrupt the formatting - It must be in quotation marks and the whole entry must be followed by a comma. | |||
===Other Settings=== | |||
====Layout==== | |||
The next '''FIVE''' options affect the overall layout of the pages. | |||
* Static Header | |||
*; By default the header will stay at the top of the page when long pages are scrolled. | |||
*; If you prefer to have it scroll, then set '''StaticHead''': false, | |||
* Static Footer | |||
*; By default the footer will always stay at the bottom of your screen regardless of the length of the page. | |||
*; If you want it to scroll then set '''StaticFoot''': false, | |||
* Units to use for gaps | |||
*; By default the site uses responsive units to adjust the gap between the header content and footer. | |||
** You can use '''vh''' which ties the gap units to a percentage of the screen height | |||
** You can use '''em''' which ties the gap to the height of the font (which is responsive), or | |||
** You can use '''px''' which is a fixed height based on the resolution of your browser/screen. | |||
* Gap between header and page content | |||
*; Any positive value can be used but if using pixels, it must be an integer. | |||
* Gap between page content and footer | |||
*; As for above. | |||
====The Seagull==== | |||
The seagull is a fixture on your screen. By default it fades in over two seconds. However, you can use a different animation if you prefer. The available animations are: | |||
==An Alternative Interface== | ==An Alternative Interface== |