To get started, log into your AdminCP and navigate to Themes. Click on CREATE NEW THEME.
You will get a popup, from where you can create your first theme.
For Clone, select the default Bootstrap theme to clone. Then for your name enter Sample. Once your theme has successfully been created you will reach the Theme Manager or TM.
The TM has been developed for clients to easily edit themes direct from their web browser. However, we are taking this from a designers perspective and we won't be doing any work here.
File & Folder Structure
Now that we have a new theme in place, from your operating systems file manager (or FTP in case you working on a server) navigate to the folder PF.Site/flavors/sample/
| Info |
|---|
In your sample/ theme folder you will find all the needed files to work with your theme. The 2 most important and common files we edit when designing a theme will be assets/autoload.css and html/layout.html. Before we continue working on our theme, let's go over the current file & folder structure for a theme.
| File/Folder Name | Description | Required | ||
|---|---|---|---|---|
| /assets/banners/ | Will hold any banners an Admin uploads to your theme. | No | ||
| /assets/favicons/ | If an Admin changes the site favicon, it will be placed here. | No | ||
| /assets/logos/ | Logos uploaded by Admins are added here. | No | ||
| autoload.js | If your theme requires Javascript you can use this file for that.
| no | ||
| autoload.css | CSS for your theme. | yes | ||
| autoload.less | If you wish to work with LESS, phpFox supports compiling less variables from the variables.less file. If you use this file, make sure your IDE or Text Editor supports compiling LESS files to CSS. | no | ||
| variables.less | Store your LESS variables here if you plan to use autoload.less. You can find default variables from our Bootstrap theme, located at | no | ||
| /html/layout.html | Your HTML goes here and we use Twig as our template engine. | no | ||
| theme.json | JSON variables used to load your theme in phpFox | yes | ||
| theme.png | Screenshot of your theme, which is displayed in the AdminCP. | yes |