ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Переключатели страниц в разном цвете uCoz

Переключатели страниц в разном цвете 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 Декабря 2015 Просмотров: 1968 Комментариев: (10)

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

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

Slavik

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: Сопрано 29 Декабря 2015 20:41¹ 0 Красивая подборка, на любую гамму цвета можно подобрать. Slavik 29 Декабря 2015 20:54⁴ 0 Да. Kosten 29 Декабря 2015 20:44² 0 Как понимаю, их можно больше по дизайну сделать. FeStemBer 29 Декабря 2015 20:53³ 0 Прежде ставить новые, то с начало уберите если уже ставили дизайнерские, в CSS они должны. AnTron 30 Декабря 2015 02:22⁵ 0 Костен, что не разместил изображение под каждые стили, как то не серьезно подошел. Марковичь 30 Декабря 2015 02:26⁶ 0 AnTron, вот потому потом и вопросы, что да как, не чего не получается, просто не читаете установку, так как видать больше знаете, а в твоем случай, посмотри кто разместил эти переключатели. csretven 30 Декабря 2015 02:29⁷ 0 Вам что делать не чего, как обсуждать, что залили, что нет. Вы читать умеете, думаю этого в полне хватит. Kosten 30 Декабря 2015 02:34⁸ 0 А что одного изображение мало, или просто не можешь понять, что на какой оттенок стили идут, так бы отписал, думаю здесь бы подсказали. Марковичь 30 Декабря 2015 03:28⁹ 0 Kosten, вообще не про это, просто люди не читают, и потом много вопросов, а особенно пишут, что не работает, но ты спроси, что как делать, все с этого начинали, не все гением становятся. Slavik 30 Декабря 2015 11:36¹⁰ 0 Да многие сейчас описание не читают!, а это зря. Но тут я не чем не могу помочь если у кого-то не внимательность или лень читать.