Pagination With images as 1 2 3 4

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
kelvinseasons
Joomla! Intern
Joomla! Intern
Posts: 50
Joined: Fri Sep 04, 2009 2:43 am

Pagination With images as 1 2 3 4

Post by kelvinseasons » Fri Sep 25, 2009 4:09 pm

So i tried searching on how to do it and i don't think i found a solution except that i got to do a template override to modify the pagination thing.

So below is an image of what i want my pagination to look like.
I also attached a code from the default template milky way..they said it is base for me to edit.

I really appreciate any help here as to where can i add background image for the numbers only!
I am very good at css but not php. From firebug everything is using the same class of pagenav and i have no idea how to change the class of the numbers only using the below code so i can have a seperate class.

So if i simply just do a
.pagenav{
background:url("picture.png");
}
Everything like "Start", "Next", "End", "Prev" "1,2,3,4,"will have a background picture which is not what i want. I only want the numbers to be something like the attached pictures below.


Image
<?php
/**
* @version $Id: pagination.php 10381 2008-06-01 03:35:53Z pasamio $
* @package Joomla
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

/**
* This is a file to add template specific chrome to pagination rendering.
*
* pagination_list_footer
* Input variable $list is an array with offsets:
* $list[limit] : int
* $list[limitstart] : int
* $list[total] : int
* $list[limitfield] : string
* $list[pagescounter] : string
* $list[pageslinks] : string
*
* pagination_list_render
* Input variable $list is an array with offsets:
* $list[all]
* [data] : string
* [active] : boolean
* $list[start]
* [data] : string
* [active] : boolean
* $list[previous]
* [data] : string
* [active] : boolean
* $list[next]
* [data] : string
* [active] : boolean
* $list[end]
* [data] : string
* [active] : boolean
* $list[pages]
* [{PAGE}][data] : string
* [{PAGE}][active] : boolean
*
* pagination_item_active
* Input variable $item is an object with fields:
* $item->base : integer
* $item->link : string
* $item->text : string
*
* pagination_item_inactive
* Input variable $item is an object with fields:
* $item->base : integer
* $item->link : string
* $item->text : string
*
* This gives template designers ultimate control over how pagination is rendered.
*
* NOTE: If you override pagination_item_active OR pagination_item_inactive you MUST override them both
*/

function pagination_list_footer($list)
{
$html = "<div class=\"list-footer\">\n";

$html .= "\n<div class=\"limit\">".JText::_('Display Num').$list['limitfield']."</div>";
$html .= $list['pageslinks'];
$html .= "\n<div class=\"counter\">".$list['pagescounter']."</div>";

$html .= "\n<input type=\"hidden\" name=\"limitstart\" value=\"".$list['limitstart']."\" />";
$html .= "\n</div>";

return $html;
}

function pagination_list_render($list)
{
// Initialize variables
$html = "<span class=\"pagination\">";
$html .= '<span>&laquo;</span>'.$list['start']['data'];
$html .= $list['previous']['data'];

foreach( $list['pages'] as $page )
{
if($page['data']['active']) {
$html .= '<strong>';
}

$html .= $page['data'];

if($page['data']['active']) {
$html .= '</strong>';
}
}

$html .= $list['next']['data'];
$html .= $list['end']['data'];
$html .= '<span>&raquo;</span>';

$html .= "</span>";
return $html;
}

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

function pagination_item_inactive(&$item) {
return "<span>".$item->text."</span>";
}
?>

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Fri Sep 25, 2009 4:27 pm

Well, you could change the two function pagination_item_active and pagination_item_inactive to something like this:

Code: Select all

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

function pagination_item_inactive(&$item) {
return "<span class=\"link".$item->text."\" >".$item->text."</span>";
}
or you could change this:

Code: Select all

foreach( $list['pages'] as $page )
{
if($page['data']['active']) {
$html .= '<strong>';
}

$html .= $page['data'];

if($page['data']['active']) {
$html .= '</strong>';
}
}

$html .= $list['next']['data'];
$html .= $list['end']['data'];
$html .= '<span>&raquo;</span>';

$html .= "</span>";
return $html;
}
to this:

Code: Select all

foreach( $list['pages'] as $page )
{
if($page['data']['active']) {
$html .= '<strong>';
}

$html .= '<span class="number">'.$page['data'].'<span>';

if($page['data']['active']) {
$html .= '</strong>';
}
}

$html .= $list['next']['data'];
$html .= $list['end']['data'];
$html .= '<span>&raquo;</span>';

