Customize the whole blog application
The WebTML modules directly under directory "tml/html" represent customizable parts of the blog layout. Modifying these will modify the layout of all blogs that are in the blog application. These are:
- body.tml: The main page layout including the basic modules
- comment-form.tml: The WebTML form for creating comments
- comment.tml: The display of comments
- footer.tml: The footer area of the page
- header.tml: The header area of the page
- html-head.tml: Optional additions that go into the <head> section of the HTML page, for example additional CSS style definitions
- sidebar.tml: The bar to the right of the blog, containing numerous modules. You may add/remove modules here by adding/deleting includes
- ui-html-head.tml: Optional additions that go into the <head> section of the HTML page for the blog authoring UI
Creating a blog theme
Most times it is better to create a new blog theme rather than customizing the whole blog application. This way individual blogs on your app can use different designs.
The customization directory already contains two themes, "rounded-box" and "lazydays" which you may use as templates for creating themes.
To create a theme do the following:
- Under directory "files/themes" create a new folder. The name of the folder will be the name of the theme.
- Create a file "blog.css" inside the folder. Customize the CSS style of your blog inside this file. See the code of the WebTML modules from your overlay directory for CSS classes to use. The CSS structure is also explained on the next page of this tutorial.
- Optionally you may also create modified versions of the WebTML modules in your customization directory that are to be used by your theme:
- Under directory "tml/html/themes" create a folder with the same name as your theme folder from "files/themes"
- Copy those WebTML modules that you want to customize from the "html" folder to your just created WebTML theme folder. Customize the copy there.
Continue on next page ...