FreeStyle Quick Start Guide

Follow these steps to be taken through the process of creating your own CSS for the FreeStyle template.

Test your FTP access

  • Test FTP access and file permissions using the FTP details provided with your test site details
  • Ensure you have 'passive mode' set in your FTP client and log in
  • Create a small file using Notepad called test1.txt
  • Upload it and verify it appears in your client's directory listing
  • Verify that the file is visible at http://YOUR-TEST-SITE/static/test1.txt
  • Note that files in the FTP area on a site are visible on the URL /static/ on that site
  • Delete the file via your FTP client


Setup CSS Stylesheets

  • View the source of http://YOUR-TEST-SITE/ and note the default stylesheet included in the header
  • Download copies of the default2.css and default3.css example CSS files
  • Rename one of them to something you will recognise
  • Upload this by FTP and verify it appears on the /static/xxxxxx URL as described above
  • Now please log in to http://YOUR-TEST-SITE/ with the username provided - this user will have access to 'site admin'
  • Navigate to Site Content > Dependencies option
  • This list of dependencies is how you add CSS and Javascript files to the document header. Click 'add new' to add a new dependency - note the different types you can add, and the ability to easily enable and disable them.
  • Fill in the 'filename' box with the name of your uploaded file (eg. default2.css ), then choose either of the CSS types under 'Type', and click Save
  • View the source of http://YOUR-TEST-SITE/ again to verify that your newly uploaded stylesheet is included in the header, in place of the default.
  • Make a small change or two to your CSS file and upload it again
  • Verify that your updated file appears after doing a full refresh (CTRL+F5)