Removing/changing copyright footer in LeptonX theme #10329

15 Answer(s)

• 

  0

  AI-Bot created 10 days ago

  Support Team ABP Agent

  1. Solution

  For LeptonX + Angular (ABP 10) there is currently no built‑in setting or simple CSS switch to change/remove the 2026© Lepton Theme by Volosoft footer.
  The supported way is to own the layout (or theme source) and register your own layout component via the Angular component replacement mechanism.

  A. Recommended approach – replace the LeptonX Application Layout

  1. Download LeptonX source (commercial)
     In ABP Suite → Tools → Download LeptonX Source, download the Angular LeptonX package.
     This gives you the actual layout component HTML/TS so you can start from a copy instead of from scratch.

  2. Copy the application layout component into your Angular app

     From the downloaded source, locate the application layout component (it contains the current footer markup).
     Copy that component (TS + HTML + SCSS) into your Angular project under e.g. src/app/layout/custom-application-layout.

  3. Edit the footer section

     In your copied HTML template, remove or change the footer markup – e.g. delete the copyright text or replace it with your own footer.

  4. Register your layout via ReplaceableComponentsService

     In a root module (usually AppModule), register your custom layout component as the implementation for the LeptonX application layout:

  import { NgModule } from '@angular/core';
     import { ReplaceableComponentsService } from '@abp/ng.core';
     import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
     import { CustomApplicationLayoutComponent } from './layout/custom-application-layout/custom-application-layout.component';
  
     @NgModule({
       declarations: [CustomApplicationLayoutComponent],
       // imports: [...]
     })
     export class AppModule {
       constructor(replaceableComponents: ReplaceableComponentsService) {
         replaceableComponents.add({
           component: CustomApplicationLayoutComponent,
           key: eThemeLeptonXComponents.ApplicationLayout,
         });
       }
     }
  

  Once this is in place, your layout (with your footer or no footer at all) is used everywhere, and the original Volosoft copyright footer disappears.

  B. About “CSS only” alternatives

  LeptonX does not expose a documented CSS variable or configuration flag specifically for hiding the footer; the theme is designed to be customized via:

  • Component replacement (Angular)
  • Partial / component overrides (MVC, Blazor)

  Because of that, the supported and future‑proof way on Angular is what’s described above: replace the layout component (or, if a dedicated footer component is used in your version, replace that footer component via the same mechanism).

  C. “Promised fix / new theme” status

  For ABP 10 and current LeptonX for Angular, the situation is:

  • There is no runtime setting (in appsettings, UI, or CSS variables) to change/remove the footer text.
  • Customization is done via component replacement / theme source customization as above.

  If you want this to become a simple configuration option, the official channel is to open a feature request or continue the discussion on the support portal so it can be tracked as a product change.

  ---

  2. Sources

  • Angular component replacement (used by LeptonX to switch layouts/components):
    https://abp.io/docs/latest/ui/angular/component-replacement
  • LeptonX theme intro & customization overview (Angular):
    https://abp.io/community/articles/z0fqq5di
  • Footer customization example for LeptonX (MVC/Blazor – same general idea of overriding footer/layout):
    https://abp.io/docs/latest/ui-themes/lepton-x/mvc#customizing-the-footer-section

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  improwise created 10 days ago

  Real support please

  (BTW, the suggested AI response is incorrect as NgModule is no longer used from what I know)

  Save Cancel
• 

  0

  maliming created 10 days ago

  Support Team Fullstack Developer

  hi

  Is this footer from MVC or from Angular?

  Thanks

  Save Cancel
