BLACK FRIDAY
From November 21
to December 02
99Days : 99Hrs : 99Min : 99Sec
SAVE UP TO$3K
Also valid for the
existing customers!
Open Closed

Angular logo replacement #256


0
saintpoida created
  • ABP Framework version: v2.9.0
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): Tiered and seperated
  • Exception message and stack trace:
  • Steps to reproduce the issue:

I can see the docs about replacing the logo component which i have not tried yet but it only looks like it would allow me to set a single logo. To be useable with your base set of theme styles how can we specify the normal and reversed logo? I can see what looks to be css properties/variables called --logo and --logo-reverse but how would i go about replacing them in my project?

Alternatively using the logo component replacement how can I hook into some property to know if i should show reversed or normal logo?


8 Answer(s)
  • 0
    armanozak created
    Support Team

    Hi,

    Unfortunately, there is no hook that directly signals a dark/light background. The /api/lepton-theme-management/settings endpoint responds with a style number, e.g. 4 and that is stored in the layout state. You can reach the style number via the getStyle method of the LayoutStateService in your logo component.

    Another way is, replacing the PNG files inside assets/images/logo directory. This may be more practical if the logo does not change per tenant.

    On the other hand, both means require knowing which style number has a light background. Currently, only style 4 (theme 5) has a light background. Yet, of course, that may change. We will take this into consideration and may introduce an alternative indicator in the future.

    Please let me know if this answers your question.

    Have a nice day.

  • 0
    saintpoida created

    Ok so that works for primary app view of angular. Now where to do I find and override the component with selector abp-account-logo which is what is shown on the angular login page?

    Also can you guys move the default background style for the default logos to an additional class so that when we override the logo component we can just drop that class and not have to overload the css with background: none?

  • 0
    saintpoida created

    Similarly for Identity login endpoint which i have seperated I have overloaded branding provider and provided two urls for LogoUrl and LogoReverseUrl.

    I can then see in the rendered login page two css vars --logo and --logo-reverse which have the correct URLs. However the login page doesnt seem to have a dark theme? And its picking the logo reverse variable, how can i fix that?

  • 0
    alper created
    Support Team

    then you rename your logo images. logo.png => logo-reverse.png logo-reverse.png => logo.png

  • 0
    armanozak created
    Support Team

    Hi,

    You can replace the account login logo too.

    1. Create a second logo component.
    import { Component } from '@angular/core';
    
    @Component({
      template: `
        <div class="account-brand p-4 text-center mb-1">
          <a class="navbar-brand" routerLink="/" [style.background-image]="logoUrl"></a>
        </div>
      `,
    })
    export class LogoComponent {
      logoUrl = 'url(http://satyr.io/100x50/acdc?text=LOGO)';
    }
    
    1. Dispatch AddReplaceableComponent action.
    this.store.dispatch(
      new AddReplaceableComponent({
        component: LogoComponent,
        key: eAccountComponents.Logo,
      }),
    );
    

    We will discuss your idea of moving the default background style for the default logos to an additional class. We are currently making a few changes about the logos. Therefore, it may or may not make sense. We will see, but thanks for the idea. Much appreciated.

  • 0
    armanozak created
    Support Team

    Hi,

    Can we close this issue?

    Thanks.

  • 0
    saintpoida created

    Umm yeah i think so

  • 0
    armanozak created
    Support Team

    Hi,

    I have good news for you. As of ABP 3.0, replacing logos are quite simple. Please refer to the migration guide:

    https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3#lepton-theme-logos-commercial

    Have a nice day.