Pagination, пагинация кнопок с картинками

mxa

Осваиваюсь на форуме
23
4 / 5

Pagination, пагинация кнопок с картинками

« : 24.06.2011, 23:53:47 »

Вот нашел в инете способ и сделал пагинацию кнопок с картинками для шаблона Joomla 1.6. Добавляем фон к кнопкам и убираем текст через text-indent: -9999px. Тестировал на всех современных браузерах + ИЕ6. Код не оптимизированный чтобы было понятней. Кнопки при наведении изменяются, также изменяются при неактивности. Вкладываю файл с картинками для кнопок.

Код


.pagination-start span{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

.pagination-start a:link{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: 0px -30px;
	text-indent: -9999px;
}
.pagination-start a:visited{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: 0px -30px;
	text-indent: -9999px;
}
.pagination-start a:hover{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: 0px -15px;
	text-indent: -9999px;
}
.pagination-start a:active{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: 0px -30px;
	text-indent: -9999px;
}



.pagination-prev span{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -15px 0px;
	text-indent: -9999px;	
}

.pagination-prev a:link{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -15px -30px;
	text-indent: -9999px;
}
.pagination-prev a:visited{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -15px -30px;
	text-indent: -9999px;
}
.pagination-prev a:hover{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -15px -15px;
	text-indent: -9999px;
}
.pagination-prev a:active{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -15px -30px;
	text-indent: -9999px;
}



.pagination-next a:link{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -30px -30px;
	text-indent: -9999px;
}
.pagination-next a:visited{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -30px -30px;
	text-indent: -9999px;
}
.pagination-next a:hover{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -30px -15px;
	text-indent: -9999px;
}
.pagination-next a:active{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -30px -30px;
	text-indent: -9999px;
}




.pagination-next span{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -30px 0px;
	text-indent: -9999px;	
}

.pagination-end a:link{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -45px -30px;
	text-indent: -9999px;
}
.pagination-end a:visited{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -45px -30px;
	text-indent: -9999px;
}
.pagination-end a:hover{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -45px -15px;
	text-indent: -9999px;
}
.pagination-end a:active{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -45px -30px;
	text-indent: -9999px;
}


.pagination-end span{
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(images/pagination.png);
	background-repeat: no-repeat;
	background-position: -45px 0px;
	text-indent: -9999px;	
}

.pagination ul li{
	display: inline;
	float: left;
	margin: 0 7px 0 0;
	line-height: 13px;
	font-weight: bold;
	width: 13px;
	height: 13px;
	text-align: center;
	color: #007ba4;
	font-size: 12px;
}

[вложение удалено Администратором]

Записан

Re: Pagination, пагинация кнопок с картинками

« Ответ #1 : 23.10.2011, 16:40:13 »

А на Joomla 1.5 будет работать?

Записан

mxa

Осваиваюсь на форуме
23
4 / 5

Re: Pagination, пагинация кнопок с картинками

« Ответ #2 : 10.11.2011, 00:32:57 »

Цитата: kostombor от 23.10.2011, 16:40:13

А на Joomla 1.5 будет работать?

Не знаю, не пробовал. Но думаю переделать под 1.5 не будет большой проблемой.

Записан

nthanter

Захожу иногда
55
1 / 1

Re: Pagination, пагинация кнопок с картинками

« Ответ #3 : 24.01.2012, 01:34:01 »

ну что для Joomla 1.5 можно применять то или нет?!

Записан

Ошибка в pagination.php? Автор Dimit1	Ответов: 4 Просмотров: 6343	07.06.2017, 14:15:36 от k0st1k
Как отделить материалы в блоге категории друг от друга картинками? Автор mysh-medunica	Ответов: 0 Просмотров: 1215	01.10.2014, 17:26:03 от mysh-medunica
ошибка на сайте при шаблон/html/pagination.php Автор jurassik	Ответов: 30 Просмотров: 6759	19.11.2013, 11:01:10 от djfactory
Нужно убрать pagination в php файле из самого шаблона, код и подробности ниже Автор ha03	Ответов: 3 Просмотров: 2303	10.10.2013, 13:05:02 от ha03
Стиль кнопок меню шаблона YOO-Drive применить в другом их шаблоне- возможно ли? Автор epson950	Ответов: 7 Просмотров: 1970	16.07.2013, 21:44:34 от ghio

Pagination, пагинация кнопок с картинками - Joomla 2.5: Шаблоны, разметка и макеты вывода

Новости Joomla

Joomla 6: Автоматические обновления ядра в Joomla

Обзор нововведений в Joomla 6.0.0. Статья на Хабре.14 октября 2025 года вышла Joomla 6.0.0

❓ Что же в ней нового?

Первый выпуск журнала NorrNext в честь 20-й годовщины Joomla™

mxa

Pagination, пагинация кнопок с картинками

Re: Pagination, пагинация кнопок с картинками

mxa

Re: Pagination, пагинация кнопок с картинками

nthanter

Re: Pagination, пагинация кнопок с картинками

Похожие темы