Open Closed

How can I apply a custom theme to the Angular UI? #506


User avatar
0
GregB created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: v3.2.1
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): Tiered
  • Exception message and stack trace: N/A
  • Steps to reproduce the issue:

How can I add a custom theme to an ABP app using Angular UI?


5 Answer(s)
  • User Avatar
    0
    armanozak created

    Hi,

    Is it the Lepton themes you are asking about?

  • User Avatar
    0
    GregB created

    Hi @arnanozak.

    No, I'd like to integrate another theme. The specific theme is not really important, it might be a custom theme or something bought from Theme Forrest (or similar). How do I include CSS and JS for another theme and how to I alter the HTML structure of the various components as needed by the theme.

    Another way of thinking about it is how do I build an alternative to the Lepton theme?

    Thanks

  • User Avatar
    0
    armanozak created

    Hi,

    You cannot alter the HTML structure of built-in components, but they are Bootstrap compliant. There is nothing specific to Lepton theme in the HTML.

    In addition, a limited number of components are replaceable: https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement

    Including CSS and JS files is described here: https://angular.io/guide/workspace-config#style-script-config

    Please let me know if this answers your question.

  • User Avatar
    0
    GregB created

    (I've removed my last response as it was incorrect).

    I think this information answers my question for now.

    Thanks @armanozak

  • User Avatar
    0
    bilal@mastery365.ca created

    So we cannot change the behavoiur/location of menu e.g If we want to move the meu from top to left in community version of abp?

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 13, 2025, 04:08