XF 2.2 Change menu dropdown background color and text color

  • Thread starter Deleted member 241496
  • Start date
D

Deleted member 241496

Guest
Someone recommended that we change our dropdown menu's from the main navigation to match our other styling. However, we can't find it in the style properties area. I thought it would be 'Navigation row - menu open' but that didn't change anything. We want to make the text #FFDE59 and the background #000000. If you need to look what we are talking about, its the dropdown menu under 'Media', 'Our EVs', etc. at www.talkingevs.com. Thanks, we would be lost without your help so far!
 
D

Deleted member 241496

Guest
Just noticed that this changed the user dropdown menu now too. What area or code controls the background for those gray areas?
 
D

Deleted member 241496

Guest
So you have to edit the XF templates too not only the extra.less because all those items have the same class .menu-linkRow
So which templates would i edit then for that change to show only for the main nav dropdowns?
 

nicodak

Well-known member
I must specify that this would be my method and that I do not know of a better one, but perhaps other members would have better to advise you.

You have to make changes in this template account_visitor_menu
This part of code
HTML:
    <!--[XF:menu_separator:below_visitor_panel]-->
    <hr class="menu-separator menu-separator--hard" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <!--[XF:content_links:top]-->
        <xf:if is="$xf.options.enableNewsFeed">
            <li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
        </xf:if>
        <li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
        <li><a href="{{ link('account/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</a></li>
        <!--[XF:content_links:bottom]-->
    </ul>

    <!--[XF:menu_separator:below_content_links]-->
    <hr class="menu-separator" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <!--[XF:account_links:top]-->
        <li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
        <li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
        <li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
        <li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
        <xf:if is="$xf.visitor.canEditSignature()">
            <li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
        </xf:if>
        <xf:if is="$xf.app.userUpgradeCount">
            <li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
        </xf:if>
        <xf:if is="$xf.app.connectedAccountCount">
            <li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
        </xf:if>
        <li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
        <li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
        <!--[XF:account_links:bottom]-->
    </ul>

    <!--[XF:menu_separator:below_account_links]-->
    <hr class="menu-separator" />

    <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

I would replace all the menu-linkRow classes with menu-linkRow-custom for example
And put this in extra.less template
Less:
.menu-linkRow-custom {
    display: block;
    padding: 6px 15px 6px 12px;
    border-left: 3px solid transparent;
    color: #141414;
    text-decoration: none;
}

Maybe you will have to add some css again but you can begin with this and see...
 
Top