338
edits
Default Website Development: Difference between revisions
→Changing the Theme and other settings
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) |
||
|
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==
| |||