Setting the user interface theme

Being able to change the user interface theme is one of the major features of Saltcorn.

The Saltcorn user interface is based on Boostrap 4. This is a system which allows you to edit the CSS (Cascading Style Sheets) which gives you application a unique look and feel. 

Change the user interface theme

In Saltcorn go to Settings / Plugin and pack store

In the Plugin page > Themes

I would recommend starting with any-bootstrap-theme. 

This will give you a lot of options for different bootstrap-based themes.

Click Install, and select a theme from a drop-down and change some parameters.

 

Try out other themes

Return to this page by clicking the settings cog icon in the any-bootstrap-theme card in the plug-in store (when you have it installed it is available under the Installed tab at the top next to themes.)

You can also try some of the other themes instead, adminlte is not really maintained but the other ones should work.

 

Set a different theme for each user role

To set a different theme for every role, go to  Settings > Users and security > Roles, and choose the theme you want for each role. 

 

Create a customised Boostrap 4 theme

Intermediate

Fully customising the look and feel

The any-bootstrap-theme plug-in has an option to use and uploaded file as the stylesheet. You can use this to customise every aspect of the look and feel of your application. Steps:

  1. Pick closest theme from https://bootswatch.com It is relatively easy to change the colors, so look at the size of the navigation, shapes of the buttons, and gradients (Compare Sketchy, Spacelab and Yeti which are completely different to each other).  
  2. Find that theme in https://github.com/thomaspark/bootswatch/tree/v4/dist
  3. Save the _variables.scss file   
  4. Go to https://bootstrap.build/, Open the builder (Create an account so you can save your themes)
  5. Inside the bootstrap.build app, Import the _variables.scss file
  6. Tweak the variables until you get the look and feel you want. Start with the colours, changing the primary and secondary colours and the $body-bg variable. You may also want to change the fonts under Typography
  7. Click Export theme and download the bootstrap.min.css file
  8. Upload the bootstrap.min.css in Saltcorn under Files, set access to public
  9. If you have not already done so, install the any bootstrap theme plug-in, and make this the theme for each role under settings
  10. In any-bootstrap-theme configuration (Accessed through the little cog button in the card in the plug-in store) pick Uploaded file as the Theme and then pick your uploaded bootstrap.min.css as the CSS stylesheet file. Click save.