Open Closed

Overriding css of branding logo in Blazor #4784


User avatar
0
balessi75 created

ABP Commercial 7.0.1 / Blazor Server / EF / Non tiered / Seperated Host and Tenant DBs

Hi, we have a requirement to dynamically change the branding logo on the upper left of the screen when logged in (2 different possible logos).

We understand that we can override the DefaultBrandingProvider to specify a LogoUrl and LogoReverseUrl dynamically.

The problem we are having though is how to specify different sizing depending on which logo we show.

For example, the following works for one logo... but a different height and top value needs to be defined for the other logo.

.navbar-brand {
    height: 15px;
    top: 26px;
}```

3 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can add a global javascript to dynamically change its height and top according to the logo.

  • User Avatar
    0
    balessi75 created

    Thanks, would you have anything you can point me to in order to accomplish this in the Blazor Server ABP template?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    private void ConfigureBundles()
    {
        Configure<AbpBundlingOptions>(options =>
        {
            // MVC UI
            options.StyleBundles.Configure(
                LeptonXThemeBundles.Scripts.Global,
                bundle =>
                {
                    bundle.AddFiles("/global-script.js");
                }
            );
        });
    }
    
    $(function () {
        $(".lpx-login-sm-logo").height(100)
        //...
    });
    
    

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11