Overriding css of branding logo in Blazor #4784 | Support

balessi75 created one year ago

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)

0

maliming created one year ago
Support Team Fullstack Developer

hi

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

balessi75 created one year ago

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

maliming created one year ago

Support Team Fullstack Developer

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)
    //...
});

Have an answer to this question? Log in and write your answer.