Делаем красивые переключатели страниц для сайта Юкоз

Приветствую, коллега!

В этой заметке хочу поделиться с тобой, как стилизовать, то есть сделать красивыми, переключатели страниц (пагинацию) на сайте, созданном на платформе Юкоз.

Делается это очень просто - нужно лишь добавить нужные стили для переключателей, если они не добавлены в твоем шаблоне.

В шаблоне, который когда-то я выбрал и частично преобразовал его внешний вид, подредактировав стили, в таблице стилей были прописаны классы переключателей, однако стили для них назначены не были. Долгое время меня это абсолютно не волновало. И лишь недавно я добрался до них.

Все-таки юзабилити - удобство пользования сайтом - становится все более актуальным. Сайтов в интернете с каждым днем становится все больше, у пользователя соответственно расширяется выбор, и он не задерживается на сайте, если он не может быстро сориентироваться на его страницах.

Поэтому и элементы пагинации - переключатели страниц - должны быть заметны на странице, гармонично вписываться в ее дизайн и должны сами за себя говорить, для чего они на этой странице вашего сайта.

А теперь к делу.

Делаем красивыми переключатели страниц на сайте Юкоз

Чтобы не было недоразумений, предлагаю тебе сразу посмотреть код переключателей, которые выводятся на твоей странице. Если ты еще не в курсе, как это делать, объясню вкратце. Выдели мышкой переключатель страниц на своем сайте, кликни правой кнопкой мыши на выделенном элементе и в открывшемся контекстном меню выбери Просмотреть код элемента (Опера) или Просмотреть код (Хром). Можно даже не выделять элемент, а просто навести на него курсор и кликнуть правой кнопкой мыши.

В открывшемся окне с кодом увидишь подсвеченную строку с кодом элемента, по которому ты кликал. Теперь, смотрим, какие классы назначены для элементов переключателя.

В моем шаблоне ссылки на страницы имеют класс swchItem, а элемент, указывающий на активную страницу, заключен в тег с присвоенным классом swchItemA. Внутри ссылок и внутри тега вставлен строчный элемент , в котором и выводятся собственно номера страниц.

Если в твоем шаблоне такая же иерархия элементов, то стили, которые я привожу ниже, можно просто скопировать себе, подкорректировав при необходимости цвета и размеры.

.swchItem span, .swchItemA span {    
    display: inline-block;
    width: 35px;
    height: 35px;
    padding-top: 7px;    
    border-radius: 50%;
    text-align:center
}
.swchItemA span{
    background:#3A6B8e;
    border:1px solid #3A6B8e;
    color: #fff;
}
.swchItem span{
    background:#fff;
    border:1px solid #ccc;
    color: #555;
    transition:all .3s
}
.swchItem span:hover {
    background:#3A6B8e;
    border:1px solid #3A6B8e;
    color: #fff;
    transition:all .3s
}

У меня получился вот такой набор стилей. Внешний вид кнопок можно увидеть на главной странице моего сайта.

Я сделал кнопки круглыми, добавив параметр border-radius: 50% . Ты можешь сделать их квадратными, удалив этот параметр, или же прямоугольными, изменив соотношение ширины и высоты кнопок.

Надеюсь, тебе не нужно объяснять, куда нужно добавить приведенные выше стили для твоего сайта и как изменить цвет кнопок и шрифта в кнопках :-)