$html .= "</span>";
return $html;
}
Olaf
Olaf Offick - Global Moderator
learnskills.org

kelvinseasons
Joomla! Intern
Joomla! Intern
Posts: 50
Joined: Fri Sep 04, 2009 2:43 am

Re: Pagination With images as 1 2 3 4

Post by kelvinseasons » Fri Sep 25, 2009 5:14 pm

Thank you so much.

I don't understand php but i see that you have added html tags inside and i think i understand what to do now. I prefer the first method seems to be what i'm looking for.

User avatar
amitpatekar
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 213
Joined: Wed Oct 15, 2008 9:18 am
Location: India - Pune
Contact:

Re: Pagination With images as 1 2 3 4

Post by amitpatekar » Thu Jan 19, 2012 7:39 am

Thank you ooffick
It helped me a lot.

Is there any way that i can hide text and just put image?
What i want to do here is put arrows instead of next previous.

Regards
Amit
Regards
Amit Patekar
Follow me on twitter @amitpatekar
Or visit http://www.itdesignlab.com

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Thu Jan 19, 2012 8:53 am

yes, with a little bit of CSS you can do that as well.

Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
beBoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Feb 03, 2012 6:29 pm

Re: Pagination With images as 1 2 3 4

Post by beBoss » Fri Feb 03, 2012 7:13 pm

Guys, please help me, two days I can't get it to work...
I want to have:
class for first, previous, next, end when they are inactive
class for first, previous, next, end when they are active
class for numbers when they are active / not active.

I'm close, but still can't do it right.

Here you can see example of that I want to have:
Click to see first page

Click to see sixth page

Well this is my code:

Code: Select all

<?php
/**
 * @version        $Id: pagination.php 14401 2010-01-26 14:10:00Z louis $
 * @package        Joomla
 * @copyright    Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
 * @license        GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

/**
 * This is a file to add template specific chrome to pagination rendering.
 *
 * pagination_list_footer
 *     Input variable $list is an array with offsets:
 *         $list[limit]        : int
 *         $list[limitstart]    : int
 *         $list[total]        : int
 *         $list[limitfield]    : string
 *         $list[pagescounter]    : string
 *         $list[pageslinks]    : string
 *
 * pagination_list_render
 *     Input variable $list is an array with offsets:
 *         $list[all]
 *             [data]        : string
 *             [active]    : boolean
 *         $list[start]
 *             [data]        : string
 *             [active]    : boolean
 *         $list[previous]
 *             [data]        : string
 *             [active]    : boolean
 *         $list[next]
 *             [data]        : string
 *             [active]    : boolean
 *         $list[end]
 *             [data]        : string
 *             [active]    : boolean
 *         $list[pages]
 *             [{PAGE}][data]        : string
 *             [{PAGE}][active]    : boolean
 *
 * pagination_item_active
 *     Input variable $item is an object with fields:
 *         $item->base    : integer
 *         $item->link    : string
 *         $item->text    : string
 *
 * pagination_item_inactive
 *     Input variable $item is an object with fields:
 *         $item->base    : integer
 *         $item->link    : string
 *         $item->text    : string
 *
 * This gives template designers ultimate control over how pagination is rendered.
 *
 * NOTE: If you override pagination_item_active OR pagination_item_inactive you MUST override them both
 */

function pagination_list_footer($list)
{
    // Initialize variables
    $lang =& JFactory::getLanguage();
    $html = "<div class=\"list-footer\">\n";

    $html .= "\n<div class=\"limit\">".JText::_('Display Num').$list['limitfield']."</div>";
    $html .= $list['pageslinks'];
    $html .= "\n<div class=\"counter\">".$list['pagescounter']."</div>";

    $html .= "\n<input type=\"hidden\" name=\"limitstart\" value=\"".$list['limitstart']."\" />";
    $html .= "\n</div>";

    return $html;
}

