Переключатели страниц для 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 Просмотров: 1929 Категория: Интересные решения Комментарии
avatar
1
Admin, спасибо огромное! давно искал что-то действительно стоящее, и вот оно!! Забрал 3 вариант)) Мне он больше подходит на сайте! biggrin
avatar
0
2
Не за что)
avatar
3
Как изменить цвет кнопок?
avatar
1
4
Что изменить цвет кнопки, которая указывает на текущую страницу, изменяем значение 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
5
Flat элементы как всегда красивы
+1
avatar
1
6
Всегда пожалуйста)
avatar
7
Чему будет равно число видимых страниц (1 2 3 4 5 >>) и как можно изменить его до 10?
avatar
8
super! what i looking for!
avatar