Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Ingo edited this page Sep 6, 2025 · 5 revisions

Create a new theme or modify an existing one

To modify a theme or create your own, follow the steps below. You'll need to have Node, and Grunt installed.

Modify an existing theme

Note

Always modify the sass files not the compiled css file

In /wwwroot/lib/themes/ folder are the sources versions of all themes, which will be compiled to the /wwwroot/css/themes/folder.

  1. So modify the /wwwroot/lib/themes/[theme]/bootstrap-forum.scss for the website and the /wwwroot/lib/themes/[theme]/bootstrap-email.scss for the email templates.
  2. And build them with grunt...
> grunt css
  1. and update the email templates (if necessary)
> grunt emailTemplates

Create a new theme

Create a new folder in the /wwwroot/lib/themes/ folder. for easier start just duplicate an existing theme. the folder needs the following files...

File Description
_variables.scss variables for the site
_variables-email.scss variables for the email templates
bootstrap_email.json config file for email templates
bootstrap_email-digest.json config file for email digest template
bootstrap_email.scss main style file for the site
bootstrap-forum.scss main style file for the email template
  1. in the email template files (bootstrap_email.json and bootstrap_email-digest.json) the theme name need to be updated for the sass_email_location setting
"sass_email_location": "../../YetAnotherForum.NET/wwwroot/lib/Themes/[theme]/"
  1. the grunt tasks (in the Gruntfile.js) needed to be updated in order to compile the new theme.

sass task

themes: {
	files: {
		...
		"wwwroot/css/themes/[theme]/bootstrap-forum.min.css":
			'wwwroot/lib/themes/[theme]/bootstrap-forum.scss'
	}

cssmin task

themes: {
	files: {
                ...
		"wwwroot/css/themes/[theme]/bootstrap-forum.min.css":
			'wwwroot/css/themes/[theme]/bootstrap-forum.min.css'
	}

email templates

emailTemplates: {
	command: [
		'@echo off',
		'cd ..\\Tools\\BootstrapEmail\\',
		'echo Build [theme] theme email template',
		'BootstrapEmail.Cli -f ../../YetAnotherForum.NET/wwwroot/Resources/EmailTemplate.html -d ../../YetAnotherForum.NET/wwwroot/css/themes/[theme]/EmailTemplate.html -c ../../YetAnotherForum.NET/wwwroot/lib/themes/[theme]/bootstrap_email.json',
                ....
		'rmdir .sass-cache /s /q'
	].join('&&')
},
emailDigestTemplates: {
	command: [
		'@echo off',
		'cd ..\\Tools\\BootstrapEmail\\',
		'echo Build [theme] theme digest email template',
		'BootstrapEmail.Cli -f ../../YetAnotherForum.NET/wwwroot/Resources/DigestTopicTemplate.html -d ../../YetAnotherForum.NET/wwwroot/css/themes/[theme]/DigestTopicTemplate.html  -c ../../YetAnotherForum.NET/wwwroot/lib/themes/[theme]/bootstrap_email-digest.json',
                 ...
		'rmdir .sass-cache /s /q'
	].join('&&')
},

Clone this wiki locally

Morty Proxy This is a proxified and sanitized view of the page, visit original site.