Customization · YAFNET/YAFNET Wiki · GitHub
Skip to content

Customization

Jump to bottom Edit New page
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('&&')
},

YetAnotherForum.NET (YAF) the Open Source Discussion Forum for ASP.NET - https://YetAnotherForum.NET

Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved

Add a custom sidebar

Clone this wiki locally