Модификация навигации пользователя и верхнего меню в стандартном шаблоне

EN.

Проверенные
Сообщения
282
Реакции
572
Баллы
825
Переходим в Внешний вид - Стили - Default style - Шаблоны и в extra.less вставляем следующий код

Код:
/*!
 * Изменяем заливку навигации
 */
.p-nav {
  background: #тут желаемый цвет самой навигации (где кнопки);
}
/*!
 * Изменяем заливку футера
 */
.p-footer {
  background: #тут желаемый цвет футера (подвала снизу);
}
/*!
 * убираем закругление в верхнем меню
 */
.p-nav-list .p-navEl.is-selected {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
/*!
 * убираем закругление в верхнем меню (пользователь и поиск)
 */
.p-navgroup {
  background: rgba(0,0,0,0);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.p-navgroup-link.is-menuOpen {
  background: rgb(35, 93, 134);
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0.35);
}
.p-navgroup.p-discovery {
  margin-left: 0px;
}
.p-navgroup-link {
  padding: 8px 6px;
  border-left: 0px solid rgba(20,20,20,0.15);
}   
.p-navgroup-link.badgeContainer {
  opacity: 1;
}
.p-navgroup-link:first-of-type {
  border-top-left-radius: 0px;
}
.p-navgroup-link:last-of-type {
  border-top-right-radius: 0px;
}

Для отображения "Профиль" вместо ника и аватара, отображения иконок заменяем стандартные участки кода в page_container на следующий

Иконки возле кнопок "Вход" и "Регистрация"

Код:
<xf:else />
                        <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-xf-click="overlay">
                            <i class="fa fa-sign-in" aria-hidden="true"></i>
                            <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                        </a>
                        <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register" rel="nofollow" data-xf-click="overlay">
                            <i class="fa fa-sign-out" aria-hidden="true"></i>
                            <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
                        </a>
                    </xf:if>

Для отображения "Профиль" и иконки, вместо аватарки

Код:
<a href="{{ link('account') }}"
                                class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user"
                                data-xf-click="menu"
                                data-xf-key="{{ phrase('shortcut.visitor_menu') }}"
                                data-menu-pos-ref="< .p-navgroup"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i class="fa fa-window-maximize" aria-hidden="true"></i>
                                <span class="p-navgroup-linkText">Профиль</span>
                            </a>

Основной цвет шапки меняется в Внешний вид - Стили - Default style - Настройки стиля - Цветовая палитра - Color 5

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

Вложения

  • 1.png
    1.png
    5.7 KB · Просмотры: 280
  • 2.png
    2.png
    4.9 KB · Просмотры: 272
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу