Jump to content
Sign in to follow this  
vavan1955

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

Recommended Posts

По просьбе юзера данного форума - 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;
}
Вроде всё расписал, даже комментарии к классам сделал. Вопросов не должно быть, дальше разбираемся сами.

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

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

  • +1 2

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

post-9184-0-24897800-1309506114_thumb.jpg

Edited by tehnikawdom
не надо цитировать предыдущие огромные сообщения

Share this post


Link to post
Share on other sites

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

post-9184-0-24897800-1309506114_thumb.jpg

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

.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;
}

Share this post


Link to post
Share on other sites

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

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

Edited by afwollis
да и вобще не стоит увлекаться цитированием ;)

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

если чуть немного изменить 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;

}

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.