Create your own themes
Here you can learn how to create your own themes for maximum individuality.
Last updated
Was this helpful?
Here you can learn how to create your own themes for maximum individuality.
Last updated
Was this helpful?
Themes in BlogSmith consist of three files and are written in HTML. We added common Bootstrap classes to the dynamic content and recommend including Bootstrap in your themes, too.
To upload a new theme, create a new folder with the name of your theme, including the three files below inside of the folder, compress it as a zip, and upload it.
The three files are:
list.html: includes the interface of your categories pages
search.html: includes the interface of your search pages and 404s
post.html: includes the interface for your post pages
The files' content will be added inside of the <body> tag on the site. So basically you have complete flexibility in what you add to your page, but the only limitation is that you can only use tags allowed inside the body. To work with your site's content and append it, you can add a blogsmith-id to an element with specific content that we come later to. You can also add third-party libraries and styles by adding the <script> or <link> elements at the bottom of the respective files.
If you want to have an example of a BlogSmith theme, you can download the "Nova" theme here:
page-title: the title of the page, category, or post
site-title: the name of your site
menu: the site menu, containing all of your pages in your order
image: the post image, undefined on other pages
categories: list of links to the posts' categories, undefined on other pages
content: the content of the post, menu, or the posts of a category
author-name: the name you entered in your profile, only available on post pages, undefined on other pages
author-bio: the biography of your profile, only available on post pages, undefined on other pages
copyright: copyright notice with the current year and your site name
branding: your sites' branding colors
site-description: your site's description
site-logo: your site's logo