dfaruque / SerenitySkins

SerenitySkins

!!! RIGHT NOW THESE SKINS ARE JUST FOR SERENE VERSION (FREE VERSION), STARTSHARP HAS NOT SUPPORTED YET

SKINS: GLASS 001

SKINS: DARK 001

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/dark001/theme.less"; /* <======================== */
@import "../skins/glass001/theme.less"; /* <======================== */

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

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

Q.addOption(select, 'dark-001', Q.text('Site.Layout.Dark001'));

let glassStyleIdx = 1;
while (glassStyleIdx <= 18) {
	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();
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(); // <==============
    J.initSkins('ThemePreference'); // <==============

    window.onerror = Q.ErrorHandling.runtimeErrorHandler;
}

In /Modules/Texts.cs, inside Site class > Layout class, add this line

public static LocalText Dark001 = "Dark 001";

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>

Add new font into /Views/Shared/_LayoutHead.cshtml:

<link rel="home" id="ApplicationPath" href="~/" />
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />	
@Html.StyleBundle("Base")
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"> @* <========== add this line*@
@Html.StyleBundle("Site")