Theme Packaging Checklist

How to Create Your Own DNN Community Forums Theme

You can create your own theme from scratch, but starting with one of the default themes is usually easier. There’s one requirement: if you want to use the SCSS or LESS files included with a theme, you need to have Node.js and Gulp CLI (version 4 for now) installed on your computer.

---

Steps

1. Create a folder for your theme inside the \DesktopModules\ActiveForums\themes directory (for example, custom-theme).

2. On the project’s GitHub page, look for the theme-source.zip.resources file inside the theme folder you want to use as a base: https://github.com/DNNCommunity/Dnn.CommunityForums/tree/dev/Dnn.CommunityForums/themes

3. Download this file and rename it to end with .zip (remove .resources).

4. Extract its contents into your custom-theme folder.

5. Open the folder in VS Code.

6. In the command window, type:

   npm install
   

   This will install all the Node modules required to build the theme. You can ignore any security warnings, as we’re not running this on a server.

7. Now type:

   gulp
   

   and press Enter.

8. When you edit the .scss files, the theme.css file should be automatically re-generated.

9. Place a test Forums module on your site.

10. Go to Module Settings > DNN Community Forums Settings:

    • a. Under Theme, select your custom theme.
    • b. Open Advanced Settings, and under Enable Template Caching, select No. (Do not disable this on a live site.)

11. You should now be all set to develop your own theme.

---

If you want to generate your own source file (like the one you downloaded earlier), you can run the following command:

gulp source

---

Create a new theme

• Copy existing community-default theme (using tool of choice)

• If you want to test it within an existing DNN instance, copy it to the themes folder in YOUR DNN instance You will then see it in the Community Forums module settings as an available theme:

• Make any edits you want

• Optional: Submit to dnncommunity (or git hub) If you want to donate to the community ....