Custom Event Themes

Essentially, an Events theme is a folder that contains all elements that make up the theme:

• 1 css file
• (most of the time) some bitmap files that are used in the graphics of the theme.

In order to make it work, the name of the folder must be the same as the name of the theme .css file. So if you want to have a theme named ThisIsMyTheme, you should have a folder named ThisIsMyTheme and a .css file within this folder named ThisIsMyTheme.css.

For standard installed Event themes, the folders can be found in the DesktopModules\Events\Themes. In this folder you will find subfolders named Default, Events, etc. In fact, all names of the standard themes supplied in the PA pack of Events. The name of the folder = the name of the theme.

Custom Event themes are located in the standard Portal file folders, which you can reach using the Admin File Manager. There should be a main folder DNNEvents, with a subfolder Themes. From there on, it works like the standard themes. To work it out for your custom theme ThisIsMyTheme, there should be (at minimum) the file in a folder: DNNEvents\Themes\ThisIsMyTheme\ThisIsMyTheme.css. All necessary additional bitmaps and/or other files for your theme should be located in the same folder.

As for the structure of the .css theme file. The best way to start is to create a copy of one of the standard Event themes, e.g. Events.css and also have a look at another one, e.g. Events-Green.css.

Class names in the .css file are prefixed with the name of the theme. If you compare the 2 standard themes, the naming convention can be easily detected. The reason for this is that the Events module supports the option to have 2 instances on the same page, each having a different theme as well as the fact that the caldendar control we use (which we inhertited a long time ago) is build this way.

Go back to: Frequently Asked Questions