How to style default Joomla! Pagination with CSS

Most of the sites we design have plenty of fancy elements, but we always end up with a simple or unstyled page navigation list. The PSD always looks unique, but the web version falls short of the designers’ expectations. This is because there are no CSS selectors on the arrows, start, prev, next, end or numbers.

I probably looked at the custom pagination.php 100 times, before realizing how simple it was to add a CSS class to each element.

Ok, time for the good stuff. Here are the simple steps required to add CSS classes to your Joomla! page navigation (pagination) elements:

1. Create a file named pagination.php in the “html” folder of your template directory. The file structure should be “/templates/yourtemplatename/html/pagination.php”.
2. Copy the content of this file (pagination.txt) to your newly created pagination.php file.
3. Open pagination.php and replace this:

   function pagination_item_active(&$item) {
   return "<li><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
   }
   function pagination_item_inactive(&$item) {
   return "<li><span>".$item->text."</span></li>";
   }

   with this:

   function pagination_item_active(&$item) {
   
   //Custom variable created to use as the element class
   $item_class = strtolower($item->text);
   if(is_numeric ($item_class)) {
   $item_class .= " number";
   }
   return "<li class=\"".$item_class."\"><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
   }
   
   function pagination_item_inactive(&$item) {
   
   //Custom variable created to use as the element class
   $item_class = strtolower($item->text);
   if(is_numeric ($item_class)) {
   $item_class .= " number";
   }
   return "<li class=\"".$item_class."\"><span>".$item->text."</span></li>";
   }

Now the li elements of each pagination item should have a class that matches the text of the element. In addition, the numbers should have a second class of “number.”

Your HTML should look like this:

<ul class="pagination">
    <li class="start"><span>Start</span></li>
    <li class="prev"><span>Prev</span></li>
    <li class="1 number"><span>1</span></li>
    <li class="2 number"><a title="2" href="/category/Page-2">2</a></li>
    <li class="3 number"><a title="3" href="/category/Page-3">3</a></li>
    <li class="next"><a title="Next" href="/category/Page-2">Next</a></li>
    <li class="end"><a title="End" href="/category/Page-3">End</a></li>
</ul>

Format Code to Post on Blog

This is my first post in this blog. I take many time to find "how to create a coding region in my post?", because I will share all experiments about any field which I research.

This is a post very interest about comparison of some ways to Post Code to your Blog. They have show all pros and cons: "How to Post Code To Your Blog and other Religious Arguments"
In my blog, I use a very simple way to create Format Code. It doesn't quite format things as nicely but it does allow you to copy and paste and retains all the line breaks and formatting. It is also an online editor that you can use for free.

To use this, we will need do this step:

1. Include CSS for format code into template of Blog. I will show you How to do with Blogger (Blogspot)
- Log in Blogspot.
- Go to Template and choice Customise.
- Copy content of this CSS file (download here) to text box (like picture) and press Apply to Blog.

2. Go to   http://dotnetslackers.com/articles/csharpformat.aspx   and generate your code with format.

3. Copy generate code to HTML of post and see result

        private void btnUpload_Click(object sender, EventArgs e)
        {
            Auth myAuth = flic.AuthGetToken(tempFrob);
            flic.AuthToken = myAuth.Token;

            string file = "Lena.bmp";
            string title = "Lena Photo";
            string description = "This is demo uploading with Lena Photo";
            string tags = "Lena";
            string photoID = flic.UploadPicture(file, title, description, tags);
            label1.Text = photoID;
            Photoset pset = new Photoset();
            pset.Title = "My new Photoset";
            flic.PhotosetsCreate("My new photoset", "Test outsite photo", photoID);
        }