function pagination_list_render($list)
{
    // Initialize variables
    $lang =& JFactory::getLanguage();
    $html = "<ul class=\"paginate wrapper\">";

    $html .= $list['start']['data'];
    $html .= '&nbsp;'.$list['previous']['data'];

/*     foreach( $list['pages'] as $page )
    {
        if($page['data']['active']) {
            // $html .= '<strong>';
        }

        $html .= $page['data'];

        if($page['data']['active']) {
            //  $html .= '</strong>';
        }
    }

    $html .= $list['next']['data'];
    $html .= $list['end']['data'];
    // $html .= '&#171;';

    $html .= "</ul>";
    return $html; */
	
	foreach( $list['pages'] as $page )
	{
		if($page['data']['active']) {
			$html .= '<li class="active">';
		}

	$html .= '<li>'.'&nbsp;'.$page['data'].'<li>';

		if($page['data']['active']) {
			$html .= '</li>';
			}
	}

	$html .= $list['next']['data'];
	$html .= '&nbsp;'.$list['end']['data'];
	$html .= '<li>&raquo;</li>';

	$html .= "</ul>";
	return $html;
	}

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><a href=\"\" class=\"active\" title=\"" .$item->text. "\">".$item->text."</a></li>";
	//return "<li>".$item->text."</li>";
}
?>
CSS:

Code: Select all

.light {
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: #f3f3f3 url('../img/noise-f3f3f3.png');
  overflow: hidden;
}

.wrapper {
  margin: 0;
  padding: 4em;
}

