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 Blank Theme 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/
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. phpFox uses jQuery as its default Javascript library. | no |
autoload.css | CSS for your theme. | yes |
autoload.less | If you wish to work with LESS, phpFox supports compiling less variables from the Additional information on how to work with phpFox and LESS can be found here. | no |
variables.less | Store your LESS variables here if you plan to use autoload.less. For additional information about LESS variables, check out our variable list. | 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 |
Disable CSS Caching
When you are working with your theme it might be easier to make sure the browser does not cache your CSS changes. To get this working, navigate to the folder PF.Base/file/settings/. In that folder, if you don't have this file create a new file called debug.sett.php. Paste the following
<?php define('PHPFOX_NO_TEMPLATE_CACHE', true); define('PHPFOX_NO_CSS_CACHE', true);
These 2 PHP constants will tell phpFox not keep your CSS files fresh and to skip the template caching.