Приветствую Вас Прохожий | RSS Воскресенье, 11.12.2016, 09:02
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 8
Гостей: 7
Пользователей: 1
sergaw



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Изменяем $CATEGORIES$ стилем CSS для uCoz

Изменяем $CATEGORIES$ стилем CSS для uCoz Изменяем, CATEGORIES, стилем, для, uCoz
Описание:
Изменяем $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 как я уже писал выше, служил для описание между категориями.
Автор\Источник: www.center-dm.ru

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 7704 | Комментарии: 9 | Рейтинг: 3.9/15 | |Категория: Скрипты блоки и шапки | Добавил: мир | Дата: 24.05.2012 | Скачали: 0 | Теги: Изменяем, CATEGORIES, ucoz, Для, стилем
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 9
9 Bondi   Дата: 19.05.2015  Время: 20:48   [№ 15465]
Помогите, я не понял как его добавить, точней я прописал его там в css файл, но оно нечего не изменило.

7 elena_Bergen   Дата: 13.08.2012  Время: 18:21   [№ 13565]
Спасибо. Давно с ними маялась

5 Nike74   Дата: 03.08.2012  Время: 17:24   [№ 13532]
Спасибо поставил себе. Вот только как линию продвинуть влево больше?

6 mdbaner   Дата: 04.08.2012  Время: 00:04   1 [№ 13533]
Линия какая? между категориями это графический элемент, и что бы растянуть нужно использовать редактор графического изображения, к примеру Фотошоп.

3 bemdoneop   Дата: 13.07.2012  Время: 16:57   [№ 13450]
чёто нифига) установил, но ничего не поменялось, как было по стандарту, так и осталось

-1   Спам
4 мир   Дата: 13.07.2012  Время: 17:02   1 [№ 13451]
Нажмите Ctrl+F5 и увидете чудеса. Обновите кэш и тогда увидите изменения.
И реализовать можно по отношению только к стандартному блоку, самоделка уже имеет другие классы.

8 bemdoneop   Дата: 09.02.2013  Время: 20:24   2 [№ 14468]
чистил все на счете, обновлял страницу не раз, все равно ничего не изменилось!!!

+1   Спам
2 Snoopak   Дата: 19.06.2012  Время: 18:07   [№ 13301]
спасибо

1 AntoHa94   Дата: 06.06.2012  Время: 21:07   [№ 13240]
Спасибооооо


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru