» »

Переключатели страниц в разном цвете uCoz


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

Выбераем подходящий вариант, и скопируйте код в таблицы стилей вашего сайта:

1. Красный

Код
.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 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
  }  
  .catPages1 b,  
  .catPages2 b,  
  .pagesBlock1 b,  
  .pagesBlock2 b,  
  .pagesBlockuz1 b,  
  .pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#e74c3c;  
  }  
  .catPages1 a:hover,  
  .catPages2 a:hover,  
  .pagesBlock1 a:hover,  
  .pagesBlock2 a:hover,  
  .pagesBlockuz1 a:hover,  
  .pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#c0392b;  
  }

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 {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
  }  
  .catPages1 b,  
  .catPages2 b,  
  .pagesBlock1 b,  
  .pagesBlock2 b,  
  .pagesBlockuz1 b,  
  .pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#f1c40f;  
  }  
  .catPages1 a:hover,  
  .catPages2 a:hover,  
  .pagesBlock1 a:hover,  
  .pagesBlock2 a:hover,  
  .pagesBlockuz1 a:hover,  
  .pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#f39c12;  
  }

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 {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
  }  
  .catPages1 b,  
  .catPages2 b,  
  .pagesBlock1 b,  
  .pagesBlock2 b,  
  .pagesBlockuz1 b,  
  .pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#7cb29b;  
  }  
  .catPages1 a:hover,  
  .catPages2 a:hover,  
  .pagesBlock1 a:hover,  
  .pagesBlock2 a:hover,  
  .pagesBlockuz1 a:hover,  
  .pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#649491;  
  }

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 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
  }  
  .catPages1 b,  
  .catPages2 b,  
  .pagesBlock1 b,  
  .pagesBlock2 b,  
  .pagesBlockuz1 b,  
  .pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#3498db;  
  }  
  .catPages1 a:hover,  
  .catPages2 a:hover,  
  .pagesBlock1 a:hover,  
  .pagesBlock2 a:hover,  
  .pagesBlockuz1 a:hover,  
  .pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#2980b9;  
  }

Источник: http://yraaa.ru/
29.12.2015 Просмотров: 438 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Сопрано
Сопрано 29.12.2015 20:411
0
Красивая подборка, на любую гамму цвета можно подобрать.
Slavik
Slavik 29.12.2015 20:544
0
Да.
Kosten
Kosten 29.12.2015 20:442
0
Как понимаю, их можно больше по дизайну сделать.
FeStemBer
FeStemBer 29.12.2015 20:533
0
Прежде ставить новые, то с начало уберите если уже ставили дизайнерские, в CSS они должны.
AnTron
AnTron 30.12.2015 02:225
0
Костен, что не разместил изображение под каждые стили, как то не серьезно подошел.
nikolla76
nikolla76 30.12.2015 02:266
0
AnTron, вот потому потом и вопросы, что да как, не чего не получается, просто не читаете установку, так как видать больше знаете, а в твоем случай, посмотри кто разместил эти переключатели.
csretven
csretven 30.12.2015 02:297
0
Вам что делать не чего, как обсуждать, что залили, что нет. Вы читать умеете, думаю этого в полне хватит.
Kosten
Kosten 30.12.2015 02:348
0
А что одного изображение мало, или просто не можешь понять, что на какой оттенок стили идут, так бы отписал, думаю здесь бы подсказали.
nikolla76
nikolla76 30.12.2015 03:289
0
Kosten, вообще не про это, просто люди не читают, и потом много вопросов, а особенно пишут, что не работает, но ты спроси, что как делать, все с этого начинали, не все гением становятся.
Slavik
Slavik 30.12.2015 11:3610
0
Да многие сейчас описание не читают!, а это зря. Но тут я не чем не могу помочь если у кого-то не внимательность или лень читать.
avatar