Делаем свой дизайн блока категорий

[vavan1955]

По просьбе юзера данного форума - tehnikawdom решил написать как сделать своё оформление блока категорий, по аналогии можно изменить дизайн всех блоков.

И так начнем:

По ЭТОЙ ТЕМЕ была задача сделать меню категорий по дизайну КАК ЗДЕСЬ - 9 Меню.

Качаем себе вот эту картинку и кидаем в папку image своего шаблона оформления.

Сделали? Молодцом!!! Теперь откроем таблицу стилей, это файл stylesheet.css вашего шаблона.

Находим вот этот код, который отвечает за дизайн всех левых и правых блоков:

.box {
	margin-bottom: 10px;
	background: url('../image/box_top.png') no-repeat;
}
.box .top {
	padding: 8px 0px 8px 7px;
	color: #000000;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}
.box .top img {
	float: left;
	margin-right: 5px;
}
.box .middle {
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	background: #FFFFFF;
	padding: 10px;
}
.box .bottom {
	height: 5px;
	background: url('../image/box_bottom.png') no-repeat;
}

Выделяем, копируем и вставляем ниже.

Далее для класса .box добавляем canegory. У нас должно получиться так - .box_category

Добавляем везде в скопированном коде.

Находим #category и меняем его содержимое на:

#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
	list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ;
}

#category {
    margin: 0px;
    width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ;
}
#category li a {
    text-decoration: none;
}
#category li a:link, #category li a:visited {
    background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка когда курсор не наведён ;
    color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;
    display: block;
    padding: 0 0 0 32px;
}
#category li a:hover {
    background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;
    color: #000;height:32px;
    padding: 0 0 0 32px;
}

Дплее в своём шаблоне в папке module находим файл category.tpl

В самом начале тоже добавляем category чтоб получилось вот так - <div class="box_category">

Всё. Этот класс будет отвечать за дизайн только блока категорий и некоим образом не коснётся других блоков.

Теперь правим класс как нам хочется.

Для tehnikawdom я сделал вот так:

.box_category {
	margin-bottom: 10px; // Определяет отступ между блоками по вертикали ;
	background: url('../image/box_top.png') no-repeat; // Верхняя картинка блока - Шапочка;
}
.box_category .top {
	padding: 8px 0px 8px 7px;
	color: #000000; // Цвет заголовка категории ;
	font-size: 14px; // Размер шрифта заголовка ;
	font-family: Arial, Helvetica, sans-serif; // Без комментариев ;
	font-weight: bold; // Определяет что шрифт жирный ;
	text-transform: uppercase;
}
.box_category .top img {
	float: left;
	margin-right: 5px;
}
.box_category .middle {
	border-left: 1px solid #DDDDDD; // Левая бордюра бокса ;
	border-right: 1px solid #DDDDDD; //Правая бордюра бокса ;
	background: #FFFFFF;
	padding: 0px;
}
.box_category .bottom {
	height: 5px;
	background: url('../image/box_bottom.png') no-repeat; // Нижняя картинка бокса ;
}

#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
	list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ;
}

#category {
    margin: 0px;
    width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ;
}
#category li a {
    text-decoration: none;
}
#category li a:link, #category li a:visited {
    background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка когда курсор не наведён ;
    color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;
    display: block;
    padding: 0 0 0 32px;
}
#category li a:hover {
    background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;
    color: #000;height:32px;
    padding: 0 0 0 32px;
}

Вроде всё расписал, даже комментарии к классам сделал. Вопросов не должно быть, дальше разбираемся сами.

Использовал дефолтный шаблон!!!

Спасибо за внимание.

[tehnikawdom]

Всё отлично, всё ОК, всё работает!

Пользуемся!!!

Большое спасибо, vavan1955!

Обязательно плюс и комментарий! :rolleyes:

Многим я думаю поможет эта тема.

где то же можно подправить чтобы названия подкатегории были сдвинуты вправо, как изначально, а не стояли на одном уровне с род.категориями:

Змінено 16 серпня 2012 користувачем tehnikawdom
не надо цитировать предыдущие огромные сообщения

[vavan1955]

А где можно изменить размер, стиль, тип шрифта для названия категории?

А я для чего прокомметировал в таблице стилей?

.box_category .top {
        padding: 8px 0px 8px 7px;
        color: #000000; // Цвет заголовка категории ;
        font-size: 14px; // Размер шрифта заголовка ;
        font-family: Arial, Helvetica, sans-serif; // Без комментариев ;
        font-weight: bold; // Определяет что шрифт жирный ;
        text-transform: uppercase;
}

[tehnikawdom]

что то ты перепутал с этим, это же изменения для шапки блока (КАТЕГОРИИ).

А надо для САМИХ категорий внутри блока которые!! А вот этого я не нашёл где...

Змінено 1 липня 2011 користувачем afwollis
да и вобще не стоит увлекаться цитированием ;)

[vavan1955]

Да, я был на работе, спешил и видимо не понял вопрос.

Я не задавался целью менять что либо для подкатегорий, оно мне и не надо. Я же написал -...дальше разбираемся сами.

Мне разбираться нет времени да и в кодинге я не очень, сам прошу помощи.

[tehnikawdom]

Если кто найдёт больше картинок для меню - выкладывайте сюда. Из тех предложенных, выбор небольшой! :rolleyes:

[tehnikawdom]

vavan1955,а знаешь как реализовать выпадающее меню??? нажимаешь на рол.категорию и сразу вылетают подкатегории (снизу, сбоку) ???

[vavan1955]

Если кто найдёт больше картинок для меню - выкладывайте сюда. Из тех предложенных, выбор небольшой! :rolleyes:

Причем здесь картинки фри.

Как реалиовать выпадающее меню???? Всё можно но...

[snastik]

если чуть немного изменить CSS чтобы получилось вот так

#category ul {

margin-top: 0px;

margin-bottom: 0px;

margin-left: 0px;

padding-left: 0px;

list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ;

}

#category {

margin: 0px;

width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ;

}

#category li a {

text-decoration: none;

}

#category li li a:link, #category li a:visited {

background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // для подкатегории Картинка когда курсор не наведён ;

color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;

display: block;

padding: 0 0 0 32px;

}

#category li a:link, #category li a:visited {

background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка когда курсор не наведён ;

color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;

display: block;

padding: 0 0 0 32px;

}

#category ul li li a:hover {

background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // для подкатегории Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;

color: #000;height:32px;

padding: 0 0 0 32px;

}

#category ul li a:hover {

background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;

color: #000;height:32px;

padding: 0 0 0 32px;

}

то мы получим другой цвет подкатегории визуально так перестают сливаться категория и подкатегория