jQuery / DataTables: how to change pagination colorIs there an “exists” function for jQuery?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?Change an HTML5 input's placeholder color with CSSWhy does HTML think “chucknorris” is a color?“Thinking in AngularJS” if I have a jQuery background?
How to eliminate gap at the start and at the end of a line when it's drawn along a side of a node's bounding box?
Keeping the dodos out of the field
How does the Earth's center produce heat?
Why did Nick Fury not hesitate in blowing up the plane he thought was carrying a nuke?
How would a physicist explain this starship engine?
Is it safe to redirect stdout and stderr to the same file without file descriptor copies?
Is the default 512 byte physical sector size appropriate for SSD disks under Linux?
Make the `diff` command look only for differences from a specified range of lines
mmap: effect of other processes writing to a file previously mapped read-only
Surface of the 3x3x3 cube as a graph
Why is this python script running in background consuming 100 % CPU?
What is the winged creature on the back of the Mordenkainen's Tome of Foes book?
JavaScript: Access 'this' when calling function stored in variable
Are there historical examples of audiences drawn to a work that was "so bad it's good"?
Why is unzipped file smaller than zipped file
Department head said that group project may be rejected. How to mitigate?
Would this be a dangerous impeller to use for a drone?
why "American-born", not "America-born"?
To exponential digit growth and beyond!
Are clauses with "который" restrictive or non-restrictive by default?
Wifi light switch needs neutral wire. Why? AND Can that wire be a skinny one?
Is being an extrovert a necessary condition to be a manager?
Why is the reciprocal used in fraction division?
Computing elements of a 1000 x 60 matrix exhausts RAM
jQuery / DataTables: how to change pagination color
Is there an “exists” function for jQuery?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?Change an HTML5 input's placeholder color with CSSWhy does HTML think “chucknorris” is a color?“Thinking in AngularJS” if I have a jQuery background?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am using the jQuery DataTables plugin (version 1.9.4) and would like to change the color of the pagination.
With CSS I am able to change their background color but I couldnt find a way to change the font color and font hover color for the anchor tags. I would like to change both font color and hover font color for all the below anchor tags to white (#FFFFFF).
The pagination code looks as follows:
<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
<a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
<a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
<span>
<a class="paginate_active" tabindex="0">1</a>
<a class="paginate_button" tabindex="0">2</a>
</span>
<a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
<a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>
Thanks for any help with this, Tim.
jquery css pagination datatables jquery-datatables
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
add a comment |
I am using the jQuery DataTables plugin (version 1.9.4) and would like to change the color of the pagination.
With CSS I am able to change their background color but I couldnt find a way to change the font color and font hover color for the anchor tags. I would like to change both font color and hover font color for all the below anchor tags to white (#FFFFFF).
The pagination code looks as follows:
<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
<a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
<a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
<span>
<a class="paginate_active" tabindex="0">1</a>
<a class="paginate_button" tabindex="0">2</a>
</span>
<a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
<a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>
Thanks for any help with this, Tim.
jquery css pagination datatables jquery-datatables
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
1
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46
add a comment |
I am using the jQuery DataTables plugin (version 1.9.4) and would like to change the color of the pagination.
With CSS I am able to change their background color but I couldnt find a way to change the font color and font hover color for the anchor tags. I would like to change both font color and hover font color for all the below anchor tags to white (#FFFFFF).
The pagination code looks as follows:
<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
<a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
<a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
<span>
<a class="paginate_active" tabindex="0">1</a>
<a class="paginate_button" tabindex="0">2</a>
</span>
<a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
<a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>
Thanks for any help with this, Tim.
jquery css pagination datatables jquery-datatables
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
I am using the jQuery DataTables plugin (version 1.9.4) and would like to change the color of the pagination.
With CSS I am able to change their background color but I couldnt find a way to change the font color and font hover color for the anchor tags. I would like to change both font color and hover font color for all the below anchor tags to white (#FFFFFF).
The pagination code looks as follows:
<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
<a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
<a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
<span>
<a class="paginate_active" tabindex="0">1</a>
<a class="paginate_button" tabindex="0">2</a>
</span>
<a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
<a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>
Thanks for any help with this, Tim.
jquery css pagination datatables jquery-datatables
jquery css pagination datatables jquery-datatables
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
asked Nov 24 '13 at 23:31
user2571510user2571510
3,9913071118
3,9913071118
1
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46
add a comment |
1
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46
1
1
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46
add a comment |
3 Answers
3
active
oldest
votes
Maybe you miss the !important declaration? In this case it is indeed important.
.paging_full_numbers a.paginate_button
color: #fff !important;
.paging_full_numbers a.paginate_active
color: #fff !important;
jsfiddle -> http://jsfiddle.net/CrBkT/
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
add a comment |
Another answer is here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
add a comment |
after a bit of messing about this is what i got to work;
.page-item.active .page-link
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
.page-link
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
.page-link:hover
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
answered Mar 23 at 21:06
Scott MScott M
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20182500%2fjquery-datatables-how-to-change-pagination-color%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Maybe you miss the !important declaration? In this case it is indeed important.
.paging_full_numbers a.paginate_button
color: #fff !important;
.paging_full_numbers a.paginate_active
color: #fff !important;
jsfiddle -> http://jsfiddle.net/CrBkT/
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
add a comment |
Maybe you miss the !important declaration? In this case it is indeed important.
.paging_full_numbers a.paginate_button
color: #fff !important;
.paging_full_numbers a.paginate_active
color: #fff !important;
jsfiddle -> http://jsfiddle.net/CrBkT/
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
add a comment |
Maybe you miss the !important declaration? In this case it is indeed important.
.paging_full_numbers a.paginate_button
color: #fff !important;
.paging_full_numbers a.paginate_active
color: #fff !important;
jsfiddle -> http://jsfiddle.net/CrBkT/
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
Maybe you miss the !important declaration? In this case it is indeed important.
.paging_full_numbers a.paginate_button
color: #fff !important;
.paging_full_numbers a.paginate_active
color: #fff !important;
jsfiddle -> http://jsfiddle.net/CrBkT/
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
answered Nov 25 '13 at 10:29
davidkonraddavidkonrad
66k13146202
66k13146202
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
add a comment |
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
1
1
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
Awesome - I would never have thought of that and it works. Thanks a lot ! :)
– user2571510
Nov 25 '13 at 15:06
add a comment |
Another answer is here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
add a comment |
Another answer is here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
add a comment |
Another answer is here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
Another answer is here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
answered Sep 21 '18 at 17:57
MohsenMohsen
128212
128212
add a comment |
add a comment |
after a bit of messing about this is what i got to work;
.page-item.active .page-link
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
.page-link
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
.page-link:hover
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
answered Mar 23 at 21:06
Scott MScott M
11
add a comment |
after a bit of messing about this is what i got to work;
.page-item.active .page-link
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
.page-link
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
.page-link:hover
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
answered Mar 23 at 21:06
Scott MScott M
11
add a comment |
after a bit of messing about this is what i got to work;
.page-item.active .page-link
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
.page-link
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
.page-link:hover
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
answered Mar 23 at 21:06
Scott MScott M
11
after a bit of messing about this is what i got to work;
.page-item.active .page-link
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
.page-link
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
.page-link:hover
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
answered Mar 23 at 21:06
Scott MScott M
11
answered Mar 23 at 21:06
Scott MScott M
11
answered Mar 23 at 21:06
Scott MScott M
11
answered Mar 23 at 21:06
Scott MScott M
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20182500%2fjquery-datatables-how-to-change-pagination-color%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file
– charlietfl
Nov 24 '13 at 23:35
Thanks - how do i do that ?
– user2571510
Nov 25 '13 at 0:46