Главная » Интересные решения для сайтов uCoz » Ucoz » Скрипты
Материал добавлен 3324 дня, 5 часов, 33 минуты, 16 секунд назад

Стили переключателей страниц для uCoz


Стили переключателей страниц для uCoz
Новая подборка переключателей страниц для uCoz. Для тех, кто устал от скучного стандартного дизайна, есть кое-что интересное.

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

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

Установка
Чтобы установить тот или иной вид, сначала найдите и удалите в CSS стандартные стили переключателей страниц. Затем выберете вид отсюда и копируйте его код в свою таблицу стилей CSS.

Для удобства выбора я назвал каждый стиль своим именем.

1. Урааа

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


Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  padding:8px 12px;  
  -webkit-border-radius: 50px;  
  -moz-border-radius: 50px;  
  border-radius: 50px;  
  color:#777;  
  background:#f5f8fa;  
  font-size:11px;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#f2f2f2;  
  background:#236999;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#000;  
  background:#ecf2f6;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#828e96;  
  font-size:11px;  
}


2. Профессионал



Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  padding:6px 12px;  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  color:#7badec;  
  background:#f1f4f9;  
  border:1px solid #d3dceb;  
  font-size:13px;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#fff;  
  background:#78aaff;  
  border-color:#337bf4;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#2b83ef;  
  background:#ecf2f6;  
  border-color:#2c82ef;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#828e96;  
  font-size:11px;  
}


3. Тропический лес


Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  padding:8px 12px;  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  color:#fff;  
  background:#282825;  
  font-size:13px;  
  font-weight:bold;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#fff;  
  background:#87c440;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#fff;  
  background:#3c3c38;  
}  
.swchItemDots {  
  color:#96968b;  
  font-size:13px;  
  font-weight:bold;  
}


4. Программист



Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin:0px;  
  padding:8px 14px;  
  color:#a7bcdb;  
  background:#fbfcff;  
  font-size:13px;  
  border:1px solid #dae7f7;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#768baa;  
  background:#eff6ff;  
  border-color:#498cfd;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#a7bcdb;  
  background:#eff6ff;  
}  
.swchItemDots {  
  padding:8px 14px;  
  color:#a5bedd;  
  font-size:13px;  
  background:#fbfcff;  
  border:1px solid #dae7f7;  
}


5. Минималист



Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 0px 0px;border-bottom:1px solid #dedede}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  font-weight:bold;  
  padding:12px 12px;  
  color:#b7bac7;  
  background:none;  
  font-size:11px;  
  position:relative;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#000;  
}  

.catPages1 b:after,  
.catPages2 b:after,  
.pagesBlock1 b:after,  
.pagesBlock2 b:after,  
.pagesBlockuz1 b:after,  
.pagesBlockuz2 b:after {  
  content:'';  
  width:100%;  
  height:1px;  
  position:absolute;  
  background:#000;  
  bottom:-1px;  
  left:0px;  
}  

.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#000;  
  background:none;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#828e96;  
  font-size:11px;  
}


6. Терминатор



Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 0px 0px;border-bottom:1px solid rgba(255,255,255,0.1)}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  font-weight:bold;  
  padding:12px 12px;  
  color:#b7bac7;  
  background:none;  
  font-size:11px;  
  position:relative;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#73c3f5;  
}  

.catPages1 b:after,  
.catPages2 b:after,  
.pagesBlock1 b:after,  
.pagesBlock2 b:after,  
.pagesBlockuz1 b:after,  
.pagesBlockuz2 b:after {  
  content:'';  
  width:100%;  
  height:1px;  
  position:absolute;  
  background:#73c3f5;  
  bottom:-1px;  
  left:0px;  
}  

.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#73c3f5;  
  background:none;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#828e96;  
  font-size:11px;  
}


7. Облако



Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:0px;border:2px solid #e0e7eb;display:inline-block;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  font-weight:bold;  
  padding:12px 12px;  
  color:#868c90;  
  background:none;  
  font-size:11px;  
  position:relative;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  color:#00aaff;  
}  

