Im finding the documentation to be really lacking in a lot of areas which is a shame. Something as simple as showing/hiding things seems to either be missing or impossible to find.
I want to use the boxed layout, and the light style. Ive managed to force the light style like this, but I cant see any options to force boxed layout. I dont need it to be selectable in the app. not do i need any of the options drop down menus or the breadcrumb area but I seem to be forced to use them or have to figure out how to override templates. Surely there should just be an option to hide the bread crumb, or fix the layout?
private void ConfigureTheme()
{
Configure<LeptonXThemeOptions>(options =>
{
options.DefaultStyle = LeptonXStyleNames.Light;
options.Styles.Remove(LeptonXStyleNames.Dark);
options.Styles.Remove(LeptonXStyleNames.System);
options.Styles.Remove(LeptonXStyleNames.Dim);
});
Configure<LeptonXThemeMvcOptions>(options =>
{
options.ApplicationLayout = LeptonXMvcLayouts.TopMenu;
});
Configure<LeptonXThemeBlazorOptions>(options =>
{
options.Layout = LeptonXBlazorLayouts.TopMenu;
});
}
7 Answer(s)
-
0
To set the layout options for LeptonX in your ABP application, you are already on the right track with your configuration. Here’s how you can address your specific requirements:
- Force Light Style
You are correctly setting the default style to Light and removing the other styles:
Configure<LeptonXThemeOptions>(options => { options.DefaultStyle = LeptonXStyleNames.Light; options.Styles.Remove(LeptonXStyleNames.Dark); options.Styles.Remove(LeptonXStyleNames.System); options.Styles.Remove(LeptonXStyleNames.Dim); });- Set Boxed Layout
For MVC:
Configure<LeptonXThemeMvcOptions>(options => { options.ApplicationLayout = LeptonXMvcLayouts.Boxed; });For Blazor:
Configure<LeptonXThemeBlazorOptions>(options => { options.Layout = LeptonXBlazorLayouts.Boxed; });Replace
TopMenuwithBoxedto use the boxed layout.Hide Breadcrumbs
For Blazor, LeptonX renders its own breadcrumbs. To hide them, you need to override the Breadcrumbs component. See the official guide for overriding components:For MVC, you can override the relevant partial view or layout to remove the breadcrumb area.
Hide Options Dropdown Menus
If you want to remove the options dropdowns (such as style switchers), you will need to override the corresponding view/component in your project. There is currently no direct configuration option to hide these; overriding is the recommended approach.
Summary of Configuration:
private void ConfigureTheme() { Configure<LeptonXThemeOptions>(options => { options.DefaultStyle = LeptonXStyleNames.Light; options.Styles.Remove(LeptonXStyleNames.Dark); options.Styles.Remove(LeptonXStyleNames.System); options.Styles.Remove(LeptonXStyleNames.Dim); }); Configure<LeptonXThemeMvcOptions>(options => { options.ApplicationLayout = LeptonXMvcLayouts.Boxed; }); Configure<LeptonXThemeBlazorOptions>(options => { options.Layout = LeptonXBlazorLayouts.Boxed; }); }To hide breadcrumbs and options menus, override the relevant components or views in your project.
Sources:
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
- Force Light Style
-
0
LeptonXBlazorLayouts.Boxed doesnt exist!
-
0
hi
What is your UI type and abp&leptonx package version?
Thanks,
-
0
Im using Blazor Server with blazorize. It all updated to the latest version except for blazorize which it on v1.8.1
-
0
hi
You can try to add a
blazor-global-styles.jsjs file with code below and register to bundle system:if (!localStorage.getItem("lpx:containerWidth")) { localStorage.setItem("lpx:containerWidth", "boxed"); }options.ScriptBundles.Configure(BlazorLeptonXThemeBundles.Scripts.Global, bundle => { bundle.AddFiles("/blazor-global-styles.js"); });Thanks.
-
0
I already had this in the global scripts, not sure why that wasn't working, added your bit in and it started working. Is there and documentation for this anywhere? Im not a js dev I only really do C# so I wouldn't know where to look for any of this?
-
0
hi
The
containerWidthdoes not support configuration at this time. I will create an internal issue.Thanks.
