Описание:
Изменяем $CATEGORIES$ стилем CSS для uCoz. Многие пользователи uCoz сталкиваются с проблемой того что категории не возможно отредактировать или изменить цвет стиль и ширину, так вот на это есть классы уже встроенные в категории и их названия.
Раньше был способ создавать свое меню категорий через информер, все вроде хорошо и ставим классы и стили какие хотим, но вот скорость обновления такого информера всем известна, 15 минут, а в нашем случае все сразу и так же редактируется и создается привлекательный вид меню под категорий.
Смотрите пример на скрине, сравнения до и после вставленного стиля, после не забывайте проверить во всех браузерах правильность работы стилей.
Установка:
Вставляем в таблицу CSS в самый низ и сохраняем, далее визуально несколько раз обновляем страницу и смотрим изменения , делая редактирование ширины размера.
Code
.catsTable {
width:205px; /* - прописываем длину таблице */
overflow: hidden; /* - Отображается только область внутри элемента */
border-collapse:0px; /* - Линия между ячейками таблицы = 0*/
}
.catsTd {
width:205px; /* - прописываем длину ячейки td */
height:22px; /* - прописываем высоту ячейки td*/
color:#9e9ea0; /* - цвет текста */
}
a.catName:link,
a.catName:visited,
a.catName:active {
font:11px Verdana,Arial,sans-serif; /* - шрифт и его размер */
color:#555; /* - цвет текста */
margin:0; /* - запрещаем внешние отступы */
float:left; /* - выравниваем элемент по левому краю */
width:190px; /* - прописываем длину ячейки с учётом внутренних отступов padding:3px 0px 0px 10px; */
height:19px; /* - прописываем высоту */
display:block; /* - Элемент показывается как блочный*/
position:absolute; /* - Указывает, что элемент абсолютно позиционирован,*/
padding:3px 0px 0px 10px; /* - внутренние отступы */
border-top: 1px solid #D0D0D0!important; /* - верхняя линия рамки */
}
.catsTd a:hover{
background:#fff /* - фон ссылки при нажатии */
}
.catNumData {
float:right; /* - выравниваем элемент по правому краю */
position: relative; /* - устанавливается относительно его исходного места */
margin: 5px 5px 0px 0px; /* - внешние отступы */
font:9px Verdana,Arial,sans-serif; /* - шрифт и его размер */
font-weight: bold; /* - делаем шрифт жирным */
}
.catDescr{
color:#555; /* - цвет текста */
font-weight: bold; /* - делаем шрифт жирным */
text-align:right; /* - Выравнивание текста по правому краю*/
margin: 22px 0px 5px 0px!important; /* - внешние отступы */
padding: 10px 7px 0px 0px; /* - внутренние отступы */
border-top: 1px solid #D0D0D0!important; /* - верхняя линия рамки */
}
Перед нами обычная таблица с классом class="catsTable" и ячейками тега td class="catsTd" в который установлена:
- ссылка на нужную категорию (class="catName")
- контейнер span, количество материалов в категории (class="catNumData")
- контейнер div с описанием категории (class="catDescr")
все выше перечисленные классы помогут нам преобразовать внешний вид меню категорий, благодаря css стилям.
Как вы видите из данного кода, мы установили таблицы и ячейкам td нужный нам размер, в которых прописали контейнеру span отображение внутри ссылки с правой стороны таблицы, тем самым мы видим выделения фона нужной нам категории, при наведении на неё стрелкой мыши.
А контейнер div как я уже писал выше, служил для описание между категориями.