Материалы

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

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

Приятные переключатели, которые будут смотреться хорошо для Вашего дизайна и внесут приятный вклад в дизайн, например мне нравится больше всего 3й вариант, круглые переключатели, которые нынче пользуются большим спросом.
Данные переключатели выводятся через ucoz теги $PAGE_SELECTOR$ или $PAGE_SELECTOR1$.

Установка выполняется через добавления кода в CSS:
 

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


переключатель страниц ucoz, переключатель с заокругленными краями
.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


переключатель страниц ucoz, переключатель с прямоугольными краями
.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; 
}
 

Дополнение

Настройка цвета кнопок.

Что изменить цвет кнопки, которая указывает на текущую страницу, изменяем значение background у класса swchItemA. 
 
.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;    
}
Для изменения цвета остальных кнопок, изменяем значение 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;    
}

Советуем к просмотру:

Сохраните в социальную сеть
Прикрипления
Отсутствуют  

Комментарии
Комментариев пока нет, вы можете оставить комментарий первым.
Оставить комментарий
avatar