How to create your own theme?

Undraw Animating

How to create your own theme?

About

This page shows you how to create your own theme.

You can then apply advanced design and logic to your whole website application.

Theme introduction

Combostrap uses a theme system where:

Steps

Where is the default theme ?

The Combostrap default theme is located in this directory

dokuwiki_home/lib/plugins/combo/resources/theme/default

If you discover this theme, you will this layout directory:

  • the directory pages that contains:
    • the templates directory that contains:
      • The handlebar templates (hbs file)
      • The template definition (yml file).
    • the partials directory that contains the partials. They are chunks of handlebar templates that can be included in templates.
  • the directory components that contains:
    • the css directory that contains the stylesheet of each component
    • the html directory that contains the HTML templates of component

Combostrap Default Theme File Explorer

What are handlebar templates (hbs)?

Handlebar templates are files that are written in the following two languages:

They get an array of data called a model and replace their value at runtime.

To simplify, the model is:

If you want to get the whole model definition, contact us.

For instance, the following handlebars expression would be replaced with the page tile

{{ title }}

What are template definition files (yml)?

The template definition files contain properties that apply to the template.

For instance, if you want to use slots in your template, you need to define them.

The median template for instance contains 4 slot elements.

slots:
    - 'page-header'
    - 'page-footer'
    - 'main-header'
    - 'main-footer'

What are partials?

Handelbar partial are handlebars syntax that can be included and therefore reused in templates.

For instance, the below handlebars syntax will include the partial page-footer-partial.hbs that contains the footer of each template.

{{>page-footer-partial}}

What are components stylesheet?

A component stylesheet is a tiny CSS stylesheet that is applied when a component is used on your page.

It will overwrite the default styling of your bootstrap stylesheet.

Creation of your theme directory

Combostrap looks at themes in the directory combo/theme located in the data directory

For a standard dokuwiki installation, the directory is:

dokuwiki_home/data/combo/theme

If you name your theme, mytheme, you should then create the following directories

dokuwiki_home/data/combo/theme/mytheme
dokuwiki_home/data/combo/theme/mytheme/components/css
dokuwiki_home/data/combo/theme/mytheme/components/html
dokuwiki_home/data/combo/theme/mytheme/pages/templates
dokuwiki_home/data/combo/theme/mytheme/pages/partials

Selecting your theme

Now that you have created your theme directory, you can select it.

  • Search for the configuration combo-conf-005
  • And select your theme

Theme Configuration Value Choice

Creation of your first template

  • Go to the default theme directory
  • Copy the median template by transferring it into your custom template theme directory:
    • the file median.hbs
    • the file median.yml
  • Rename them to
    • custom-median.hbs
    • custom-median.yml
  • You should now have two files
dokuwiki_home/data/combo/theme/mytheme/pages/templates/custom-median.hbs
dokuwiki_home/data/combo/theme/mytheme/pages/templates/custom-median.yml
  • Open the file custom-median.hbs and add modify the html header. Below we take over the page heading
<header id="main-header">
  <h1>Custom title: {{ title }}</h1>
</header>

Choose your new template for your page

Template Selection Meta Manager

  • And refresh your page by pressing F5
  • The custom title was applied.

Theme Creation Custom Title Result

How to apply a template for a whole namespace?

The default template follows the following pattern:

If you want to apply the same template for the namespace :howto, you need to create the following templates:

  • howto-index
  • and howto-item

Note that these templates will be applied by default on every namespace that has this name. For instance, they will also be applied to the namespace :docs:howto.

If you want to be more precise, you need to add all namespace name parts in the name of the template. In our case, you need to create the following templates:

  • docs-howto-index
  • docs-howto-item

Next

From there, you can create any theme that suits your needs.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw Building Websites I78t
App Templates

app templates are templates for the app pages. The app pages are the pages that are functional page (ie that does not render a content document). These templates start with the prefix app Template...
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Undraw Dark Mode 2xam
CSS Variable

This is an advanced CSS topic that you can use while creating your theme. You can set CSS variables: to have a global set of CSS values to customize the bootstrap stylesheet CSS If you want to...
Default Component Stylesheet File Explorer
Component Stylesheet

This functionality gives the possibility for Web Designers to customize the style of Combostrap components. If a stylesheet with the name of a component is found in the components/css directory of a...
Layout Element
Main Footer Element

The main footer is a template element that is located at the bottom of the content. You will find generally in this area: an list of related pages content such as backlinks sibling and the...
Layout Element
Main Header Element / Hero

The main header is a template element that is located on top of your content (main element). It's also known as a hero header in design. It is generally shown prominently to grab the attention of...
Layout Element
Page Footer Template Element

The page footer template element is located at the bottom of a page that contains the footer of the page. It's also known as a fat footer and contains general information about the web site. With the...
Layout Element
Page Header Layout Element

The page header is a template layout element that is located at the top of your page. It contains the menubar that: shows links or dropdown contains a search box or button controls the visibility...
Layout Element
Page Side or Sidebar Layout Element

The page side or sidebar is a layout element that is located along the side of the main area (ie content with header and footer). In this area, you will find generally navigational component such...
Undraw Building Websites I78t
Simple Templating markup

Simple templating markup are markups that you can use inside the content of your page: to show information your pages or to show a list of pages Templating offers the following components: ...



Task Runner