Customizing the Theme

From Softaculous Wiki
Jump to: navigation, search

Overview

This guide explains you how to develop a custom theme for Softaculous. Its very simple to make a custom theme. However due to new features being added to Softaculous every now and then we make changes to the default theme which you will need to incorporate into your custom theme otherwise the new features might not be available to your users.

If you wish to change the UI by editing style elements you can add a custom CSS file. Check the guide here[1].

Customizing the Theme

  • Make a new folder with the theme name you desire at the following path:

DirectAdmin:

path-to-softaculous/images/themes/

Any other Panel:

path-to-softaculous/enduser/themes/
  • Copy the file theme_settings.php from default themes directory to the Custom theme directory.
  • Copy the JavaScripts, CSS and images folder from default themes directory to the Custom theme directory and then modify them accordingly.

NOTE : The theme_settings.php contains the $theme['url'] which is a variable used throughout Softaculous. This variable has the Static / Relative URL for static content like images and style sheets. The value of this variable is set to the Softaculous default theme's URL. Hence if you want to use different images and style sheets you will need to change the value of this variable i.e. $theme['url'] to your desired URL.

  • Copy the PHP files which you wish to customize from the default theme folder to the Custom theme folder you just created.

Note : Please copy the files that you want to modify, to the Custom theme directory. If the file is not available in the Custom theme directory it will be taken from the default theme in Softaculous.
This will minimize the changes required from your side when we launch a new version.

  • Modify the files in the new folder according to your preference.
  • Change the theme from Softaculous Admin Panel -> Settings Choose Theme

Customize Theme.png

  • Thats it you're done.