XF 2.1 Collapse Log in / Register into one; remove superfluous New posts button

djbaxter

in memoriam 1947-2022
1. Client wants to get rid of the Register link in the right navbar for guests and just use Login / Join (which gives the option to register anyway).

How do I suppress the Register link there?

I have tried this but it doesn't seem to do anything:
Code:
/* don't display Register on navbar for guests */
.p-navgroup-link p-navgroup-link--textual p-navgroup-link--register {
    display: none;
}


2. Client also wants to get rid of the superflous "New posts" button on the forum list:

extra new posts button.webp

This doesn't work:

Code:
/* delete superfluous "new posts" button on thread list */
.button button--icon button--icon--bolt {
    display: none;
}

Any suggestions?
 
Remember that each CSS class selector must be preceded with a full stop ("."). :)

If you intend for multiple classes in your selector to target the same element, then chain each class one after the other without any spaces. For example:
  • .class1.class2 would select all elements that have both class1 and class2 set within the class attribute. E.g.:
    HTML:
    <span class="class1 class2">
    </span>
  • Whereas .class1 .class2 (with a space) would select all elements with class2 in the class attribute only if they are a descendant of a higher up element with class1 in its class attribute. E.g.:
    HTML:
    <span class="class1">
      <span class="class2">
      </span>
    </span>

So to hide the register button with CSS:
CSS:
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    display: none;
}


W3Schools has handy CSS selector reference page that you (and/or others) may find useful: :)

Edit: I should point out that CSS can't properly remove elements, only hide them. It'd make more sense to edit the appropriate template directly. (thanks @briansol)
 
Last edited:
Remove What's new? link

Edit Templates > forum_overview_wrapper delete lines 9-12:

HTML:
    <xf:else />
        <xf:button href="{{ $xf.options.forumsDefaultPage == 'new_posts' ? link('forums/new-posts') : link('whats-new/posts') }}" icon="bolt">
            {{ phrase('new_posts') }}
        </xf:button>

Change Login / Register link

The code for this is in Edit Templates > PAGE_TEMPLATES and you can change this code around and only use one link:

HTML:
                        <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-follow-redirects="on">
                            <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                        </a>
                        <xf:if is="$xf.options.registrationSetup.enabled">
                            <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
                                data-xf-click="overlay" data-follow-redirects="on">
                                <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
                            </a>
                        </xf:if>
 
So to hide the register button with CSS:
CSS:
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    display: none;
}

Hello,
I tried this to set color and weight but it doesn't work, any idea ?
CSS:
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    color: rgb(242, 94, 35);
    font-weight: 500;
}

Thanks ! :)
 
@nicodak Your CSS worked for me when I applied it to the XenForo default style. It changed the "Register" text to an orange colour with a slightly bolder font weight. Did you add your CSS to the extra.less template in your chosen style?

PS: It might be better to start a new thread, as your question differs to the OP. :)
 
Back
Top Bottom