Serenity Skins - Skin builder for Serenity Framework

!!! RIGHT NOW THESE SKINS ARE JUST FOR SERENE VERSION (FREE VERSION)

!!! STARTSHARP HAS NOT SUPPORTED YET

!!! STILL DEVELOPING, DON'T USE IT ON PRODUCTION

Feature

• Support light/dark skin
• Support move searchbar on sidebar => header
• Ability on/off color for tool-button icon (default buttons like update/delete/add/localization/clone...)
• Support video background animation
• Support pure css background animation
• ...

Skins are used to demo the features, so at this time I don't create too many skins for easier maintaining

Demo

SKINS: GLASS 001

Style 001 Css Background Animation	Style 004 Css Background Animation

Style 002 Image Background	Style 003 Image Background

Style 006 Video Background	Style 007 Image Background

Style 009 White	Style 011 Purple

Style 005 Green Leaves	Style 010 Clean Purple

HOW TO SETUP

Copy skins folder from /wwwroot/Content/ to your project (keep same path)

Copy J.initSkins.ts file from Modules/Common/Helper/ to your project (keep same path)

Modify file /wwwroot/Content/site/site.theme.less, import theme.less like bellow

@import "../adminlte/social-widgets.less";
@import "../adminlte/skins/_all-skins.less";
@import "../skins/glass001/theme.less"; /* <======================== */

@import "../adminlte/mailbox.less";

In /Modules/Common/Navigation/ThemeSelection.ts, add

let glassStyleIdx = 1;
while (glassStyleIdx <= 11) {
	Q.addOption(select, `glass-001-style-${glassStyleIdx}`, Q.text(`Site.Layout.Glass001Style${glassStyleIdx}`));
	glassStyleIdx++;
}

Then add window.location.reload(); at end of this.change function to page can be refreshed after user select skin

Modify file Modules/Common/ScriptInitialization.ts, add this line:

J.initSkins('ThemePreference');

Remember to add /// <reference path="Helpers/J.initSkins.ts" /> to top of file, your ScriptInitialization.ts should be like this

/// <reference path="../Common/Helpers/LanguageList.ts" />
/// <reference path="Helpers/J.initSkins.ts" />

namespace SerenitySkins.ScriptInitialization {
    Q.Config.responsiveDialogs = true;
    Q.Config.rootNamespaces.push('SerenitySkins');
    Serenity.EntityDialog.defaultLanguageList = LanguageList.getValue;

    if ($.fn['colorbox']) {
        $.fn['colorbox'].settings.maxWidth = "95%";
        $.fn['colorbox'].settings.maxHeight = "95%";
    }

    J.initSkins('ThemePreference'); // <==============

    window.onerror = Q.ErrorHandling.runtimeErrorHandler;
}

In /Modules/Texts.cs, inside Site class > Layout class, add these lines

public static LocalText Glass001Style1 = "Glass 001 Style 001";
public static LocalText Glass001Style2 = "Glass 001 Style 002";
public static LocalText Glass001Style3 = "Glass 001 Style 003";
public static LocalText Glass001Style4 = "Glass 001 Style 004";
public static LocalText Glass001Style5 = "Glass 001 Style 005";
public static LocalText Glass001Style6 = "Glass 001 Style 006";
public static LocalText Glass001Style7 = "Glass 001 Style 007";
public static LocalText Glass001Style8 = "Glass 001 Style 008";
public static LocalText Glass001Style9 = "Glass 001 Style 009";
public static LocalText Glass001Style10 = "Glass 001 Style 010";
public static LocalText Glass001Style11 = "Glass 001 Style 011";

Add a helper function for navigation in /Views/Shared/LeftNavigation.cshtml to make slimScrollBar bigger => easy for dragging, like this:

<script type="text/javascript">
	(function modifySlimScrollbar() {
		setTimeout(() => {
			if ($(".slimScrollBar") && $(".slimScrollBar").width() < 8) {
				$(".slimScrollBar").css("width", "8px");
				$(".slimScrollBar").css("background-color", "#3291c7");
				$(".slimScrollBar").css("margin-right", "1px");
				$(".slimScrollBar").hide(200);
			} else {
				modifySlimScrollbar();
			}
		}, 10);
	})();
</script>

Copy file jquery.vide.js from wwwroot\Scripts and modify ScriptBundles.json in wwwroot\Scripts\site

"~/Scripts/adminlte/app.js",
"~/Scripts/jquery.vide.js", <==============
"~/Scripts/site/SerenitySkins.Web.js",
"dynamic://ColumnsBundle",
"dynamic://FormBundle",

Copy file Content\font-poppins.css and modify Content\site\CssBundles.json to add font to Base element:

{
  "Base": [
    "~/Content/font-open-sans-base64.css",
    "~/Content/font-awesome.css",
    "~/Content/font-poppins.css", <==================
    "~/Content/bootstrap.css",
    "~/Content/css/select2.css",

Donate ^^

If you like my works and would like to support then you can buy me a coffee ☕️ anytime

I would appreciate it!!!