Initial Setup
Goto the "admin" system and login.
1) Upload your header logoClick the "images" button and then open the "system" folder. This folder holds the images used by the website to provide it's basic structure. The logo file needs to be in PNG format and named "logo.png".
Now simply drag and drop the image file from a folder on your desktop to the "system" folder.
system ‐ drop image files here to upload
or click here to select files
Click "close" once the image has been uploaded.
2) Upload your shortcut iconAgain drag and drop your "favicon.ico" file to the "images/system" folder.
3) Set your coloursThe main background and text colours of the system are set using variables and can therefore be used multiple times within the website. The benefit being that you only have to change a variable for it to ripple throughout the website.
Click the "content" button and then open the "variables" item in the "content/system" folder.
[colors.main,#ff0000]
[colors.maintext,#ffffff]
[colors.header,#ffffff]
[colors.footer,#000000]
Update the "main", "maintext", "header" and "footer" variables to the hex colour values required.
[colors.main,#FF2975] // yellow
[colors.maintext,#FF901F] // orange
[colors.header,#FF2975] // yellow
[colors.footer,#FF901F] // orange
Click the red "save" button.
4) Copyright NameUpdate the "copyright" variable with the company/individual name and click "save".
5) View the websiteLoad your web page.
https://yourdomain.com/?home
Now it's time to start creating pages and adding content.Build a Home Page…See Also
images/systemcontent/system/variablescontent/system/headercontent/system/footerExamples
Example#1 Alternatively create variables for the colours and use those instead. Improves readability and again, only one variable to be updated.
[colors.main,[var,colors.yellow] ]
[colors.maintext,[var,colors.orange] ]
[colors.header,[var,colors.yellow] ]
[colors.footer,[var,colors.orange] ]
[colors.yellow,#FF2975] // yellow
[colors.orange,#FF901F] // orange
Example#2 use image.png instead of favicon.ico by creating the system.favicon variable in content/system/variables.
[system.favicon,image.png]
Notes
logo: The header logo must be a PNG file named "logo.png" and it's height shouldn't be greater than 125 pixels.
shortcut icon: The icon must be an ICO file named "favicon.ico". To specify a different shortcut icon file, create a variable in [system.favicon,imagename] content/system/variables
color: The CSS spelling of "color" is used throughout the system.
save: If nothing has changed in an item, the "save" button will not be visible.