Open Closed

Customize LeptonX styles and Bootstrap styles #6268


User avatar
0
Spospisil created
  • ABP Framework version: v7.3
  • UI Type: Blazor WASM
  • Database System: EF Core (PostgreSQL)
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes

How can I override the LeptonX styles for the UI elements within the theme? I'm not just referring to the the top/side menu, but the content area itself of the theme. The documentation links on ABP's site are very confusing in terms of step by step how to do this.


7 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Did you check this? https://docs.abp.io/en/commercial/latest/themes/lepton-x/blazor?UI=Blazor#customization

  • User Avatar
    0
    Spospisil created

    Hi,

    Of course I've seen that, but like my original question stated I'm specifically referring to the content section of the LeptonX theme. The link you provided seems to only address side and top menu only. I'd like full control over all styling both LeptonX and Bootstrap related elements.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Have you given it a try? You can see the color of the content has been changed.

    If you face any problems during the customization process, please let me know.

  • User Avatar
    0
    Spospisil created

    Yes,I have tried it....and it sort of works. Can you be more specific in terms of exactly what in the red.css and bootstrap-red.css files need to change to make the button red like you show?

    Also, once I get this figured out, I want to make this new theme the default theme. How is that accomplished via the Configure<LeptonXThemeOptions> code block?

    Configure<LeptonXThemeOptions>(options =>
    {
        // Removing existing themes
        options.Styles.Remove(LeptonXStyleNames.Light);
    
        // Adding a new theme
        options.Styles.Add("red", 
            new LeptonXThemeStyle(
            LocalizableString.Create<YourResource>("Theme:Red"),
            "bi bi-circle-fill"));
    });
    
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Can you be more specific in terms of exactly what in the red.css and bootstrap-red.css files need to change to make the button red like you show?

    You can copy the light.css and bootstrap-light.css to wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/ folder and rename them.

    Now you can see all the style source code and you can change it according to your needs, for example; I changed the color of a tag here

    Also, once I get this figured out, I want to make this new theme the default theme. How is that accomplished via the

    You can try this:

    Configure<LeptonXThemeOptions>(options =>
    {
        options.Styles.Add("red", 
            new LeptonXThemeStyle(
            LocalizableString.Create("Theme:Red"),
            "bi bi-circle-fill"));
    
        options.DefaultStyle = "red";
        
    });
    
  • User Avatar
    0
    Spospisil created

    Thanks for that, however it's still not working. I believe you are looking at my other ticket (https://support.abp.io/QA/Questions/6277#answer-3a0f5070-19dd-0a22-eeaf-6756523de1ed) that reproduces the issue I'm having with my custom theme not being applied properly.

  • User Avatar
    0
    Spospisil created

    Hi,

    Running abp bundle in the Blazor project folder fixed this remaining issue. Thank you for your help.

    Steve

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15