.paginate {
  text-align: center;
}
.paginate ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.paginate li {
  display: inline;
}
.paginate a {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  margin: 1px 2px;
  padding: 5px 10px;
  display: inline-block;
  border-top: 1px solid #fff;
  text-decoration: none !important;
  color: #717171 !important;
  font-size: smaller !important;
  font-family: "Helvetica Neueu", Helvetica, Arial, sans-serif;
  text-shadow: white 0 1px 0;
  background-color: #FF0000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#eaeaea));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f9f9f9, #eaeaea);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #f9f9f9, #eaeaea);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #f9f9f9, #eaeaea);
  /* IE10 */
  background-image: -o-linear-gradient(top, #f9f9f9, #eaeaea);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #f9f9f9, #eaeaea);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', EndColorStr='#eaeaea');
  /* IE6–IE9 */
}
.paginate a:first-child, .paginate a.first {
  margin-left: 0;
}
.paginate a:last-child, .paginate a.last {
  margin-right: 0;
}
.paginate a:hover, .paginate a:focus {
  border-color: #fff;
  background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #fefefe, #fafafa);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #fefefe, #fafafa);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #fefefe, #fafafa);
  /* IE10 */
  background-image: -o-linear-gradient(top, #fefefe, #fafafa);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #fefefe, #fafafa);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fefefe', EndColorStr='#fafafa');
  /* IE6–IE9 */
}
.paginate a.more {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border: 0 none !important;
  background: transparent !important;
  margin-left: 0;
  margin-right: 0;
}
.paginate a.active {
  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  border-color: #505050 !important;
  color: #f2f2f2 !important;
  text-shadow: black 0 1px 0;
  background-color: #676767;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5f5f5f), to(#5c5c5c));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* IE10 */
  background-image: -o-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #5f5f5f, #5c5c5c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5f5f5f', EndColorStr='#5c5c5c');
  /* IE6–IE9 */
}

.paginate-dark a {
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  border-top: 1px solid #62686d;
  text-shadow: rgba(0, 0, 0, 0.75) 0 1px 0;
  color: #fff !important;
  background-color: #4e5458;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#575e63), to(#3f4347));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #575e63, #3f4347);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #575e63, #3f4347);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #575e63, #3f4347);
  /* IE10 */
  background-image: -o-linear-gradient(top, #575e63, #3f4347);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #575e63, #3f4347);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#575e63', EndColorStr='#3f4347');
  /* IE6–IE9 */
}
.paginate-dark a:hover, .paginate-dark a:focus {
  border-color: #61788a;
  background-color: #4d6374;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#566f82), to(#3e505e));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #566f82, #3e505e);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #566f82, #3e505e);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #566f82, #3e505e);
  /* IE10 */
  background-image: -o-linear-gradient(top, #566f82, #3e505e);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #566f82, #3e505e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#566f82', EndColorStr='#3e505e');
  /* IE6–IE9 */
}
.paginate-dark a.active {
  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  border-color: #2d3035 !important;
  background-color: #303338;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#303338), to(#2d3034));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #303338, #2d3034);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #303338, #2d3034);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #303338, #2d3034);
  /* IE10 */
  background-image: -o-linear-gradient(top, #303338, #2d3034);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #303338, #2d3034);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#303338', EndColorStr='#2d3034');
  /* IE6–IE9 */
}
I want this or something better for my site different from simple numbers. The problem now in this code is that, you if click on inactive page number (the number of page on you're now) refer you on the main page... And the second is that I want different style for inactive first, previous, next, last buttons and that's all.
Really need help, If you can and want you can show me for example how to make it like [youtube] new style pagination, it's awesome, and I need something awesome for my site. Thanks in advanced !

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Mon Feb 06, 2012 5:17 pm

Can you explain what you want to change?

Mod Note: Bump post deleted, please do not bump your posts.
Please note that the Forum is on a voluntary basis only, so it might take some time before you get a reply.

Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
beBoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Feb 03, 2012 6:29 pm

Re: Pagination With images as 1 2 3 4

Post by beBoss » Tue Feb 07, 2012 2:30 pm

Well, I want 'class' for first, next, previous, end different when they are active or not.
Example - class active and class notactive
Now in this template, when you are in the first page they are active and when click on it, they refer you to the main page.
Example: (go to the end of the page to see pagination) http://ivanyane.com/index.php?option=co ... &Itemid=64

The second thing I want is to set the number of pages in pagination down.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Tue Feb 07, 2012 3:00 pm

So the result should be something like this:

Code: Select all

<ul class="pagination">
	<li class="first"><span class="inactive">Start</span></li>
	<li class="prev"><span class="inactive">Prev</span></li>
	<li class="num"><span class="inactive">1</span></li>
	<li class="num"><a title="2" class="active" href="/index.php?start=4">2</a></li>
	<li class="next"><a title="Next" class="active" href="/index.php?start=4">Next</a></li>
	<li class="end"><a title="End" class="active" href="/index.php?start=4">End</a></li>
</ul>
if that is the case you could try the following:

Code: Select all

function pagination_list_render($list)
{
	$lang =& JFactory::getLanguage();
	$html = "<ul class=\"pagination\">";

	$html .= '<li class="first">'.$list['start']['data'].'</li>';
	$html .= '<li class="prev">'.$list['previous']['data'].'</li>';

	foreach( $list['pages'] as $page )
	{
		$html .= '<li class="num">'.$page['data'].'</li>';
	}
	$html .= '<li class="next">'.$list['next']['data'].'</li>';
	$html .= '<li class="end">'.$list['end']['data'].'</li>';

	$html .= "</ul>";
	return $html;
}

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

function pagination_item_inactive(&$item) {
	return "<span class=\"inactive\">".$item->text."</span>";
}
Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
beBoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Feb 03, 2012 6:29 pm

Re: Pagination With images as 1 2 3 4

Post by beBoss » Tue Feb 07, 2012 10:52 pm

Ok, but the class for inactive doesn't work. Work if is link (<a> tag, with <span> doesn't work)

Code: Select all

function pagination_item_inactive(&$item) {
   //return "<span class=\"next-off\">".$item->text."</span>"; <------------ not working
	return "<a href=\"".$item->link."\" class=\"next-off\" title=\"".$item->text."\">".$item->text."</a>"; <----- working
}
But in this way inactive links get active and can be clicked and link is main page...

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Wed Feb 08, 2012 8:55 am

why do you have a problem with the span tags?

Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
beBoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Feb 03, 2012 6:29 pm

Re: Pagination With images as 1 2 3 4

Post by beBoss » Wed Feb 08, 2012 2:48 pm

Doesn't work.
Edit: ohh I fixed :) The css was the problem :)

Edit2: How to edit style of Страница 1 от 11 (en: Page 1 of 11) I can't find styles in template.css

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Pagination With images as 1 2 3 4

Post by ooffick » Wed Feb 08, 2012 4:04 pm

You could try something like this:
  1. create a folder in your template folder called "html" (if it doesn't exists)
  2. create a folder in that html folder called "com_content" (if it doesn't exists)
  3. create a folder in that com_content folder called "category" (if it doesn't exists)
  4. copy the file .../components/com_content/views/category/tmpl/blog.php in this .../templates/[your-template]/html/com_content/category/ folder
  5. open that file
  6. find the following lines:

    Code: Select all

    	<td valign="top" align="center">
    		<?php echo $this->pagination->getPagesCounter(); ?>
    	</td>
  7. and replace it with the following:

    Code: Select all

    	<td valign="top" align="center" class="pagecounter">
    		<?php echo $this->pagination->getPagesCounter(); ?>
    	</td>
  8. save the file
  9. add a rule to your css file for the class "pagecounter"
Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
beBoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Feb 03, 2012 6:29 pm

Re: Pagination With images as 1 2 3 4

Post by beBoss » Wed Feb 08, 2012 4:22 pm

Yeahh, thank you !


Locked

Return to “Templates for Joomla! 1.5”