Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[CSS] Personalize pagination (IPB STYLE)



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


Personalize pagination

Professional looking IPB pagination, simple yet cool to have o forums.


--> Tutorials, tips and tricks <--
Personalize pagination


- CSS
Add the following code
Code:
[panda=css] p.pag,.paging{
    border-radius:3px;
    color: white;
    margin: 4px 0 9px 0;}
    #blog_comments .paging,#blog_comments p.pag{
    color:#F1F1F1;}
    td p.pag a,.paging a, td p.pag b, .paging b, .paged-foot .paging a, .paged-foot .paging b, .paged-foot .paging a:hover{
    border-radius:3px;
    padding: 6px 9px 6px 9px !important;
    margin-right: 3px !important;
    font-size: 12px !important;}
    td p.pag a,.paging a, .paged-foot .paging a{
    border-radius:3px;
    color: #666666 !important;
    border: solid 1px #B3B3B3 !important;
    background-color: #DEDEDE;
    background:-moz-linear-gradient(#F2F2F2,#BABABA);
    background-image: -webkit-linear-gradient(#F2F2F2,#BABABA);
    text-shadow: 0px 1px #EBEBEB !important;
    box-shadow: 0px 1px #D4D4D4 !important;
    -moz-box-shadow: 0px 1px #D4D4D4 !important;
    -webkit-box-shadow: 0px 1px #D4D4D4 !important;}
    td p.pag b, .paging b, td p.pag a:hover, .paging a:hover{
    border-radius:3px;
    border: solid 1px #878787 !important;
    color: #EBEBEB !important;
    background-color: #58E862;
    background:-moz-linear-gradient(#BABABA,#DBDBDB);
    background-image: -webkit-linear-gradient(#BABABA,#DBDBDB);
    text-shadow: 0px 1px #666666 !important;
    box-shadow: 0px 1px #D4D4D4 !important;
    -moz-box-shadow: 0px 1px #D4D4D4 !important;
    -webkit-box-shadow: 0px 1px #D4D4D4 !important;}
    p.pag img,.paging img,.paged-foot .paging img{postion:relative;
    top:-3px;
    margin-top:-5px!Important;
    vertical-align: center !important;}
- Preview
How it looks:
http://i.imgur.com/SDjeu78.png





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Personalize pagination

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Zyon

avatar
Punbb Guru
Punbb Guru
Good tutorial, I like that Smile

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

3
Offline

  Guest

avatar
Guest
Thanks it's looking nice Very Happy

Powered by PunBB
Currently 0 users have thanked Guest for this post:

4
Offline

  MinaLea

avatar
Newbie
Newbie
This looks very decent. Thank you for posting!

Powered by PunBB
Currently 0 users have thanked MinaLea for this post:

5
Offline

  J0k3R^

avatar
Pemanently Banned
Pemanently Banned
very good tutorial sir.
thank you.
but i want to have bit smaller buttons. where do i change the size from?

Powered by PunBB
Currently 0 users have thanked J0k3R^ for this post:

6
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
Does this code work on phpBB2?

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

7
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum