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

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

Helix 3 - размер и цвет шрифта основного меню и социальных кнопок

 (Прочитано 215 раз)
0 Пользователей и 1 Гость смотрят эту тему.
lesovik
Захожу иногда
**

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

Сообщений: 19


« : 11.04.2017, 01:23:12 »

Добрый день, уважаемые специалисты!

Подскажите, пожалуйста, где в шаблоне Helix 3 Framework меняется размер и цвет:

1. шрифа основного меню, идущего в комплекте шаблона по умолчанию (позиция Header / menu);
2. социальных кнопок, также по умолчанию размещенных слева вверху (позиция Top bar / top1).

На картинке я изобразил, чего хочу: http://savepic.ru/13547585.png

Я хотел бы изменить цвет социльных кнопок в состоянии, когда мышка не наведена, с невзрачного серого на какой-нибудь более заметный. Не нашел. Но нашел только то, что в менеджере стилей шаблона можно изменить размер этих кнопок, меняя размер шрифта в разделе "Менеджер шаблонов / Изменить стиль / Typography". А цвет там поменять нельзя.

А что касается меню, то я хотел бы увеличить размер шрифта и, возможно, изменить цвет пунктов меню. Но в упомянутом выше разделе "Менеджер шаблонов / Изменить стиль / Typography" мне не удалось найти строки шрифта, который бы меня размер текста в меню. При этом там меняются все прочие шрифты - для текстов, названий и даже для соцкнопок.

Большое спасибо.
« Последнее редактирование: 15.04.2017, 01:48:09 от lesovik » Записан
Serg_
Осваиваюсь на форуме
***

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

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

Skype: smile_bot (Запорожье)


« Ответ #1 : 11.04.2017, 06:59:08 »

