ABP Blazor Server custom theme #6380

mdk_s73 created 4 months ago

ABP Framework version: 7.4.2
UI Type: Blazor Server
Database System: EF Core (SQL Server)

Good afternoon,

We are struggling to load our custom theme on certain pages. It seems to work on the default page and any extra pages we add but It fails on any account pages, most of the pages that pre-exist.

We have followed the below article and been through it several times but unfortunately we have not been able to solve it. https://docs.abp.io/en/commercial/latest/themes/lepton-x/blazor?UI=BlazorServer

This is the code we have added to our BlazorModule.cs file

    Configure&lt;LeptonXThemeOptions&gt;(options =>
    {
        options.Styles.Add("CustomTheme",
                new LeptonXThemeStyle(
                LocalizableString.Create&lt;ProjectResource&gt;("CustomTheme"),
       "bi bi-circle-fill"));

        options.DefaultStyle = "CustomTheme";

        // Removing existing themes
        options.Styles.Remove(LeptonXStyleNames.Dark);
        options.Styles.Remove(LeptonXStyleNames.System);
        options.Styles.Remove(LeptonXStyleNames.Dim);

        options.Styles.Clear();
    });
	
Configure&lt;LeptonXThemeMvcOptions&gt;(options =>
    {
        options.ApplicationLayout = LeptonXMvcLayouts.TopMenu; 
    });

    Configure&lt;LeptonXThemeBlazorOptions&gt;(options =>
    {
        options.Layout = LeptonXBlazorLayouts.TopMenu;
    });

As far as we understand the login/register pages use the MVC options which is why we have set the layout in both places.

We have the custom CSS file stored in the below as per the documentation

_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\top-menu\css\ bootstrap-CustomTheme.css _content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\top-menu\css\ CustomTheme.css

The end result is as follows:

On the dashboard we see what we assume is the correct path in the network tab:

https://localhost:44351/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/bootstrap-CustomTheme.css

On the login page we see it trying to get the CSS from a different location to the dashboard screen and the layout is also pointing to the side-menu and not the top-menu

https://localhost:44351/Themes/LeptonX/Global/side-menu/css/bootstrap-CustomTheme.css

Finally some other pages such as the Account Manage page is not loading any styles either and it appears to be getting the CSS from the wrong location, however it is using the right layout option.

https://localhost:44351/Themes/LeptonX/Global/top-menu/css/bootstrap-CustomTheme.css

In summary:

Dashboard pages and any custom pages are loading correctly.
Any account pages seem to be incorrect, in terms of CSS path or layout option.
We are not overriding any of the pages that are loading the CSS incorrectly.

Any help would be greatly appreciated and if we can provide any other information then please let us know.

2 Answer(s)