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


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



Статистика
Онлайн всего: 37
Гостей: 37
Пользователей: 0



Главная » Файлы » Скрипты для 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

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

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

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

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

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

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

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

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

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

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


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

Форма входа


Поиск


На форуме

1 Работа на заводе

29

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

54

3 Армия

0

4 Может у кого есть!

6

5 Нужны копирайты

1

6 Остались честные СМИ?

0

7 Раздача подарков и стик...

1

8 Дисковое пространство

3

9 Ручной прогон по трасто...

19

10 бот для умножения денег...

0


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


Комментарии



Copyright UcozOn.ru™ © 2008-2024


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