Reputation: 869
Here is my pagination control:
I am trying to make the labels of the pagination purple, so far I have been unable to override it. Here is my CSS:
/* pagination */
.pagination {
height: 36px;
margin: 18px 0;
color: #6c58bF;
}
.pagination ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
margin-left: 0;
color: #ffffff;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination li {
display: inline;
color: #6c58bF;
}
.pagination a {
float: left;
padding: 0 14px;
line-height: 34px;
color: #6c58bF;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
}
.pagination a:hover,
.pagination .active a {
background-color: #6c58bF;
color: #ffffff;
}
.pagination a:focus {
background-color: #6c58bF;
color: #ffffff;
}
.pagination .active a {
color: #ffffff;
cursor: default;
}
.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
color: #999999;
background-color: transparent;
cursor: default;
}
.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
.pager {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
text-align: center;
color: #6c58bF;
*zoom: 1;
}
.pager:before,
.pager:after {
display: table;
content: "";
}
.pager:after {
clear: both;
}
.pager li {
display: inline;
color: #6c58bF;
}
.pager a {
display: inline-block;
padding: 5px 14px;
color: #6c58bF;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pager a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next a {
float: right;
}
.pager .previous a {
float: left;
}
.pager .disabled a,
.pager .disabled a:hover {
color: #999999;
}
/* end */
All of the labels (active) are still blue. How can I override it? Thanks.
Upvotes: 42
Views: 107217
Reputation: 323
Includes even the disabled button
/* Pagination Color */
.pagination > li > a
{
background-color: #343A40;
color: #ffffff;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
color: #fff;
background-color: #1D2124;
border-color: #ddd;
}
.pagination > .active > a
{
color: white;
background-color: #007BFF !Important;
border: solid 1px #007BFF !Important;
}
.pagination > .active > a:hover
{
background-color: #0066CC !Important;
border: solid 1px #0066CC;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > a,
.pagination > .disabled > a:focus {
color: #fff !Important;
background-color: #343a40 !Important;
border-color: #343a40;
}
Upvotes: 0
Reputation: 67
For Bootstrap 5:
.pagination {
--bs-pagination-color: #808080;
--bs-pagination-hover-color: #6d6d6d;
--bs-pagination-active-color: #fff;
--bs-pagination-active-border-color: #33055b;
--bs-pagination-active-bg: #502a71;
--bs-pagination-hover-bg: #ffc0f7;
}
From bootstrap docs: https://getbootstrap.com/docs/5.3/components/pagination/
Upvotes: 2
Reputation: 767
Just change this SASS variables with your colors:
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-color: $gray-300 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
Upvotes: 8
Reputation: 408
CSS : Add below active style changes to override existing behavior.
.pager li .active{
background-color: rgb(181, 181, 214);
color: rgb(9, 9, 80);
}
HTML : How to apply this as class
<li><a href='#' class='active'>1</a></li>
Upvotes: 0
Reputation: 11578
For Bootstrap 4 4.5:
(In this example in CSS in dark theme, but of course you can change the colours)
.page-link {
position: relative;
display: block;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.25;
color: #d9d9d9 !important;
background-color: #4f4f4f !important;
border: 1px solid #262626 !important;
}
.page-link:hover {
z-index: 2;
color: #fff !important;
text-decoration: none;
background-color: #a4a4a4 !important;
border-color: #dee2e6;
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #808080 !important;
border-color: #353535;
}
Upvotes: 1
Reputation: 541
.pagination > li > a
{
background-color: white;
color: #5A4181;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
color: #5a5a5a;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a
{
color: white;
background-color: #5A4181 !Important;
border: solid 1px #5A4181 !Important;
}
.pagination > .active > a:hover
{
background-color: #5A4181 !Important;
border: solid 1px #5A4181;
}
Upvotes: 54
Reputation: 658
This is not too hard once you get all of the right classes. So long as your CSS comes after the bootstrap CSS, this takes care of everything.
I'm using bootstrap 3.3.5.
My default settings look like this:
I apply the following CSS to color all the elements including the active page. Copy and change colors as desired:
.pagination > li > a
{
background-color: white;
color: purple;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
color: purple;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a
{
color: white;
background-color: purple;
border: solid 1px purple;
}
.pagination > .active > a:hover
{
background-color: purple;
border: solid 1px purple;
}
This is the result.
Upvotes: 7
Reputation: 21685
This is the selector and style rules in Boootstrap 3.3.5 that controls the background color of a pagination element:
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 3;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
Your selectors are not specific enough. Their specificity value is 0 0 2 1
and the Bootstrap selectors is 0 0 2 2
.
Your Specificity Values:
.pagination a:hover = `0 0 2 1`
.pagination .active a = `0 0 2 1`
.pagination a:focus = `0 0 2 1`
0 0 1 0
for the class .pagination
, 0 0 1 0
for a pseudo class :hover
and 0 0 0 1
for the element a
.
Bootstrap Specificity Values:
.pagination > li > a:focus = `0 0 2 2`
0 0 1 0
for the class .pagination
, 0 0 1 0
for a pseudo class :focus
and 0 0 0 1
for each element, a
and li
.
Here's what you can do:
#eee
to purple.Option #1
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 3;
color: #23527c;
background-color: purple;
border-color: #ddd;
}
Option #2
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 3;
color: #23527c;
background-color: purple;
border-color: #ddd;
}
/* ...a bunch of other CSS... */
/* Now do one of the following options */
/* SAME SPECIFICITY OPTION - 0 0 2 2, needs to come AFTER original rule */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
background-color: purple;
}
/* GREATER SPECIFICITY - SMALL increase, 0 0 2 3 */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover {
background-color: purple;
}
/* GREATER SPECIFICITY - LARGE increase, 0 1 1 1 */
#my-paginator a:focus,
#my-paginator a:hover,
#my-paginator span:focus,
#my-paginator span:hover {
background-color: purple;
}
Ideally you want to increase specificity in small amounts if you can and shy away from using the ID option. Check out this handy Specificity Calculator.
Upvotes: 6
Reputation: 401
Important css attribute like this:
.pagination > li > a, .pagination > li > span{
color:black !Important;
}
Upvotes: 0
Reputation: 7069
.example .pagination>li>a,
.example .pagination>li>span {
border: 1px solid purple;
}
.pagination>li.active>a {
background: purple;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="example">
<nav>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
It might not be working due to specificity issues, try adding some parent class, or style it using ID for that pagination UL, like I have given a parent <div class="example">
Read more about Specificity here
Upvotes: 17