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

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[CSS] Personalize pagination (IPB STYLE)

Foto

[CSS] Personalize pagination (IPB STYLE)

by ,


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

1
Offline

  Shadow

Shadow
Administrator
Administrator
2013-10-02, 18:38

[CSS] Personalize pagination (IPB STYLE) Alerte10
Personalize pagination

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


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


1º - 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;}
2º - Preview
How it looks:
https://i.imgur.com/SDjeu78.png




© PunBB Design


[CSS] Personalize pagination (IPB STYLE) Act_bottom If you have any questions related to this topic create a topic with the following title:
Personalize pagination

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

2
Offline

  Zyon

Zyon
Punbb Guru
Punbb Guru
2013-10-02, 20:07
Good tutorial, I like that Smile

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

3
Offline

  Guest

Anonymous
Guest
2013-10-04, 11:02
Thanks it's looking nice Very Happy

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

4
Offline

  MinaLea

MinaLea
Newbie
Newbie
2014-02-24, 08:17
This looks very decent. Thank you for posting!

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

5
Offline

  J0k3R^

J0k3R^
Pemanently Banned
Pemanently Banned
2014-04-15, 08:48
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

Udarsha45
Punbb Rookie
Punbb Rookie
2014-05-05, 09:24
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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.