This page is part of our UserSpice Customization Guide.
Templates control the look and feel of the front end of your UserSpice project. Although the default UserSpice templates use Bootstrap 4, one of the beautiful things about UserSpice is that you can build your PHP pages however you like using any css framework or no css framework. You can use jQuery or not use it. It’s your project and you can design it however you want.
Spice Shaker is the preferred way to install official and curated community templates. Simply go to Spice Shaker, select Templates (and hit Go) and you will get a list of templates that can be easily installed. Please note that installing a template is not the same as activating it. You must go to Tools->Templates and click the Activate button to activate your template. Most templates also have a preview option.
If you do not want to or cannot use Spice Shaker, you can still view the raw template files and download template zips at our UserSpice Template List. Download your zip and unzip it to usersc/templates. Then go to Tools->Templates and click the Activate button to activate your template.
Please make sure you have a new template active before deleting a template. Otherwise, UserSpice will try to reactivate the “Standard” template. If Standard is missing, it will try to activate another template (in ABC order). If it cannot find a template, your site will not load. Once you are sure you have a new template active, simply delete that template’s folder in usersc/templates/your_template_name.
It is not a good idea to directly edit UserSpice templates. Depending on what you want to accomplish, one of the solutions in the Customizing UserSpice Guide may be a better option. If you need something that loads every page (like a function or CSS override), usersc/includes/head_tags.php or usersc/includes/custom_functions.php might be a better choice.
If that doesn’t work, feel free to copy any template that is close to what you want into a new folder in usersc/templates and edit away. We even have a template called “nocss” that has no CSS in it, so you can start from scratch.
One of the hardest parts about creating your own template is dealing with navigation. You might find it easier to use file based navigation (i.e. hard coded) navigation instead of database-driven navigation in your custom template.
The file structure of a template is pretty self-explanatory. Headers, footers. Stuff like that. The “assets” folder is where we store all the CSS/JS/Navigation stuff.