The Plato.Theming module allows you to create themes and customise theme files via the web based Plato administrator dashboard. Plato.Theming is an optional module and can be enabled via the features page.

NOTE Plato.Theming is only intended to help you make simple changes to your theme files. It's great for updating the layout, CSS or adding your company logo. If you need to make more in-depth changes such as adding custom Razor code tag helpers or views we would suggest editing the theme files within your favourite code editor or IDE such as Visual Studio or VS Code.

Enabling Plato.Theming

Login as an administrator and visit the Plato administrator dashboard. Click Features > Manage within the navigation. Within the search field at the top of the Features page type "theming". You should see Plato.Theming within the results. Use the Enable button to the right of the Plato.Theming listing to enable the Plato.Theming module. Once Plato.Theming is enabled you can create custom themes via the administrator dashboard.

Creating a Custom Theme

1. Enable Plato.Theming is enabled as described above
2. Click Theming > Add within the administrator dashboard navigation
3. Provide a name for your theme and choose a default theme to use as a basis for your new theme. You can see below we are creating a new theme called "My New Theme" based on the default "Dark" theme.

4. Save your theme. You will see your theme appear in the list of themes as shown below...

5. Click your theme name or use the edit button to the right of your theme to browse and edit the theme files as shown below...

6. You can edit any particular theme file by simply clicking it's name. You can see below we are editing the _Layout.cshtml layout file...

For further details on each theme file please see Theme files.

Enabling your Custom Theme

Once you've created your new theme you'll want to head over to your general settings page to ensure your new theme is the default theme for Plato.

1. Navigate to general settings
2. Locate & select your theme within the "Theme" drop down list
3. Save the changes

You can see below we are selecting the new theme we created in the above example...

Editing Custom Themes

Custom themes are regular files that exist on the file system within the Sites folder within root of your Plato web application. Custom themes are located within the Sites\{SiteName}\Themes\ folder where {SiteName} is the name of your site defined during the Web based set-up.

You can edit the files contained within a custom theme as you would with any other file. For more in-depth theme customisation work you may wish to work with the layout or CSS files within your favourite editor. You can do this by simply editing your theme files within the Sites\{SiteName}\Themes\{ThemeName}\ folder.

You can see below we are using VS Code to edit the "My New Theme" we created above via the web based interface...