Default Website Development: Difference between revisions

Default Website Development (view source)

Revision as of 11:04, 21 March 2024

2,090 bytes added , 21 March

→‎Changing the Theme and other settings

NeilThomas

320

edits

@@ 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.
-==An Alternative Default Website==
+==Changing the Theme and Other Settings==
-Following on from the development of the current default website, the author of the default website has generated an alternative that is more adaptable and responsive.
+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.
-It is designed to work on all screen sizes while using exactly the same data that is uploaded to the default website.
+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:
-It allows your data to be sent to its own sub-folder of the site rather than mixing in with the web pages so makes it easier to manage.  It comes with a number of themes or colour schemes that you can implement as required.
+ <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>
-To find out more please visit the [[Alternative Public Website]] page.
+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==