!!! RIGHT NOW THESE SKINS ARE JUST FOR SERENE VERSION (FREE VERSION), STARTSHARP HAS NOT SUPPORTED YET
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")