[Cakephp] Styling Pagination Number

Description
        Styling pagination number in cakephp framework.

Requirement
       - Understand cakephp pagination

Howto
1. in view use this code :
<div id="paging">
<?php
echo $this->Paginator->prev('Sebelumnya', array('escape' => FALSE,'tag' => "div class='prevnext'"));
        echo $this->Paginator->numbers(array('separator'=>false,'currentTag'=>"div class='paginationCurrentNumber'",'before' => '','after' => '','tag' => "div class='paginationNumber'"));
        echo $this->Paginator->next('Selanjutnya', array('escape' => FALSE,'tag' => "div class='prevnext'"));
?>
</div>

2. in css add this :
.prevnext{
    color:white;
    text-align: center;
    display:inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 1px;
    margin-right: 1px;
    border:1px solid black;
    background: rgb(96,108,136); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-8 */
}

.prevnext:hover{
    background: orange !important;
}

.prevnext a:visited,a:link,a:active{
   color:white;
   text-decoration:none !important;
}

.paginationNumber{
    width:20px;
    display:inline-block;
    text-align: center;
    margin-left: 1px;
    margin-right: 1px;
    color:white;
    border:1px solid black;
    background: rgb(96,108,136); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-8 */
}

.paginationNumber a:visited,a:link,a:active{
   color:white;
   text-decoration:none !important;
}

.paginationNumber:hover{
   background: orange !important;
}

.paginationNumber .current{
   background: white !important;
}

.paginationCurrentNumber{
   width:100%;
   height:100%;
   background:red !important;
}


the result :


*Note : don't forget to declare your css in view.


but if you prefer using bootstrap you use this css (found this code in stackoverflow , works great) :
<div class="pagination pagination-large">
            <ul class="pagination">
                <?php
                    echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
                    echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
                    echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
                ?>
            </ul>
          </div>