Вопрос помогите разобраться с css

Статус
Закрыто для дальнейших ответов.

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
имеем ТОП-меню, хочу малость изменить контрастность
1665804730585.png
знаний не хватает, не могу найти где и как, инспектор показывает
1665804877105.png
где найти этот класс или кнопку, какой шаблон? или я вообще не в те дебри полез )
Сообщение автоматически объединено:

есть шаблон
cxf_top_navigation:
<xf:css src="cxf_top_navigation.less" />

<div class="topNav">
    <div class="topNav-inner">
        <div class="topNav-scroller hScroller" data-xf-init="h-scroller">
            <span class="hScroller-scroll">
            <xf:include template="cxf_top_navigation_links" />
            </span>
        </div>
        <div class="topNav-visitor">
            <xf:if is="property('tn_visitorTabs') == 'VisitorTabs' OR property('tn_visitorTabs') == 'VisitorTabsAndSearch' OR property('tn_visitorTabs') == 'SearchTab'">
                <xf:include template="cxf_top_navigation_visitor" />
            </xf:if>
        </div>
    </div>
</div>

может здесь можно добавить код который подсветит строку меню по типу, как здесь
1665805354103.png
Сообщение автоматически объединено:

ага, в плагине нашел шаблон
cxf_top_navigation_links:
<xf:css src="cxf_top_navigation.less" />

<ul class="topNav-list">
    <xf:if is="{{ $xf.visitor.hasPermission('cxfTopNavigation', 'topLink1') }}">
    <xf:if is="$xf.options.tn_link1_title OR $xf.options.tn_link1_url OR $xf.options.tn_link1_icon">
    <xf:if is="$xf.options.tn_menu1">
        <li>
            <a href="{{ $xf.options.tn_link1_url }}" class="tn-link1 menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true" <xf:if is="$xf.options.tn_link1_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_link1_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> ><xf:if is="$xf.options.tn_link1_icon"><xf:fa icon="{{ $xf.options.tn_link1_icon }}" /></xf:if>{{ $xf.options.tn_link1_title }}</a>
            <div class="menu tn-menu1" data-menu="menu" aria-hidden="true" style="width: {$xf.options.tn_menu1_width}px; max-width: 97%;">
            <div class="menu-content">
            <xf:if is="$xf.options.tn_menu1_menuHeader"><h4 class="menu-header">{{ $xf.options.tn_menu1_menuHeader }}</h4></xf:if>
                <xf:if is="$xf.options.tn_menu1_sublink1_title OR $xf.options.tn_menu1_sublink1_url">
                    <a href="{{ $xf.options.tn_menu1_sublink1_url }}" class="tn-menu1-sublink1 menu-linkRow" <xf:if is="$xf.options.tn_menu1_sublink1_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_menu1_sublink1_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> >{{ $xf.options.tn_menu1_sublink1_title }}</a>
                </xf:if>
                <xf:if is="$xf.options.tn_menu1_sublink2_title OR $xf.options.tn_menu1_sublink2_url">
                    <a href="{{ $xf.options.tn_menu1_sublink2_url }}" class="tn-menu1-sublink2 menu-linkRow" <xf:if is="$xf.options.tn_menu1_sublink2_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_menu1_sublink2_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> >{{ $xf.options.tn_menu1_sublink2_title }}</a>
                </xf:if>
                <xf:if is="$xf.options.tn_menu1_sublink3_title OR $xf.options.tn_menu1_sublink3_url">
                    <a href="{{ $xf.options.tn_menu1_sublink3_url }}" class="tn-menu1-sublink3 menu-linkRow" <xf:if is="$xf.options.tn_menu1_sublink3_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_menu1_sublink3_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> >{{ $xf.options.tn_menu1_sublink3_title }}</a>
                </xf:if>
                <xf:if is="$xf.options.tn_menu1_sublink4_title OR $xf.options.tn_menu1_sublink4_url">
                    <a href="{{ $xf.options.tn_menu1_sublink4_url }}" class="tn-menu1-sublink4 menu-linkRow" <xf:if is="$xf.options.tn_menu1_sublink4_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_menu1_sublink4_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> >{{ $xf.options.tn_menu1_sublink4_title }}</a>
                </xf:if>
                <xf:if is="$xf.options.tn_menu1_sublink5_title OR $xf.options.tn_menu1_sublink5_url">
                    <a href="{{ $xf.options.tn_menu1_sublink5_url }}" class="tn-menu1-sublink5 menu-linkRow" <xf:if is="$xf.options.tn_menu1_sublink5_overlay">data-xf-click="overlay"</xf:if> <xf:if is="$xf.options.tn_menu1_sublink5_newTab">target="_blank" rel="noopener"</xf:if> <xf:if is="$xf.options.tn_link1_nofollow">rel="nofollow"</xf:if> >{{ $xf.options.tn_menu1_sublink5_title }}</a>
                </xf:if>
                <xf:if is="$xf.options.tn_menu_custom_html_1">
                    <span class="customMenu">
                        <xf:include template="cxf_top_navigation_custom_1" />
                    </span>
                </xf:if>
            </div>
            </div>
        </li>
    <xf:else />

