Головна » 2013 » Жовтень » 17 » Книжковий вид категорій
02:04
Книжковий вид категорій

Досить приємний на вигляд вид категорій. Чудово підійде для книжкових сайтів чи для будь-яких інших тематик. Його повністю можна з легкістю налаштувати під себе. В даному варіанті вид для темних дизайнів.
Проста та зрозуміла установка, нічого зайвого. 

Установка:
1) Вставте клас нижче перед $CATEGORIES$. Якщо не знаєте де це то: Управління дизайном/Первый контейнер, шукайте там (це для одноблочного сайту в іншому випадку може бути в другому контейнері). Скопіюйте і замініть: 
Код
<div class="portrait-navigation">$CATEGORIES$</div>
2) Даний код в CSS:
Код
/* Книжное оглавление категорий  
------------------------------------------*/  
.portrait-navigation {  
  float:left;  
  width:210px;  
  overflow: hidden;  
  background: #737373;  
  margin-right: 20px;  
  border: 0px solid #CAD3DA;  
  padding: 0px 10px 15px 10px;  
  border-radius:5px;  
}  

.portrait-navigation .catsTable {  
  width:210px;  
  border-collapse:0px;  
  font:12px Tahoma,Arial,sans-serif;  
}  

.portrait-navigation .catsTd {  
  float:left;  
  width:210px;  
  height:23px;  
  color:#9e9ea0;  
  position:relative;  
  border-bottom: 2px dotted #D0D0D0!important;  
}  

.portrait-navigation a.catName:link,  
.portrait-navigation a.catName:visited,  
.portrait-navigation a.catName:active {  
  color:#777;  

  background:#737373;  
  padding-right: 6px;  
  position:absolute;  
  top: 13px;  
  left: 0px;  
}  

.portrait-navigation .catsTd a:hover{  
  font-weight: bold;  
  color:#5c5c5c;  
}  
   
.portrait-navigation .catNumData {  
  padding-left: 6px;  
  background:#737373;  
  position:absolute;  
  top: 13px;  
  right: 0px;  
  font:10px Tahoma,Arial,sans-serif;  
  font-weight: bold;  
  color:#F38479;  
}  
.portrait-navigation img,  
.portrait-navigation .catDescr{display:none}

Джерело: center-dm.ru
Категорія: Вид матеріалів | Переглядів: 734 | Додав: Feraligatr | Теги: вид | Рейтинг: 5.0/2
X
Посилання:
BB-код:
HTML-код:
Всього коментарів: 0
Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]