Customizing Blesta through template modifications.
Often people modify the client area templates to make them match their website. While we can't provide a less on HTML and CSS, we can point you in the right direction.
- /app/views/client/bootstrap/structure.pdt contains the header and the footer of the client area and front facing pages
- If you will be changing CSS styles, we recommend you create a new stylesheet, called something like overrides.css and add it to structure.pdt after all of the other styles. Any styles you add will override the defaults. Using your own CSS file will mean easier upgrades in the future as you will only have to update the template to load your stylesheet, not replace it altogether.
Creating Your Own Templates
Most people start by cloning the default template files at /app/views/client/bootstrap/.
- Copy the /app/views/client/bootstrap/ directory and give it your own name like "mytheme".
- Edit the config.json file in the template directory, changing the name and authors, and any of the other information but keep the structure. (See below for an example)
- Upload it to /app/views/client/ so that your theme exists at /app/views/client/mytheme/
- To use the theme, go to Settings > Company > Look and Feel > Template, and select your template from the "Client Template" dropdown.
- Edit the templates as desired.
In your templates you can evaluate $system_company->id to display different information based on the company ID. The first company ID of every fresh Blesta installation is "1". If using multi-company, the 2nd company would be "2", and so on. Check the ID in the link for the company under Settings > System > Companies to determine the company ID.
A common use is using embed code like Crisp chat, or Facebook Pixel that will appear on all client area pages for a specific company only. The example below can be used in /app/views/client/bootstrap/structure.pdt for displaying content or embed code for a company with the ID "2" only.: