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

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

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

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

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

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.