вот тут то и есть кнопки ) осталось понять как их выделить строкой с подсветкой

p.s. так тихо сам с собой и разберусь )
 
Последнее редактирование:

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Топ- навигация это отдельный плагин или он тоже там настраивается ?
Но на первом скриншоте вроде обычная навигация, если плагин, то надо смотреть по месту. Могу вечером глянуть, сейчас уеду по делам.
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Скорее ты уже изменил в extra.less вид навигации и поэтому из настроек не применяются свойства. Советы по просмотру кода элемента не совсем правильные, нельзя все тупо менять в extra.less, для начала смотреть настройки стиля и там делать изменения.
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
так, едем дальше ) нашел шаблон css топ-навигации, который подключается в этому меню
cxf_top_navigation.less
Код:
/* Sticky navigation enabled */
<xf:if is="property('publicNavSticky') == 'primary' && property('tn_sticky') == 'enabled' OR property('publicNavSticky') == 'all' && property('tn_sticky') == 'enabled' OR property('publicNavSticky') == 'none' && property('tn_sticky') == 'enabled'">
.topNavSticky {
    z-index: 400;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.p-navSticky.is-sticky {
    z-index: 500;
}
<xf:if is="property('tse_progress_bar') == 'top'">
[data-template="thread_view"], [data-template="thread_view_type_suggestion"],
[data-template="thread_view_type_question"], [data-template="thread_view_type_poll"],
[data-template="thread_view_type_article"], [data-template="xfrm_thread_view_type_resource"] {
    .topNavSticky {
        top: @xf-tse_progress_height !important;
    }
    .p-navSticky {
        top: calc(36px + @xf-tse_progress_height);
    }
}
@media (max-width: @xf-responsiveMedium) {
    [data-template="thread_view"], [data-template="thread_view_type_suggestion"],
    [data-template="thread_view_type_question"], [data-template="thread_view_type_poll"],
    [data-template="thread_view_type_article"], [data-template="xfrm_thread_view_type_resource"] {
        .p-navSticky.is-sticky {
            top: calc(@xf-tse_progress_height <xf:if is="property('tn_mobile_sticky') == 'enabled'">+ 36px</xf:if>) !important;
        }
        .p-navSticky {
            top: calc(@xf-tse_progress_height <xf:if is="property('tn_mobile_sticky') == 'enabled'">+ 36px</xf:if>) !important;
        }
    }
}
</xf:if>
.p-navSticky {
    top: 37px;
}
.u-anchorTarget {
    margin-top: calc(
    <xf:if is="property('publicNavSticky') == 'primary'">
        -47px
    </xf:if>
    <xf:if is="property('publicNavSticky') == 'all'">
        -77px
    </xf:if>
    <xf:if is="property('publicNavSticky') == 'none'">
        0px
    </xf:if>
    <xf:if is="property('tn_sticky') == 'enabled'">
        + @xf-tn_anchor
    </xf:if>
    <xf:if is="property('tse_progress_bar') == 'top' OR property('tse_progress_bar') == 'belowSticky'">
        - @xf-tse_progress_height
    </xf:if>
    ) !important;
}


/* Mobile */
<xf:if is="property('tn_mobile_sticky') == 'disabled'">
@media (max-width: @xf-responsiveMedium) {
    .topNavSticky {
        position: relative;
    }
    .p-navSticky {
        top: 0 !important;
    }
    .u-anchorTarget {
        margin-top: -47px;
}
}
</xf:if>
</xf:if>
/*****/

.topNav {
    .xf-tn_topNav();
}
.topNav a {
    color: @xf-paletteColor2;
}
.topNav-inner {
    max-width: @xf-pageWidthMax;
    padding: 0 10px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    padding-left: 0;
    padding-right: 0;
    .xf-tn_topNavInner();
}
.topNav-scroller {
    line-height: 37px;
    margin-right: 3px;
    max-width: 100%;

    .hScroller-action.hScroller-action--start {
        .m-hScrollerActionColorVariation(
            xf-default(@xf-publicNav--background-color, transparent),
            @xf-publicNav--color,
            xf-intensify(@xf-publicNav--color, 10%)
        );
    }
    .hScroller-action.hScroller-action--end {
        .m-hScrollerActionColorVariation(
            xf-default(@xf-publicNav--background-color, transparent),
            @xf-publicNav--color,
            xf-intensify(@xf-publicNav--color, 10%)
        );
    }
}
.topNav-visitor {
    margin-left: auto;
    margin-right: 10px;
    text-align: right;
    flex-shrink: 0;
}

.topNav .topNav-visitor a.p-navgroup-link--logIn {
    .xf-tn_login_link();
}
.topNav .topNav-visitor a.p-navgroup-link--logIn:hover {
    .xf-tn_login_link_hover();
}
.topNav .topNav-visitor a.p-navgroup-link--register {
    .xf-tn_register_link();
}
.topNav .topNav-visitor a.p-navgroup-link--register:hover {
    .xf-tn_register_link_hover();
}
/* Top links */
.topNav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.topNav-list > li {
    .xf-tn_topNav_topLinks();
    display: inline-block;
}
.topNav-list > li:hover {
    .xf-tn_topNav_topLinks_hover();
}
.topNav-list a {
    .xf-tn_topNav_topLinks_link();
    padding: 8px;
}
.topNav-list a:hover {
    .xf-tn_topNav_topLinks_link_hover();
    background-color: rgba(188, 222, 245, 0.1);
    text-decoration: none;
}
.tn-link1 i, .tn-link2 i, .tn-link3 i, .tn-link4 i, .tn-link5 i,
.tn-link6 i, .tn-link7 i, .tn-link8 i, .tn-link9 i, .tn-link10 i {
    padding-right: 5px;
}
/*****/

/* Top links menu */
.customMenu {
    display: block;
    padding: 6px 15px 6px 12px;
    border-left: 3px solid transparent;
}
/*****/

/* Icons for Login and Register buttons */
<xf:if is="property('tn_login')">
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    .m-faBase();
    content: "@xf-tn_login";
    color: @xf-tn_login_icon_color;
    padding-right: 5px;
}
</xf:if>
<xf:if is="property('tn_register')">
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    .m-faBase();
    content: "@xf-tn_register";
    color: @xf-tn_register_icon_color;
    padding-right: 5px;
}
</xf:if>
/*****/

<xf:if is="property('tn_visitorTabs') == 'VisitorTabs'">
.p-navgroup {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.p-navgroup.p-discovery {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
</xf:if>
<xf:if is="property('tn_visitorTabs') == 'SearchTab'">
.p-navgroup {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.p-navgroup.p-discovery {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
</xf:if>
<xf:if is="property('tn_visitorTabs') == 'VisitorTabsAndSearch'">
.p-navgroup, .p-navgroup.p-discovery {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
</xf:if>

/* Mobile */
@media (max-width: @xf-responsiveMedium) {
    .topNav {
        <xf:if is="property('tn_mobile') == 'enabled'">
        <xf:else />
        display: none;
        </xf:if>
    }
    .u-anchorTarget {
        margin-top: calc(-47px <xf:if is="property('tn_mobile_sticky') == 'enabled'">- 47px</xf:if>) !important;
    }
}
<xf:if is="property('tn_visitorTabs') == 'VisitorTabs' OR property('tn_visitorTabs') == 'VisitorTabsAndSearch'">
    @media (min-width: @xf-responsiveMedium) {
        .p-nav-opposite .p-navgroup.p-account.p-navgroup--member, .p-nav-opposite .p-navgroup.p-account.p-navgroup--guest {
            display: none;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        .topNav .p-navgroup.p-account.p-navgroup--member, .topNav .p-navgroup.p-account.p-navgroup--guest {
            display: none;
        }
    }
</xf:if>
<xf:if is="property('tn_visitorTabs') == 'SearchTab' OR property('tn_visitorTabs') == 'VisitorTabsAndSearch'">
    @media (min-width: @xf-responsiveMedium) {
        .p-nav-opposite .p-navgroup.p-discovery {
            display: none;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        .topNav .p-navgroup.p-discovery {
            display: none;
        }
    }
</xf:if>
/*****/

осталось понять как все это дело завернуть типо как так
1665809630834.png
читаю мануал, но понимаю, что нифига не понимаю )))
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Судя по коду настройки стиля навигации присутствуют, так что меньше копайся в коде, который ты не понимаешь, а разбирайся с настройками
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
Скай, мы видимо не понимаем друг друга, это другое меню навигации и оно скрыто от пользователей, вижу только я, просто ковыряю стиль дочерний и он тоже скрыт пока не настрою, выглядит оно так
1665810222599.png
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
ок
Сообщение автоматически объединено:

походу начал понимать )
1665816488135.png
щас методом "научного тыка" и при помощи этой инструкции сделаю то, что хочу )
Сообщение автоматически объединено:

есть малая загвоздка, начинаю понимать, что вносимые изменения в шаблон этого меню, не меняют цвет ссылок заданные по умолчанию стилем
вопрос - как отменить именно для данного элемента заданные общие значения, чтоб приоритетные были из шаблона
Сообщение автоматически объединено:

стиль трогать нельзя, потому как поедет все
Сообщение автоматически объединено:

сам себе и отвечу )
text-decoration: none; удаляет стилизацию
Сообщение автоматически объединено:

все, освоил )
1665818590146.png
осталось сделать свои цвета и вуа-ля )
Сообщение автоматически объединено:

