Open Closed

Angular logo replacement #256


User avatar
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)
  • User Avatar
    0
    armanozak created

    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.

  • User Avatar
    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?

  • User Avatar
    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?

  • User Avatar
    0
    alper created
    Support Team Director

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

  • User Avatar
    0
    armanozak created

    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.

  • User Avatar
    0
    armanozak created

    Hi,

    Can we close this issue?

    Thanks.

  • User Avatar
    0
    saintpoida created

    Umm yeah i think so

  • User Avatar
    0
    armanozak created

    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.

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