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

0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 567 Просмотров
*

lesovik

  • Осваиваюсь на форуме
  • ***
  • 28
  • 0
Добрый день, уважаемые специалисты!

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

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

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

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

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

Большое спасибо.
« Последнее редактирование: 15.04.2017, 02:48:09 от lesovik »

*

Serg_

  • Осваиваюсь на форуме
  • ***
  • 175
  • 23
  • Skype: smile_bot (Запорожье)
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

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

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

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

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

*

lesovik

  • Осваиваюсь на форуме
  • ***
  • 28
  • 0
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_

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

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
с приведенного фрагмента 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

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

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

*

lesovik

  • Осваиваюсь на форуме
  • ***
  • 28
  • 0
с приведенного фрагмента 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

  • Осваиваюсь на форуме
  • ***
  • 28
  • 0
...Смотрим демо
Спойлер
[свернуть]
Цвет соц-кнопок вот он .../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, если он для этого предназначен. Толщина шрифта меняется, а размер - не меняется.
« Последнее редактирование: 01.07.2017, 22:57:36 от lesovik »