ну как-то так )
1665820251801.png
осталось найти как сделать при наведении затенение чуть меньше и с закругленными краями
Сообщение автоматически объединено:

ну все, встал в ступор ) помогай, никак не уменьшается
вот код
Код:
/* Top links */
.topNav-list {
    list-style: none;
    background-color: rgba(105, 105, 105, 0.3);
    margin: 0;
    padding: 0;
}
.topNav-list > li {
    .xf-tn_topNav_topLinks();
    display: inline-block;
}
.topNav-list > li:hover {
         background: LightGray;
    background-size: 50%;
    .xf-tn_topNav_topLinks_hover();
}
поставил background-size: 50%; при наведении
но ничего не меняется, как затеняется весь фон, так и есть (
 
Последнее редактирование:

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
щас доступ налажу, в ЛС скину, там в принципе все сделал, есть маленькая затыка которая ни на что не влияет ) так просто уже упреся
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Less:
.topNav-scroller {
    background-color: rgba(105, 105, 105, 0.3);
    padding: 5px;
    .topNav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            .xf-tn_topNav_topLinks();
            display: inline-block;
            &:hover {
                background: LightGray;
                .xf-tn_topNav_topLinks_hover();               
            }           
        }
    }   
}
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
класс, но у тебя получилась двойная подложка, одна большая и вторая поменьше, при наведении выделяется меньшая, ну путь так будет, зачОт
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Less:
.topNav-scroller {
    background-color: rgba(105, 105, 105, 0.3);
    padding: 5px;
    .topNav-list {
        background: none;
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            .xf-tn_topNav_topLinks();
            display: inline-block;
            &:hover {
                background: LightGray;
                .xf-tn_topNav_topLinks_hover();               
            }           
        }
    }   
}
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
так даже красивее )
тут еще вопрос возник, а как сделать, чтоб при прокрутке форума это меню не уходило?
может надо было новую тему запилить ? ( перенесите пост, если что)
Сообщение автоматически объединено:

супер, по этому примеру и буду изучать )
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
тут еще вопрос возник, а как сделать, чтоб при прокрутке форума это меню не уходило?
может надо было новую тему запилить ? ( перенесите пост, если что)
Не надо темы, не стоит заморачиваться
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
не стоит заморачиваться
с прокруткой ?) или с темой
Сообщение автоматически объединено:

сам пошарюсь завтра по интернету, поищу мануал как сделать якорь на прокрутке
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
kochevnik, там судя по коду есть настройки меню и походу есть фиксирование его
 

kochevnik

Проверенный
Регистрация
11.09.22
Сообщения
157
Реакции
15
Баллы
65
да, во как, ща погляжу, может как обычно, не внимательно смотрел )
Сообщение автоматически объединено:

ага, есть, и что самое главное )))) в настройках стиля есть пункт настроек топ-навигации )))) вот блин чёрт старый ) пол дня ковырял )))
1665844283030.png
1665844330941.png
 
Последнее редактирование:
Статус
Закрыто для дальнейших ответов.
Верх Низ