View Source

You are using phpFox version earlier than 4.6.0? Please refer instruction for this article here.

This will show you how to clone the default Bootstrap theme so you can make changes to it as any edits to the default Bootstrap theme will void your support and can cause site issues. We recommend purchasing custom themes from third party developers if you need something more than a basic theme or if you don't have HTML/CSS skills to change your theme how you want it.

Our video tutorial will have you select a Blank theme. Don't do that if you want to clone the Bootstrap theme and don't need to make many changes. For this tutorial, select Bootstrap as the theme to clone unless you have CSS changes. If you only need to change the logo and front banners, select Bootstrap. If you want to make HTML and CSS changes, select Blank.

Click Themes

Click Create New Theme on the Actions of Themes page.

You'll see a popup to enter your new theme's details.
1. Choose Material or Bootstrap or Blank theme to clone, depending on your needs.
2. Enter a lower case alphabetical theme name.
3. Submit when done.

Now, you will see the theme is added to your list of themes when in the Theme Manager. You would want to click Edit when on your theme and set it as default:
- Click the lower left arrow to open the theme options:

phpFox 4 User Manual > Adding a Theme > theme menu options.png

- Once the menu selection is open, select Set as Default Theme:

phpFox 4 User Manual > Adding a Theme > set default theme.png

Be sure to clear your site's cache after changing themes.

If you clone a template for editing and customization, you can see that whenever the original template is upgraded, the cloned template also gets the upgrade notification.
phpFox 4 User Manual > Creating a Theme by Cloning > 2.png

If you want to remove this update notification on cloned template, you can do as following:

1. Open file at:

.../PF.Site/flavors/name-of-cloned-template/theme.json

2. Edit the code and remove a line then save the changes on the file:

{
    "id": "material",
    "name": "Material_cloned",
    "store_id": "2004",     //Remove this line
    "version": "4.6.1p2",
    "vars": {
        "body-bg": {
            "title": "Body Background",
            "id": "body",
            "attr": "background"
        },
......