Новый набор из 10 переключателей для uCoz, переключатели страниц для uCoz, переключатели uCoz

Первая подборка переключателей для uCoz

Всем привет!

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

И специально для тех кто просто не обращал внимания на такие мелочи и для тех кто только начинает знакомиться с системой uCoz, в разделе "Переключатели страниц uCoz" я буду выкладывать готовые стили для переключателей. Вам лишь останется скопировать нужный код, перенести по необходимости к себе все картинки и вот на вашем сайте проработана еще одна мелочь которая будет отличать вас от других серых масс стандартных сайтов.

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

переключатели uCoz
  • catPages1, pagesBlock1 - весь блок переключателя
  • swchItemA - текущая страница
  • swchItem - все остальные страницы
Code
<div class="catPages1" align="center" id="pagesBlock1" style="clear:both;">
<b class="swchItemA"><span>1</span></b>
<a class="swchItem" href="" onclick="spages('2');return false;"><span>2</span></a>
<a class="swchItem" href="" onclick="spages('2');return false;"><span>»</span></a>
</div>

А теперь представляю вашему вниманию 10 новых вариантов визуального отображения переключателей uCoz, добавьте css стили понравившегося вам варианта к себе на сайт, либо в отдельный css файл, либо в стандартные стили uCoz, Дизайн / Управление дизайном (css):


Вариант первый
переключатели для uCoz
Code
.swchItem {
  color:#A74E0D;
  border:1px solid #F3D795;
  background:#FFFDF2;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#893A00;
  text-shadow:0px 1px #FFEF42;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #FFA200;
  background:#FFC800;
  background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
}

Вариант второй
переключатели для uCoz
Code
.swchItem {
  color:#0A7EC5;
  border:1px solid #8DC5E6;
  background:#F8FCFF;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #388DBE;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #3390CA;
  background:#58B0E7;
  background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));
}

Вариант третий
переключатели для uCoz
Code
.swchItem {
  color:#4A76C6;
  border:1px solid #8AAEEF;
  background:#F7F9FE;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #4876C9;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #3D6DC3;
  background:#5A8CE7;
  background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7));
}

Вариант четвертый
переключатели для uCoz
Code
.swchItem {
  color:#8D62C8;
  border:1px solid #BAA2DA;
  background:#F9F7FC;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #7955AB;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #6F4DA0;
  background:#9168C9;
  background:-moz-linear-gradient(top,#DFBEFA 1px,#B088E7 1px,#9168C9);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFBEFA),color-stop(0.02,#B088E7),color-stop(1,#9168C9));
}

Вариант пятый
переключатели для uCoz
Code
.swchItem {
  color:#EF6420;
  border:1px solid #FFBD85;
  background:#FFFAF7;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #CA470E;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #D13F11;
  background:#E95B2B;
  background:-moz-linear-gradient(top,#FFBE01 1px,#FE7C02 1px,#E95B2B);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFBE01),color-stop(0.02,#FE7C02),color-stop(1,#E95B2B));
}

Вариант шестой
переключатели для uCoz
Code
.swchItem {
  color:#E92F2F;
  border:1px solid #FFA5A5;
  background:#FFF8F8;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #B72E2E;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #AD2D2D;
  background:#E43838;
  background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
}

Вариант седьмой
переключатели для uCoz
Code
.swchItem {
  color:#916C59;
  border:1px solid #D6BFB4;
  background:#FBF9F8;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #866454;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #886756;
  background:#A37A66;
  background:-moz-linear-gradient(top,#E9C4B2 1px,#C59882 1px,#A37A66);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#E9C4B2),color-stop(0.02,#C59882),color-stop(1,#A37A66));
}

Вариант восьмой
переключатели для uCoz
Code
.swchItem {
  color:#478223;
  border:1px solid #B2D397;
  background:#F7FAF4;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #4E802C;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #478223;
  background:#599F2F;
  background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));

Вариант девятый
переключатели для uCoz
Code
.swchItem {
  color:#707070;
  border:1px solid #CFCFCF;
  background:#FAFAFA;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #636363;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #5D5D5D;
  background:#777777;
  background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777));
}

Вариант десятый
переключатели для uCoz
Code
.swchItem {
  color:#444;
  border:1px solid #BEBEBE;
  background:#FAFAFA;
}
.swchItemA, .swchItem {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  padding:6px 9px;
  margin-left:3px;
  text-decoration:none;
}
.swchItemA, .swchItem:hover {
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px #3C3C3C;
  box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  border:1px solid #202020;
  background:#525252;
  background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));
}

Всем спасибо за внимание, и на последок пожелание, стройте сайт на мелочах, не будьте стандартны.

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Переключатели ∫ Просмотров: 8773 ∫ 13.11.20124.3
» Оцени и добавь:
оцени статью
4.3
16 Комментариев Поделись своим мнением
#16 Написал Владимир, 02.09.2013 19:30
Цитатнуть
[quote=cech]может быть у вас стоят ajax[/quote]
И так и так пробовал. Эфекта 0 (((
#15 Написал Владимир, 02.09.2013 08:14
Цитатнуть
Отличные переключатели!Вот только все сделал по инструкции а все равно не работает. При нажатии на вторую страницу,происходит просто обновление первой.
#14 Написал cech, 19.04.2013 12:50
Цитатнуть
Перечитайте статью
#13 Написал cech, 12.02.2013 11:56
Цитатнуть
стили классом нужно дополнить, дайте линк на, то где можно посмотреть
#12 Написал Александр, 12.02.2013 05:31
Цитатнуть
В категориях не работает переключатель неактивной страницы. Как исправить?
#11 Написал Bil, 14.01.2013 22:08
Цитатнуть
Спасибо thumb
#10 Написал Saiqdrx, 01.12.2012 22:46
Цитатнуть
Спасибо,очень полезная статья =)
#9 Написал cech, 22.11.2012 18:44
Цитатнуть
BSide, угу, уже убрал, в стандартном коде лишнего взял...
#8 Написал BSide, 22.11.2012 18:36
Цитатнуть
По-моему один лишний div в конце html-кода..
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина