Store
Community Documentation

v3 Knowledgebase

Creating your site's looks

Creating your site's looks

Phpfox v2 offers a much easier way to customize how your site look. In previous versions you would upload your files to a folder but this is not needed anymore, you can customize your look from within the AdminCP very easily:

Creating a Theme

Go to the AdminCP -> Extensions -> Theme -> Create Theme. Every theme must have a parent theme so it piggybacks from that theme its templates, a good starting point is (maybe the only available for now) the Phpfox (default) one. The folder field is needed and it refers to the list of folders inside the /theme/frontend folder. This folder does not need to exist, so the name you put in this field must not exist in that list of folders. The rest of the fields are pretty much self explanatory and not required.

Believe it or not you already have a theme and a set of template files, it looks like the default one but that gives you something to work on.

From the AdminCP -> Extensions -> Theme -> Manage Themes screen you can edit your theme's templates and create styles. Its important here to note the difference:

  • A template places elements in your page. A template is done using HTML
  • A style positions and colors the elements in your page. A style uses CSS

If you go to the list of themes you can edit the templates for this new theme.

From the Manage Themes screen if you click on the icon to the left of your theme you will be shown several options, you most likely will want to change the colors first so lets create a Style

Creating a Style

From AdminCP -> Extensions -> Theme -> Create Style, or from Manage Themes and menu on the left of your theme, you can create a style. Be sure to check the Parent Theme is your own theme. Here the parent style applies the same logic from the templates, it piggybacks from an existing set so you dont have to create everything from scratch as there may be items left out by accident. Name your Style and write a name for the folder. This folder is the one inside /theme/frontend/<yourTheme>/style/ so once again this folder must not exist.

You now have a style, you can customize it by going to the list of styles in your theme and clicking on the menu to the left and then on Edit CSS. A list of sections will be shown and upon clicking on them a list of files for you to edit.

FAQ

  • I created a style/template but its not showing up?

Make sure you marked that style as the default one and no other style is set to default. Marking a style as default will enable the template that belongs to its theme so thats also how you enable your template

  • What do I need to create my styles and templates?

To know HTML for the templates and CSS for the styles

  • What if I want to use a WYSIWYG?

You can still create your templates using a desktop application, you would only need to copy and paste the source code when you edit your templates or styles.

  • But where are the files?

Phpfox rarely needs to use flat files from the /theme folder, the information you have just created is added to the database and dumped immediately to cache files. The cache files are used in your site always so no subsequent calls to the database are needed until they are absolutely needed. Your looks will only be needed to be fetched once after your cache is cleared. But when you export your theme, it will contain the path and folders that you set its names to, so you can then import it by placing it in the /theme folder of another site (or yours if you reinstalled), the script will look for new themes and find a special file, compare with the ones in record and offer you to install it. You do not need to edit the xml file because it was created from the information you entered when creating the theme.