Переключатели страниц для uCoz

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

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

Данные переключатели будут работать, если вы выводите его через $PAGE_SELECTOR$ или $PAGE_SELECTOR1$.

Переключатель #1

Код

.swchItemA{
  background: #64A281 !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  border: 1px solid #64A281;
  text-decoration: none;
}
.swchItem{
  background: white !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  border: 1px solid #e6e6e6;
  text-decoration: none;
}
.swchItem:hover{
  text-decoration: none;
  border: 1px solid #64A281 !important;
}

Переключатель #2

Код

.swchItemA{
  background: #64A281 !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border: 1px solid #64A281;
  text-decoration: none;
  margin: 2px -2px !important;
}
.swchItem{
  background: white !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border: 1px solid #e6e6e6;
  text-decoration: none;
  margin: 2px -2px !important;
}
.swchItem:hover{
  text-decoration: none;
  border: 1px solid #64A281 !important;
}

Переключатель #3

Код

.swchItemA{
  background: #64A281 !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border: 1px solid #64A281;
  text-decoration: none;
  border-radius: 100%;
}
.swchItem{
  background: white !important;
  font-size: 15px !important;
  font-family: 'PT Sans', sans-serif !important;
  padding: 10px 15px !important;
  border: 1px solid #e6e6e6;
  text-decoration: none;
  border-radius: 100%;
}
.swchItem:hover{
  text-decoration: none;
  border: 1px solid #64A281 !important;
}

Добавил: Admin Просмотров: 2345 Категория: Интересные решения Комментарии

Порядок вывода комментариев:

Спам

Morlock • 22:58, 07.06.2015

Admin, спасибо огромное! давно искал что-то действительно стоящее, и вот оно!! Забрал 3 вариант)) Мне он больше подходит на сайте! biggrin

Admin • 00:51, 08.06.2015

Не за что)

Спам

Premium • 15:21, 09.06.2015

Как изменить цвет кнопок?

Admin • 16:42, 09.06.2015

Что изменить цвет кнопки, которая указывает на текущую страницу, изменяем значение background у класса swchItemA.

Код

Для изменения цвета остальных кнопок, изменяем значение background у класса swchItem.

Код

.swchItem{
     background: white !important;
     font-size: 15px !important;
     font-family: 'PT Sans', sans-serif !important;
     padding: 10px 15px !important;
     border-radius: 5px !important;
     border: 1px solid #e6e6e6;
     text-decoration: none;
}

Спам

AvenTinator • 23:23, 13.06.2015

Flat элементы как всегда красивы
+1

Admin • 00:22, 14.06.2015

Всегда пожалуйста)

Спам

Eldrine • 10:10, 15.06.2015

Чему будет равно число видимых страниц (1 2 3 4 5 >>) и как можно изменить его до 10?

Спам

levanijincharadze • 01:11, 20.10.2015

super! what i looking for!

Спам

viktor-xox • 12:03, 08.07.2017

Здравствуйте. подскажите начинающему .... я код переключателя должен вставить в Таблица стилей (CSS), а потом как вывести мне на нужной странице переключатель страниц?