1. В настройках шаблона во вкладке Typography есть блок NAVIGATION FONT. Делаете "enable" и настраиваете шрифт и размер меню
Если знакомы с CSS, то в файле menu.less (только в шаблоне включите "Compile LESS to CSS" во вкладке Advanced)
2. Основные свойства класса социальных кнопок (.social-icons) задаются в файле theme.less, а цвет при наведении в файле presets.less (стили из presets.less применяются после theme.less)
Для
Цитировать
Я хотел бы изменить цвет социльных кнопок в состоянии, когда мышка не наведена
в файле theme.less находите свойство ul.social-icons и меняете свойство ссылки в этом классе {color: #999999; }  на свой цвет.
Записан
lesovik
Захожу иногда
**

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

Сообщений: 19


« Ответ #2 : 12.04.2017, 03:08:38 »

1. В настройках шаблона во вкладке Typography есть блок NAVIGATION FONT. Делаете "enable" и настраиваете шрифт и размер меню

Спасибо, Serg, за советы.

Интрига в том, что в разделе Typography получается поменять жирность шрифта, тип. А вот на изменение размера шрифта меню на сайте не реагирует никак. Жирным шрифт сделал. А размер ставил и 25, и 45 - ноль эмоций. Может, в шаблоне разработчики просто забыли указать этот параметр? Я потому выше и написал, что в Typography нет рычага влияния...

По CSS еще пробую, повторно, ибо не спец. Первый раз параметр, вроде бы, нашел, но не вышло, переставил всю Joomla и шаблон для чистоты.
« Последнее редактирование: 12.04.2017, 03:13:33 от lesovik » Записан
lesovik
Захожу иногда
**

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

Сообщений: 19


« Ответ #3 : 12.04.2017, 03:36:41 »

2. Основные свойства класса социальных кнопок (.social-icons) задаются в файле theme.less, а цвет при наведении в файле presets.less (стили из presets.less применяются после theme.less)
Для в файле theme.less находите свойство ul.social-icons и меняете свойство ссылки в этом классе {color: #999999; }  на свой цвет.

Изменить цвет соцкнопок при НЕнаведенной мышке мне не удалось. Нашел ul.social-icons, там стоял цвет #999999, серый как раз. Я сменил его на красный #ff0000. Как были соцы серыми, так и остались. Сменил обратно на серый пока что. Не понимаю, почему не меняется.

Код:
ul.social-icons {
    list-style: none;
    padding: 0;
    margin: -5px;
    display: inline-block;
    >li {
        display: inline-block;
        margin: 5px 7px;
        a {
            color: #999999;
        }
    }
}
Записан
Serg_
Осваиваюсь на форуме
***

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

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

Skype: smile_bot (Запорожье)


« Ответ #4 : 12.04.2017, 07:01:44 »

Цитировать
Нашел ul.social-icons, там стоял цвет #999999, серый как раз. Я сменил его на красный #ff0000.
При любом изменении в less надо в шаблоне включить "Compile LESS to CSS" во вкладке Advanced и почистите кеш браузера.
Записан
darkghost
Практически профи
*******

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

Сообщений: 1907



« Ответ #5 : 12.04.2017, 11:40:59 »

с приведенного фрагмента CSS шо то тяжеловато понять как и шо и куда. Смотрим демо
Показать текстовый блок
Цвет соц-кнопок вот он .../templates/shaper_helix3/css/template.css (2022)
Код:
ul.social-icons > li a {
    color: ---изменяем;
}
Чтобы прописать цвет при наведении необходимо добавить "псевдо", например
Код:
ul.social-icons > li a:hover { правило }
Размер шрифта меню изменяется в том же файле, строка 813
Код:
.sp-megamenu-parent > li > a {
    color: #----цвет;
    display: inline-block;
    font-size: ---размер-px;
    ...
Записан
lesovik
Захожу иногда
**

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

Сообщений: 19


« Ответ #6 : 12.04.2017, 12:23:31 »

При любом изменении в less надо в шаблоне включить "Compile LESS to CSS" во вкладке Advanced и почистите кеш браузера.

Уважаемый Serg, большое спасибо. Я, вроде бы, включал это и в первый раз, но "работы было продело много, а дело не пошло". Пока ночь да утро, наверное, кеш сам почистился, и терерь соцкнопки перекрашиваются. Удивительно. Спасибо за помощь.
Записан
lesovik
Захожу иногда
**

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

Сообщений: 19


« Ответ #7 : 12.04.2017, 12:24:20 »

с приведенного фрагмента CSS шо то тяжеловато понять как и шо и куда. Смотрим демо
Показать текстовый блок
Цвет соц-кнопок вот он .../templates/shaper_helix3/css/template.css (2022)
Код:
ul.social-icons > li a {
    color: ---изменяем;
}
Чтобы прописать цвет при наведении необходимо добавить "псевдо", например
Код:
ul.social-icons > li a:hover { правило }
Размер шрифта меню изменяется в том же файле, строка 813
Код:
.sp-megamenu-parent > li > a {
    color: #----цвет;
    display: inline-block;
    font-size: ---размер-px;
    ...

Уважаемый Darkhost, большое спасибо. Буду изучать.
Записан
lesovik
Захожу иногда
**

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

Сообщений: 19


« Ответ #8 : 12.04.2017, 15:50:19 »

...Смотрим демо
Показать текстовый блок
Цвет соц-кнопок вот он .../templates/shaper_helix3/css/template.css (2022)
Код:
ul.social-icons > li a {
    color: ---изменяем;
}
...
Размер шрифта меню изменяется в том же файле, строка 813
Код:
.sp-megamenu-parent > li > a {
    color: #----цвет;
    display: inline-block;
    font-size: ---размер-px;
    ...

Уважаемый Darkhost, спасибо.

Получилось изменить размер шрифта основного меню через template.css. Также в указанном Вами файле я нашел свое новое значение цвета соцкнопок, которое чуть ранее изменил по совету Serg, используя файл menu.less.


[Далее пишу для всех, мало ли кому будет полезно.]

Попутно я понял, что означает всплывающая подсказка в админке к пункту "Compille LESS to CSS" - это значит, "в файле less меняешь - в template.css меняется автоматом".

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

В файле menu.less (на него мне указал Serg) я нашел тот параметр, который меняет размер шрифта для меню (sp-megamenu-parent, стр.813>818, совет от Darkhost). Он тут был на момент проверки 12px, хотя в template.css я его уже сменил на 20. Значит, смена размера в template.css не влияет на menu.less. А наоборот?

Поменял размер шрифта в menu.less. И изменилось значение в template.css.

Мораль:

1)

less-файлы позволяют менять состояние template.css. Вопрос только в том, чтобы правильно определить, как называется объект, чьи свойства надо изменить.

Если бы не указание Darkhost конкретно на sp-megamenu-parent, я бы так и мучался, потому что в файлах куча разных "menu", а мне додуматься до того, чтобы поводить мышкой над меню при открытом коде ("Просмотреть код") не сразу удалось, а когда удалось, не то искал (sp-menu-item).

2)

Делая изменения, надо чистить кэш браузера, чтобы после изменений увидеть результат (спасибо Serg за напоминание). Без почистки кеша мне в Google Chrome не удалось увидеть ни одного изменения. Как почистишь, сразу видно.

Google Chrome: Настройки - Показать дополнительные настройки -
 Личные данные - Очистить историю - тут снять галки, оставить только "Изображения и другие файлы, сохраненные в кэше"

--

Осталось, однако, непонятным, почему свойства меняются через код файлов, а в панели управления шаблонами, в разделе управления стилями, подраздел Typography, размер шрифта меню не удается изменить с использованием пункта Navigation font, если он для этого предназначен. Толщина шрифта меняется, а размер - не меняется.
« Последнее редактирование: 13.04.2017, 14:56:04 от lesovik » Записан
Страниц: [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