Themes for the J1 Template are based on the Open Source CSS framework Bootstrap (version 5). A theme is like a skin for your website — it changes the look of your pages without changing the content. With themes, you can show the same site in many different styles.
A theme makes sure your website looks the same on every modern web browser. It sets the colors, fonts, sizes, and the look of buttons, tables, and forms. You can also use Bootstrap’s built-in CSS classes to fine-tune parts of your design on your own.
The Themes
A theme changes how your website looks, but not how it works. It uses CSS rules from Bootstrap to set things like the color scheme, fonts, sizes, and the appearance of more complex parts such as forms and tables. Some themes also add extra components on top of the standard Bootstrap set.
Changing the CSS styles of Bootstrap is not too hard, but you do need some basic knowledge of CSS to do it well. If you are new to CSS, the CSS tutorial at W3Schools is a good place to start. CSS is the design language used by every modern website.
Thanks to the team at Bootswatch, many ready-made Bootstrap stylesheets are available for free. You can use them as they are, or use them as a starting point for your own design — you do not have to build everything from scratch.
Bootswatch also offers an Integration API that makes it easy to add their themes to an existing site. The J1 Template uses this API so you can pick a Bootswatch theme right from the menu of your website.
Apply a Style
The default theme of the J1 Template is called Uno. It comes with both a light and a dark version and works well for many kinds of websites. Uno is a good starting point. If you want a different look, you can combine Uno with another theme to get your site ready quickly.
You can find every available theme in the Themes menu in the top bar of your website. Try a few of them and see how the page changes when a different theme is used.
| When you switch from one theme to another while the site is running, the J1 Template tries to apply the new styles to all parts of the page (such as fonts, headings, lists, and paragraphs). This works for most common elements, but not yet for every single one. |
Pick a theme from the Themes menu, and the new Bootstrap stylesheet is applied automatically to every page of your website.
What next
The J1 Template is a great starting point for many kinds of websites. One handy feature it offers is code highlighting. Code highlighting adds colors to source code so it is easier to read and understand.
Each programming language has its own keywords and rules. Code highlighting uses different colors for different parts of the code. For example, in JavaScript, keywords like if, for, or function get one color, while text strings and variables get another.
The J1 Template uses a code highlighter called Rouge. Rouge is written in Ruby and supports more than 100 programming languages. It produces colored HTML output that works in every modern web browser.
To see what Rouge can do, go to the Code Highlighter page.