.catPages1 b:after,  
.catPages2 b:after,  
.pagesBlock1 b:after,  
.pagesBlock2 b:after,  
.pagesBlockuz1 b:after,  
.pagesBlockuz2 b:after {  
  content:'';  
  width:100%;  
  height:2px;  
  position:absolute;  
  background:#00aaff;  
  bottom:-2px;  
  left:0px;  
}  

.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  color:#00aaff;  
  background:none;  
}  
.swchItemDots {  
  letter-spacing:1px;  
  color:#62676a;  
  font-size:11px;  
}
Автор материала:
...
Логин на сайте: ...
Группа: ...
Материалов: ...
Статус: ...
О материале:
Дата добавления материала:
05.07.2016 в 20:14
Материал просмотрен: 592 раза
Категория материала:
Скрипты
К материалу оставлено: 0 комментариев
+3

Рекомендую к просмотру

Система - Bandicam 1.8.2.255

Bandicam 1.8.2.255
Мини профиль для сайта UcoZ - Горизонтальный Мини-Профиль для uCoz

Горизонтальный Мини-Профиль для uCoz
Скрипты - Скрипт переадресация с одного сайта на другой для uCoz от Internetempire.ru

Скрипт переадресация с одного сайта на другой для uCoz от Internetempire.ru
Разное для ucoz - Простенький Tooltip на CSS3 для uCoz

Простенький Tooltip на CSS3 для uCoz

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Немного информации в комментариях!
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных, например таких: uCoz.ru, forum.ucoz.ru, blog.ucoz.ru и т.п.)
4. Запрещено флудить и спамить, предлогать услуги (например: "делаю рипы, адаптации на заказ" "помогу с установкой шаблона" и т.д. )

