While .tpl files allow users to recycle blocks of HTML code for each section or page of their website, users can leverage .tpl files to customize their website’s layout, colour scheme and logo. The first example will show the user how to customize the top-navbar. In the screenshot provided below, the navbar has a white background colour. This example shows the user how to change the colour of the top-navbar.
How do I customize themes in Solodev?
Customizing the navbar
Expand the web files -> templates -> navigation folder.
Open the file labeled top-nav.tpl.
Place the cursor within the brackets of the opening navigation tag.
Since the example site leverages bootstrap, add the following style and class.
class="navbar-light" style="background-color: #e3f2fd;"
Open the index.stml page to see the changes.
How do I customize the layout of a page?
The first example discussed how to leverage .tpl files to customize themes. This example shows the user how to use tpl files to structure the layout of a page. A screenshot of the news page with a navbar, title and footer are provided below.
Here, the user will customize the page title, create an additional dynamic div in the .tpl file, create an html file with structured content, and insert it into the newly created dynamic div. Start by creating a news.tpl file in the web files -> template folder; a news.stml file in the www folder; and an news.html file in the web files -> content -> news folder.
Step 1 – Adding a dynamic div
Open the news.tpl file.
Type the following code to insert a third dynamic div.
Open the news.stml file to preview the results.
Step 2 – Stylize the header
In the news.tpl file, delete the code in the section tags.
Add the following code inside the section tags.
<div class="jumbotron jumbotron-fluid text-center text-dark" style="background-color: #ffffff;">
<small class="font-weight-light">Get the latest in SpaceJet News</small>
Step 3 – Create an html file, structure your content, and add it to the page
Open the newly created news.html file.
Click the Source button to structure your content with html code.
Open the news.stml file.
Click the empty dynamic div
Click the news.html to insert the newly structured content.