Creating a new Theme - Documentation topics on: bootstrap,responsive,templates,themes,.

Creating a new Theme

A dotCMS Theme is a collection of CSS, Javascript, image and VTL files that can be stored on each host under the folder: /application/themes. dotCMS Themes can use any JS or CSS framework to provide a responsive, reusable template design.  Each theme consists of the following files and folders:

VTL Files

Three .vtl files are required for a theme to function.  These files contain HTML and Velocity code which provide the <head> code, header and footer for pages using the theme.  These velocity files are as follows:

  • html_head.vtl: Code included in the head section of the template, in between the <head></head> tags. Should include links to additional CSS and or JS files as required by the theme.
  • header.vtl: Code to generate the theme's Header. It will usually be included after the <body> tag and include the code/HTML to generate the Top Navigation.
  • footer.vtl: Code to generate the theme's Footer, before the close of the </body> tag. May add code to include javascript libraries and analytics tracking.

Optionally, a theme can also include/override the whole template, which controls the whole page layout.  By including a template.vtl and overriding the default, you can include any css library or design standard required by your implementation.   If a template.vtl file is not provided in the theme, dotCMS will use the default template.vtl (see template.vtl in github) which relies on Twitter's Bootstrap.

  • template.vtl (optional): code that overrides the default template.vtl that ships with dotCMS.  The default template.vtl uses Twitter's Bootstrap for Responsive Design.  You can see the code for the default template.vtl in github.

Any additional custom VTL files should be saved under the "vtl" folder.

CSS Files

Save on this folder all the CSS files needed to create the look and feel of the theme. Below you'll find a list of some of the files used in the provided theme samples, these are not mandatory, only best practices in how to organize the CSS files used on a theme.

  • base.css: CSS used in the WYSIWYG for Headings, Paragraphs, etc.
  • bootstrap-min.css: include this file if you want to include all bootstrap classes. By default only the grids (scaffolding) classes are included in the theme.
  • flexslider.css: CSS file used for the picture slider in the starter site
  • prettyPhoto.css: CSS file used for the photo galleries in the starter site
  • style.css: basic list of look and feel classes
  • widget.css: classes that are only defined to be used in widgets.