• 

  1

  maliming created 10 days ago

  Support Team Fullstack Developer

  For Angular, you can try:

  Create footer.component.ts:

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-footer',
    template: `
      <div class="lpx-footbar">
        <div class="lpx-footbar-copyright">
          <span>© 2026 Your Company</span>
          <small class="text-muted">All rights reserved.</small>
        </div>
      </div>
    `,
  })
  export class FooterComponent {}
  

  In your root component (e.g., app.component.ts):

  import { Component, OnInit, inject } from '@angular/core';
  import { ReplaceableComponentsService } from '@abp/ng.core';
  import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
  import { FooterComponent } from './footer/footer.component';
  
  export class AppComponent implements OnInit {
    private readonly replaceable = inject(ReplaceableComponentsService);
  
    ngOnInit() {
      this.replaceable.add({
        key: eThemeLeptonXComponents.Footer,
        component: FooterComponent,
      });
    }
  }
  

  https://abp.io/docs/latest/framework/ui/angular/component-replacement

  Thanks.

  Save Cancel

  1
• 

  0

  improwise created 9 days ago

  Hi,

  Thanks.

  But why is this even needed? What is the reason for this being there to begin with as I find it hard to imagine a business case where any of your customers would want a Copyright Volosoft in their app? It is kind of like if Microsoft would add a Copyright Microsoft to every new document in Word by default and then let people know how to remove it if they ask for it :)

  Also, I believe that the only way to find out what component to actually replace with component replacement would be to either ask for it or reverse engineer the LeptonX theme, both which seems unnecessary to me.

  Seems like we must be missing something here compared to just not having to to this (or even better, have a optional Copyright message which you could both enable/disable and modify via settings).

  Save Cancel
• 

  0

  improwise created 9 days ago

  I notice there are some problems with the documentation in this regard, where the "LeptonX Lite" mentions stuff that isn't mentioned for LeptonX, like the stuff about Footer component.

  https://abp.io/docs/latest/ui-themes/lepton-x-lite/angular

  https://abp.io/docs/latest/ui-themes/lepton-x/angular

  And from what I can see, there are no backlinks from the non Lite to to the Lite documentation

  There is also a bit of confusion regarding the Naming, as in some places, LeptonX means only the commercial version and in others, there seem to be mentioned just "Lepton" with regards to the free version.

  Save Cancel
• 

  0

  improwise created 9 days ago

  BTW, this link seems broken

  

  Save Cancel
• 

  1

  maliming created 9 days ago

  Support Team Fullstack Developer

  hi

  I will provide feedback to the team.

  I think we can add footer.component.ts in the Angular app template.

  Thanks

  Save Cancel

  1
• 

  0

  maliming created 9 days ago

  Support Team Fullstack Developer

  The LeptonX Lite LeptonX link seems no problem.

  Save Cancel
• 

  0

  improwise created 8 days ago

  [maliming] said: hi

  I will provide feedback to the team.

  I think we can add footer.component.ts in the Angular app template.

  Thanks

  Have not used the other templates in a while but I believe that it is something that would be nice to have for MVC/Blazor as well if there is a similar situation there. But still believe that it should not require an action to hide the Copyright Volosoft, rather if you wanted it to be shown.

  Addint the footer.component.ts would probably be a nice workaround for now though, as well as updating the documentation so what is written for LeptonX Lite is also mentioned for the commercial package, as I would imagine that is where most commercial customers would look.

  Save Cancel
• 

  0

  improwise created 8 days ago

  [maliming] said: The LeptonX Lite LeptonX link seems no problem.

  That specific problem is for the MVC version.

  Save Cancel
• 

  0

  maliming created 8 days ago

  Support Team Fullstack Developer

  That specific problem is for the MVC version.

  Thanks, https://github.com/abpframework/abp/pull/24719

  Save Cancel
• 

  0

  maliming created 8 days ago

  Support Team Fullstack Developer

  hi

  We will add footer.component.ts in the Angular app template(MVC and Blazor templates already have it).

  Then the user can easily change the footer content in the solution.

  Thanks.

  Save Cancel
• 

  0

  improwise created yesterday

  Seems like this footer is still displayed when running the API (.Host) project but only on error pages, not login pages for same URL etc.

  

  

  Save Cancel
• 

  0

  maliming created yesterday

  Support Team Fullstack Developer

  hi

  This page is MVC, and the layout is application.

  You need to override it in MVC with a new layout.

  I will share a solution sonn.

  Thanks.

  Save Cancel