Комментарии к материалу Стили переключателей страниц для uCoz
Войдите:
avatar
Close
Здравствуйте Гость
Пожалуйста зарегистрируйтесь или войдите под своим логином на сайт.
Правила чата
Пользователи онлайн1
−Мини-чат
+Мини-чат
shazam094
10.11.2016 в 08:50
shazam094
kimdir bormi?
shazam094
shazam094
26.08.2016 в 16:57
shazam094
norm vzlom pochtu proga tawang
shazam094
DemenCo^
25.08.2016 в 16:02
DemenCo^
yaxshi! o'zingchi? okey
DemenCo^
shazam094
24.08.2016 в 20:55
shazam094
qalesiz
shazam094
DemenCo^
07.08.2016 в 10:58
DemenCo^
o'zim shunday qaraolmayapman!
DemenCo^
shazam094
05.08.2016 в 13:56
shazam094
saytni nega bermoq4isiz?
shazam094
shazam094
05.08.2016 в 13:53
shazam094
ok
shazam094
DemenCo^
05.08.2016 в 13:03
DemenCo^
xa myli jo'ralaringga aytib ko'r saytdi!
DemenCo^
shazam094
05.08.2016 в 09:23
shazam094
kerak mas aka qoyin men tuwunmaman unlike wink
shazam094
DemenCo^
05.08.2016 в 00:16
DemenCo^
internedan qqnday qilib ucoz materisl qoshiwni o'rganib olgin senga topshiraman okey
DemenCo^
shazam094
04.08.2016 в 21:15
shazam094
lekin qaray olmasam kerak hali sizdey html css ilarni bilmiman yaxiwsi menga topwirmang
shazam094
shazam094
04.08.2016 в 21:15
shazam094
nma edi aka menga topwirasizmi
shazam094
DemenCo^
04.08.2016 в 11:45
DemenCo^
saytga qarayolsanmi???
DemenCo^
DemenCo^
04.08.2016 в 11:20
DemenCo^
qaray olasanmi?
DemenCo^
LitCo
04.08.2016 в 11:18
LitCo
agar saytga qaray olasanmi?
LitCo
shazam094
04.08.2016 в 11:08
shazam094
yo pul yo
shazam094
LitCo
04.08.2016 в 11:01
LitCo
shazam saytimni sotaman olmaysanmi (200) okey
LitCo
shazam094
04.08.2016 в 08:48
shazam094
aka ingliz tili video uroklar ssilka berin plz torrent ga tortaman
shazam094
LitCo
03.08.2016 в 22:15
LitCo
aa ok! raxmad
LitCo
shazam094
03.08.2016 в 09:24
shazam094
xa akamni profilidan kordim
shazam094
LitCo
02.08.2016 в 16:02
LitCo
UNA912 senmisan?
LitCo
shazam094
02.08.2016 в 11:13
shazam094
bowidan reg qilib bosdim
shazam094
shazam094
29.07.2016 в 21:26
shazam094
bosdim
shazam094
LitCo
29.07.2016 в 19:08
LitCo
boshqatdan reg qilib klass bosib chiq iltimos cry http://nnmuz.com/user/dilshod2747/news/
LitCo
LitCo
29.07.2016 в 19:08
LitCo
shzam
LitCo
LitCo
29.07.2016 в 19:08
LitCo
men yozdim :)
LitCo
shazam094
29.07.2016 в 12:59
shazam094
http://ddh.ucoz.site/forum/35-18-1
shazam094
shazam094
29.07.2016 в 12:59
shazam094
manuni men yozmaganman kim yozgan?
shazam094
shazam094
29.07.2016 в 12:57
shazam094
bosib 4iqdim
shazam094
LitCo
29.07.2016 в 12:17
LitCo
mana men nnmuz.comga qoshgan narsalar ko'rib klass bosib chiq http://nnmuz.com/user/dilshod2747/news/ iltimos
LitCo
LitCo
29.07.2016 в 12:10
LitCo
yoq u onlayn testku! Sertifikat xam onlayn beriladi sen uni ko'chirib olishing mumkun
LitCo
shazam094
29.07.2016 в 09:36
shazam094
sertifikat qolizga berganmi?
shazam094
shazam094
29.07.2016 в 09:33
shazam094
a chiqdi
shazam094
shazam094
29.07.2016 в 09:32
shazam094
chiqmayapdiku
shazam094
LitCo
28.07.2016 в 21:01
LitCo
alooooooooooo!.
LitCo
LitCo
LitCo
shazam094
27.07.2016 в 19:02
shazam094
yoq reg qmaganman
shazam094
shazam094
27.07.2016 в 19:01
shazam094
aka menga Adobe after effects CS4 programma ni topib berin ska4at qilaman
shazam094
LitCo
27.07.2016 в 16:52
LitCo
shazam nnmuz.da reg qilganmisan??
LitCo
shazam094
27.07.2016 в 09:57
shazam094
unlike unlike unlike
shazam094
shazam094
26.07.2016 в 19:50
shazam094
meniki animasiyalik sizdiki prostoy tuftaku
shazam094
LitCo
LitCo
shazam094
26.07.2016 в 19:41
shazam094
http://forum.livestar.uz/index.php?/profile/310-shohruxshazam/
shazam094
shazam094
26.07.2016 в 19:41
shazam094
davay qoyin avatarni mana meniki http://forum.livestar.uz/index.php?/profile/310-shohruxshazam/
shazam094
LitCo
26.07.2016 в 19:40
LitCo
meniki 4otki seniki aoldin tayyorlangan!
LitCo
shazam094
26.07.2016 в 19:40
shazam094
meniki avatarga mos tuwadi sizdiki esa yoq go livestar.ga koramiz
shazam094
shazam094
26.07.2016 в 19:39
shazam094
axaxaxa
shazam094
LitCo
26.07.2016 в 19:39
LitCo
senikidan zo'r meniki!
LitCo
shazam094
26.07.2016 в 19:39
shazam094
tin
shazam094
shazam094
26.07.2016 в 19:38
shazam094
xa
shazam094
Необходима авторизация
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0