Recent
Categories
View Replies (11)

Styling Pagination

0
Votes
Undo
  1. Josh
    Josh
  3. Free Templates / Extensions
  4. Friday, 23 March 2012
  5.  Subscribe via email
I really like the way on the oxygen template the way pagination is styled. Could this same styling be added to a different template?

I know that the following code is used:
[code type=css]/* Pagination */
ul.pagination{list-style-type:none;margin:0;padding:0;text-align:center;}
ul.pagination li, li.pagenav-prev, li.pagenav-next {background: url(../images/read.png); display:inline;margin:2px !important;padding:2px 8px !important; text-align:center; border:1px solid; border-color: #CCCCCC #BBBBBB #BBBBBB #CCCCCC; -moz-border-radius:0px 0px 5px 5px; -webkit-radius: 5px; border-radius:5px; line-height:24px !important;}
ul.pagination li a{padding:2px; margin:0;padding:0;}

ul.pagination li:hover, li.pagenav-prev:hover, li.pagenav-next:hover {
background-color: #CEDAF6;
background-image: -moz-linear-gradient(center top , #BDEDFF, #74B2E9);
background-image: -webkit-gradient(linear, center top, center bottom, from(#BDEDFF), to(#74B2E9));
box-shadow: 0 0 2px #999999;
}[/code]

And there is also: ul.pagination {float:left; width:100%;}

But I'm guessing there is something else that completes the pagination.
Any help on this would be very much appreciated. :)
Responses (11)
Guest
Guest
Accepted Answer Pending Moderation
0
Votes
Undo
thanks ;) I just found this tool for free : to use with Photoshop:http://layerstyles.org/ it is from 10 best css3 generator: http://www.sitepoint.com/10-best-css3-code-generators/

I was just wondering on the work process for the menu gradient ..
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Usually we would write the CSS raw. Where possible we may use CSS Hat.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 2
Guest
Guest
Accepted Answer Pending Moderation
0
Votes
Undo
CSS Hat (http://csshat.com/) is another great tool for creating CSS direct from Photoshop.

Ciarán

Hi,
let me ask you this: what too do you use?
thanks
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
CSS Hat (http://csshat.com/) is another great tool for creating CSS direct from Photoshop.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 4
Josh
Josh
Accepted Answer Pending Moderation
0
Votes
Undo
This one is pretty good. :cheer:

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 5
Guest
Guest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi!!
can you please share with me what tool do you use to create this gradient code?
I would like to change some colors in J51_Evolution..!
many thanks,
Avi

Add this code in your CSS Template:

ul.pagination {

    list-style-type: none;

    margin: 0;

    padding: 0;

    text-align: center;

}

ul.pagination li, li.pagenav-prev, li.pagenav-next {

    -moz-border-bottom-colors: none;

    -moz-border-image: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: url("../images/read.png") repeat scroll 0 0 transparent;

    border-color: #CCCCCC #BBBBBB #BBBBBB #CCCCCC;

    border-radius: 5px 5px 5px 5px;

    border-style: solid;

    border-width: 1px;

    display: inline;

    line-height: 24px !important;

    margin: 2px !important;

    padding: 2px 8px !important;

    text-align: center;

}

ul.pagination li a {

    margin: 0;

    padding: 0;

}

ul.pagination li:hover, li.pagenav-prev:hover, li.pagenav-next:hover {

    background-color: #CEDAF6;

    background-image: -moz-linear-gradient(center top , #BDEDFF, #74B2E9);

    box-shadow: 0 0 2px #999999;

}


Sure, you can edit background-image: -moz-linear-gradient(center top , #BDEDFF, #74B2E9); for better hover ;)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 6
Guest
Guest
Accepted Answer Pending Moderation
0
Votes
Undo
Add this code in your CSS Template:

ul.pagination {

    list-style-type: none;

    margin: 0;

    padding: 0;

    text-align: center;

}

ul.pagination li, li.pagenav-prev, li.pagenav-next {

    -moz-border-bottom-colors: none;

    -moz-border-image: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: url("../images/read.png") repeat scroll 0 0 transparent;

    border-color: #CCCCCC #BBBBBB #BBBBBB #CCCCCC;

    border-radius: 5px 5px 5px 5px;

    border-style: solid;

    border-width: 1px;

    display: inline;

    line-height: 24px !important;

    margin: 2px !important;

    padding: 2px 8px !important;

    text-align: center;

}

ul.pagination li a {

    margin: 0;

    padding: 0;

}

ul.pagination li:hover, li.pagenav-prev:hover, li.pagenav-next:hover {

    background-color: #CEDAF6;

    background-image: -moz-linear-gradient(center top , #BDEDFF, #74B2E9);

    box-shadow: 0 0 2px #999999;

}


Sure, you can edit background-image: -moz-linear-gradient(center top , #BDEDFF, #74B2E9); for better hover ;)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 7
Josh
Josh
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you very much! :cheer: It works just fine now. Not a big deal, but it would be nice if the newly bordered pagination linked to the page number rather than just the numbers linking. For example on the following link: http://joshklewis.com/adventure if you put the mouse over just slightly from one of the numbers it still highlights yet does not link to it. So people who are not familiar with how pagination works might see it light up thinking that the button is the link rather than the numbers. ;)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Josh

May I suggest copying the ../html/pagination.php from the root of the Oxygen template folder to the root of your current template folder. You might have to create the 'html' folder if it doesn't already exist.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 9
Josh
Josh
Accepted Answer Pending Moderation
0
Votes
Undo
After doing all sorts of experiments it's not working. I added it to the main template... did not work. I stripped out all my css of my template, told the index.php file of the template to only read the oxy.css file (I shorten the name). This too did not work. :(

So from what I understand it's something beyond the css. A class perhaps in the index file? A script that helps create this? I even used firebug in attempts to figure this out.

I'm determined to figure this out. ;) Any more ideas would be appreciated.

And if you want the domain, it's http://www.alpineascent.com

Edit: Forgot to mention I'm currently using joomla 2.5.3.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Josh

Yes this styling should work without issue in any template. Just add to the end of any of the templates CSS files. You might have to remove any previous styling the template may have for pagination.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.