As a second approach, you can replace LeptonXStyleProvider
implementation in your application instead customizing application layout.
[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(LeptonXStyleProvider))]
public class MyLeptonXStyleProvider : LeptonXStyleProvider
{
public ICurrentTenant CurrentTenant { get; }
public MyLeptonXStyleProvider(
IHttpContextAccessor httpContextAccessor,
IOptions<LeptonXThemeOptions> leptonXThemeOption,
ICurrentTenant currentTenant) : base(httpContextAccessor, leptonXThemeOption)
{
CurrentTenant = currentTenant;
}
public override async Task<string> GetSelectedStyleAsync()
{
if (CurrentTenant.Name == "Volosoft")
{
return "blue"; // It'll load blue.css (don't use '.css' extension here)
}
return await base.GetSelectedStyleAsync();
}
}
Make sure cookies are deleted, otherwise the client will load the last css after JS is initialized. To disable JavaScript style loading by overriding the Themes\LeptonX\Global\scripts\style-initializer.js
file with the following customized version:
(function () {
window.initLeptonX = function (layout) {
leptonx.init.run();
}
})();
Hi, it's not provided by default and and LeptonXThemeOptions
is not a tenant-specific option. You can implement something different to make tenant-specific styles.
There is a section in the layout like below
<head>
@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)
<title>@title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="description" content="@ViewBag.MetaDescription" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml">
<!-- 👇 You can customize this section in cshtml 👇 -->
<link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
<link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />
<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />
You can access the entire page code by downloading LeptonX source code
Thanks for your detailed explanation, I'm creating another internal issue for the angular version, we'll fix it in next releases
For the angular project, can you share more information? Which button do you refer as 'the green button' maybe you can share a screenshot to help us understand better
Ok, It seems it's a bug on single-layer module template. I'm creating an internal issue for that and we'll fix it soon.
You can use the following steps to replace leptonx with basic theme.
Replace using statements
using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX;
using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Bundling;
with
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling;
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic;
Replace typeof(AbpAspNetCoreMvcUiLeptonXThemeModule),
with typeof(AbpAspNetCoreMvcUiBasicThemeModule),
Replace the ConfigureBundles()
method inside like below:
private void ConfigureBundles()
{
Configure<AbpBundlingOptions>(options =>
{
options.StyleBundles.Configure(
LeptonXThemeBundles.Styles.Global,
bundle =>
{
bundle.AddFiles("/global-styles.css");
}
);
});
}
I just created application with the BasicTheme and couln't reproduce the problem.
Which application template did you create?
You can use this wildcard pattern to receive any preview or stable future leptonx 2.3 updates: 2.3.*-*
Hi, Support Team!
I upgraded the Blazor server solution to 7.2.2 and I get this error:
If I press reload, application loads OK. I log in, same error, then Reload, application loads OK.
The only difference from a standard template is that I have added the module Volo.Account.Pro, not as package.
Can you spot what could be wrong?
Also, when I published the app, folder profile, when I try to start it from the console I get:
Tks.
Can you tell me the LeptonX version in .csproj file?
It should be2.3.x
. Currently, 2.3.0-rc.1 version is released.
It seems, you inherited from different MainHeaderToolbar
and replaced different MainHeaderToolbar
in the service collection.
Can you check both MainHeaderToolbar in .razor file and .cs file. Both should be exact same type from the same namespace:
@inherits Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader.MainHeaderToolbar
namespace MyProject.Blazor.Components.Layout
{
[ExposeServices(typeof(Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader.MainHeaderToolbar))]
[Dependency(ReplaceServices = true)]
public partial class MyMainHeaderToolbar
{
public string Name = "My Main Header Toolbar";
}
}
Hi @dkaczor
This is shipped with v7.2
You can update your project to v7.2 to get the changes.