Форум русской поддержки Joomla!® CMS
05.12.2016, 20:42:25 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Изменить дизайн одного пункта меню

 (Прочитано 182 раз)
0 Пользователей и 1 Гость смотрят эту тему.
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« : 01.07.2016, 12:05:17 »

Здравствуйте!
Есть сайт http://www.dvernoyclub.ru/, в меню, где идут пункты "Каталог товаров", "Акции и подарки" и так далее. Есть пункт (самый последний) "Купить в кредит". Для этого пункта нужно сделать совсем другое оформление.
Пробовал прописать отдельный класс в CSS, вывел его модулем в позицию меню, подогнал на нужное место, но появилась проблема, при изменении размера экрана блок уезжает, то есть он не ведет себя так, как ведет меню.
Подскажите, пожалуйста, как привязать свой класс к пункту меню, чтобы он не уезжал, а вел себя один в один как пункт меню. Или может есть какое-то другое решение?  !
Решение через ::before не подходит, так как в блоке будет картинка, текст и ссылка.
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

Пол: Мужской
Сообщений: 6456



« Ответ #1 : 01.07.2016, 12:13:22 »

у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код
.item-139 > a {
   background-color: #88c500;
   color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
   background-color: #f00;
   color: #fff !important;
}

фон картинкой привязывайте именно к ссылке, сместить текст ссылки можно внутренними отступами и высотой строки (требуется подгонка по месту на разных экранах)
Записан
Biss
Завсегдатай
*****

Репутация: +64/-0
Offline Offline

Пол: Мужской
Сообщений: 661



« Ответ #2 : 01.07.2016, 12:47:18 »

Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
Записан
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #3 : 01.07.2016, 17:15:14 »

у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код
.item-139 > a {
   background-color: #88c500;
   color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
   background-color: #f00;
   color: #fff !important;
}

фон картинкой привязывайте именно к ссылке, сместить текст ссылки можно внутренними отступами и высотой строки (требуется подгонка по месту на разных экранах)
Я понял вас, спасибо.
А чтобы применить определенный стиль к тексту, конкретно в этой ссылке тоже нужно прописывать вот тут?
Код:
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}
Записан
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #4 : 01.07.2016, 17:15:41 »

Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
Стиль для текста тоже тут можно указать? И если сделать еще .sale:hover, будет работать?
Записан
Biss
Завсегдатай
*****

Репутация: +64/-0
Offline Offline

Пол: Мужской
Сообщений: 661



« Ответ #5 : 01.07.2016, 18:22:54 »

.sale a{
    color: #cd2626;
}
.sale a:hover{
    color: #cd2626;
}
возможно надо будет добавить !important и кроме того указывать родителя .nav li.sale a:hover как то так, но это надо пробовать
« Последнее редактирование: 01.07.2016, 18:37:24 от Biss » Записан
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #6 : 01.07.2016, 20:45:16 »

Хорошо, понял, спасибо.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet