MWDeveloper's avatar

Change the pagination links' color

Hi devs I want to change the color of post index's links. So i tried to inspect the element of the links in my index blade page and i did it on the browser and when I want to copy the page content of "pagination.less" I did not find it within the path "assets/css/less/pagination.less" any idea ?

0 likes
4 replies
sherwinmdev's avatar

@MWDeveloper not sure what version of bootstrap but i found something to help with css

.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;
}

i got this from http://stackoverflow.com/questions/32355009/changing-pagination-colour-bootstrap

make sure you add the changes after the bootstrap css otherwise, bootstrap will override it.

1 like
MWDeveloper's avatar

@w1n78 thanks for the response but the question is where to place these lines, I mean in which file ? I did create a new file in the desired path and I name it pagination.less and I have copied those lines to the style page but no change.

sherwinmdev's avatar

@MWDeveloper you don't really need to put it in a less file. it doesn't need to be processed, it's plain css already. how do you have your css set up? do you have a less file that you're processing? if you do, put that code at the bottom.

if you just have a plain css file, then put the code at the bottom.

less files need to be "processed" into css. otherwise, your browser won't know how to read it.

MWDeveloper's avatar
MWDeveloper
OP
Best Answer
Level 4

the solution of this is :

/* bootstrap links colors*/ .pagination > li > a, .pagination > li > span { color: green; // use your own color here }

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { background-color: green; border-color: green; }

found it in here: http://stackoverflow.com/questions/28864718/how-to-change-the-color-of-the-stock-pagination-that-come-with-laravel

Please or to participate in this conversation.