Hurry Up, Ends March 14!
Open Closed

Change UI of Administration page and its content #1191


User avatar
0
lalitChougule created
  • ABP Framework version: v3.0.4

  • UI type: Angular

  • DB provider: EF Core

  • Tiered (MVC) or Identity Server Separated (Angular): no / yes

  • Exception message and stack trace: N.A

  • Steps to reproduce the issue: N.A

Hi,

I want to change the UI Administration page and its content, we are using angular material in our project.
How do I do it ?

image.png

image.png


4 Answer(s)
  • User Avatar
    0
    Mehmet created

    Hi @lalitChougule,

    Please see the component replacement document. If you have any questions after reading the doc, please ask in detail.

  • User Avatar
    0
    lalitChougule created

    Hi @lalitChougule,

    Please see the component replacement document. If you have any questions after reading the doc, please ask in detail.

    Hi @Mehmet ,

    I just want to change the css of the buttons and few colors here and there, for that too I need to replace whole component ?

  • User Avatar
    0
    Mehmet created

    You can override the styles easily.

    1- Find the target class name via the browser's dev-tools:

    Screen Shot 2020-12-29 at 10.41.34.png

    2- Add custom style to the src/styles.scss file like this:

    // styles.scss
    
    .user-avatar-big {
      border-radius: 3px !important;
      border: 1px solid red;
    }
    

    That's it, see the result:

    image.png

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Learn More, Pay Less
33% OFF
All Trainings!
Get Your Deal
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