How to Manually Add a Custom Header/Footer to Blesta
January 31st, 2025
How to Manually Add a Custom Header/Footer to Blesta
With its wide range of customisation options, you can easily tweak the layout and add your branding, creating a seamless experience that aligns perfectly with your business's brand identity. If you don't want to open up the hood to make these changes, consider using the Blesta.Club HTML Structure Edit plugin instead! The HTML Structure Edit plugin for Blesta allows you to easily edit the base Blesta structure file, enabling you to add code in both <head> and <body> tags. This powerful tool offers seamless integration with your Blesta installation, making it easier to customise and persist your changes through updates.
Get the HTML Structure Edit plugin here!
If you're happy to do it the old fashioned way - read on...
Prerequisites for Theme Changes
Before you get started, there are a few important steps to ensure your changes are safe from future updates.
Step 1: Duplicate the Default Theme Folder
To get started, you'll need to duplicate the `bootstrap` theme folder to create your custom theme. This will allow you to make edits without affecting the default theme or future updates. (If you like the idea of having extra work every time an update is pushed, you can skip this step and simply make the changes within the default `bootstrap` template files. It may also be necessary for you to redo these customisations in the future if the structure file changes in such a way that affects how Blesta acts, or if it includes something you want in your production template).
1. Navigate to the `/app/views/client/` directory.
2. Copy the entire `bootstrap` folder and paste it within the same `client` directory.
3. Rename the copied folder to something unique, for example: `yourthemename`.
Step 2: Edit the `config.json` File
Now that you've duplicated the folder, you'll need to tell Blesta to recognise your custom theme by editing the `config.json` file. This step is necessary to ensure your new theme appears in Blesta's "Look and Feel" settings.
1. Go to the `/app/views/client/yourthemename/` directory.
2. Open the `config.json` file in a text editor.
3. Locate the line containing `"Bootstrap"`, and change it to the name of your new theme, e.g., `"YourThemeName"`.
4. Save the file after making the changes.
This change will allow you to select your custom theme in Blesta's "Look and Feel" section.
You can find this under `Blesta Admin` > `Look and Feel` > `Template` > `Client Template`.
How To Add Your Custom Header and Footer
Now that the theme has been successfully copied over, we can begin making the necessary changes to ensure it aligns with your brand’s look and feel.
Step 1: Locate the structure.pdt file
1. Go to the `/app/views/client/yourthemename/` directory.
2. Open the `structure.pdt` file in a text editor.
Step 2. Adding Your Custom Header
1. Locate the following content in the `structure.pdt` file.
<?php
if ((isset($show_header) ? $show_header : true)) {
?>
2. Paste your custom navigation/header HTML directly underneath.
Step 3. Adding Your Custom Footer
1. Locate the following content in the `structure.pdt` file.
<div class="container-fluid"> <div class="row footer"> <div class="col-md-12"> <hr /> <p class="text-center m-3">Powered by <a href="http://www.blesta.com/">Blesta</a>, © Phillips Data, Inc.</p> </div> </div> </div> </div>
2. Paste your custom footer HTML underneath (You can also simply replace this entire section and add the Blesta copyright text to your own footer instead of displaying it separately).
Step 4. Making Sure the CSS Functions
By default, your custom code probably won’t look the same as it does on your main website. This is because Blesta uses Bootstrap 4 CSS, while your main site might use Bootstrap 5 or a different framework altogether. Even if both sites are using Bootstrap 4, there are likely customisations in both Blesta and your main website that need to be considered.
1. Navigate to `/app/views/client/yourthemename/css`
2. Create a file called `custom.css`
3. Add your custom CSS code from your main website to this file. (Hint, you will likely have classes that include the prefix `nav` and `footer`).
4. Reference your `custom.css` file in the `<head>` of `structure.pdt` like so:
<link href="<?php echo $this->view_dir;?>css/custom.css" rel="stylesheet" type="text/css" />
Bonus - Include Header on Login Pages
By default, Blesta hides the navigation on the login pages. However, if you’ve added a custom footer, it won’t hide that, which can make things look a bit off. Here’s how to fix it.
Solution 1 - Show the Header
1. To show the header, simply file the line in the `structure.pdt` file referenced earlier.
<?php if ((isset($show_header) ? $show_header : true)) { ?>2. Replace it with the following:
<?php if (true) { ?>
Now, your header will be visible on pages it was previously hidden from.
Solution 2 - Hide the Footer
1. To hide the footer, you can simply re-use the code from above.
2. Copy the following code above where your custom footer starts:
<?php if ((isset($show_header) ? $show_header : true)) { ?>3. Copy the following code after your custom footer ends:
<?php } ?>
Now, your footer will have the same behaviour as your navigation menu and be hidden from login pages.
Conclusion
That's pretty much it! To summarise, we've now:
- Created a custom template file.
- Added our custom header to the `structure.pdt` file.
- Added our custom footer to the `structure.pdt` file.
- Created a custom CSS file for our template.
- Either shown the header on the login pages or hidden the footer (optional).
Now your Blesta installation should closely match the branding of your main website template! To further refine your design, be sure to use the Theme Editor in the Look and Feel section of Blesta to customise colours for text, backgrounds, and buttons.
Blesta Enthusiast, A gem of the community with a lot of unique interests!
Part owner of Blesta Club Ltd, Owner of TekLan Hosting and a few other companies.