Open Closed

Overriding the –lpx-brand variable from Side Menu css in the Bootstrap theme #8521

User avatar
0
okains created
  • ABP Framework version: v8.x
  • UI Type: Blazor Server
  • Database System: EF Core SQL Server
  • Tiered (for MVC) or Auth Server Separated (for Angular): no

Having trouble overriding this color in the admin UI:

Seems to be the –lpx-brand color, set in the side-menu/css/light.css file. I have all other variable overridden in my blazor-global-styles.css file as so:

But the side menu css seems to be taking precedence here. I can’t even set the styles explicitly as the side menu css is taking precedence and it set to !important:

I would like to just be able to set everything in the blazor-global-styles.css if possible. If not, is there another way for me to accomplish this?

Thanks,

Karim

Go to accepted answer
5 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    The style was not apply, It seems there is an issue with the path, can you check it?

  • User Avatar
    0
    okains created

    This is out of the box ABP, I haven't done anything. The Blazor Global Styles are applied in every other part of the app, and I can modify them no problem. It is just this one particular CSS variable --lpx-brand that is set in the side menu stylesheet that is causing problems.

    Any ideas?

    Thanks,

    Karim

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I will check it

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Because the bootstrap-light/dark.css is dynamically loaded, you should make sure blazor-global-styles.css is below it

    you can try

    /* Your Global Styles */

.pagination .page-item.active .page-link{
    background-color: black !important;
}

.form-check-input:checked{
    background-color: black !important;
    border-color: black !important;
}

    App.razor

    .....

<body class="abp-application-layout @rtl">
    <link rel="stylesheet" href="/blazor-global-styles.css"> // add blazor-global-styles.css to body
    
.....
  • User Avatar
    0
    okains created

    OK that worked, thanks.

Assignee
User avatar liangshiwei
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.1.0-preview. Updated on November 04, 2025, 06:41