Switch the default blue color of Ngx-Pagination to a different color option

Question

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this?

https://i.sstatic.net/NNuy7.png

This is the HTML code snippet:

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

For CSS customization:

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

I have tried the above CSS as well as similar ones, but it seems that they are not working as expected. Any assistance on this matter would be highly appreciated.

css angular ngx-pagination

Answer 1

Answer №1

Give these modifications a try:

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

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

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

If these changes don't take effect, then I'd like to investigate your code further.

Answer 2

Give these modifications a try:

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

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

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

If these changes don't take effect, then I'd like to investigate your code further.

Answer 3

Answer №2

Success came after implementing the modifications listed below.

Markup

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

Cascading Style Sheets

.my-custom-pagination ::ng-deep .ngx-pagination .current {
    background-color: blue;
  }

Answer 4

Success came after implementing the modifications listed below.

Markup

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

Cascading Style Sheets

.my-custom-pagination ::ng-deep .ngx-pagination .current {
    background-color: blue;
  }

Answer 5

Answer №3

Your solution is accurate and should work correctly. Just be sure to place the CSS class in the proper location, not at the component level where ngx-pagination is being utilized.

There are two ways to ensure the correct placement of the CSS class:

1. Add the CSS class to the style.css file by including the following code in your Angular project's style.css file:

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

2. Alternatively, create a new file and import it into style.css like this:

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

You can view an official live demo with my styling changes in the style.css file here:

Answer 6

Your solution is accurate and should work correctly. Just be sure to place the CSS class in the proper location, not at the component level where ngx-pagination is being utilized.

There are two ways to ensure the correct placement of the CSS class:

1. Add the CSS class to the style.css file by including the following code in your Angular project's style.css file:

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

2. Alternatively, create a new file and import it into style.css like this:

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

You can view an official live demo with my styling changes in the style.css file here:

Switch the default blue color of Ngx-Pagination to a different color option

Answer №1

Answer №2

Answer №3

Similar questions

Executing HTTP requests in ngrx-effects

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

In my PHP script, I'm seeking a solution to include a numeric value and then

Footer that sticks in a vuejs application

Troubleshooting the Issue with Angular Material Dialog Imports

Issue with Angular DevExtreme error popup

What is the method for aligning a button label to the left and an icon to the right?

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

Trouble with buttons in table cells

Employing ngModel within an (click) event in Angular 4

Child div height (with embedded iframe) - issue with responsiveness

Display issue with grid-template-column not appearing

Having trouble with Angular Ng2-file-Upload's Upload.all() method not successfully sending files to the API

Using the CSS property 'clear' creates a significant gap in the layout

Angular allows for dynamic sourcing of iframes

Exploring the wonders of Bootstrap 3 panels and stylish floating images

Get rid of the standard shadow located on the bottom and right of the input text field

CSS - Achieving full width on hover even when the element has a specified width setting

Having trouble compiling my Angular 13 application due to numerous node_module errors

When you hover over HTML tables, they dynamically rearrange or shift positions