CODEWITHSUNDEEP
cssangularngx-pagination
Surendra Mourya
Surendra Mourya

Reputation: 611

Ngx-Pagination change default blue color to other color

I am using ngx-pagination in Angular 16 application and I want to customize the default blue color into another , Can anyone help me.

enter image description here

Html code:

<div>
  <pagination-controls></pagination-controls>                       
</div>

CSS

.ngx-pagination .current{
  color: #ffffff !important;
  background-color: red !important;
}

Tried with above and similar css, it do not works.

Any help will be appreciated.

Upvotes: 0

Views: 394

Answers (3)

Daniel V&#225;gner
Daniel V&#225;gner

Reputation: 846

Your code is correct, and it should work. The only thing you need to ensure is that you place the CSS class correctly. It should not be at the component level where you are using ngx-pagination.

You have two options for placing the CSS class correctly:

Add the CSS class to the style.css file: You can add the following code to the style.css file in your Angular project:

.ngx-pagination .current {
  color: #ffffff !important;
  background-color: red !important;
}

Or create new file and import into style.css like this.

@import 'path/to/pagination-customization.css';

there is oficial live demo with my changes in style.css have a look pls.

https://angular-zgr18t.stackblitz.io

Upvotes: 0

Surendra Mourya
Surendra Mourya

Reputation: 611

It worked after below changes.

HTML

<pagination-controls class="my-pagination"><pagination-controls>

CSS

.my-pagination ::ng-deep .ngx-pagination .current {
    background: red;
  }

Upvotes: 0

Bala Vigness
Bala Vigness

Reputation: 455

Try these changes ,

/* Change the background color of the current page */
.pagination-current {
  background-color: red !important;
}

/* Change the text color of the current page */
.pagination-current a {
  color: #ffffff !important;
}

/* Change the background color of the page buttons */
.pagination-controls button {
  background-color: red !important;
}

If it is not working means , I want to Inspect your line of code further more

Upvotes: 0

Related Questions