XF 2.2 How do I hide header image and logo from guests?

GrowLabz

Member
how do I add a conditional to the header image and logo to hide it from guests and members who are not logged in? what conditional do I use and where do I add it?
 

Dixie McCall

Well-known member
Perhaps rather than use the regular header and logo properties, you could possibly combine your header and logo into one (via photoshop or whatever) and use XF ad system instead. This way you can hide both from guests simultaneously via ad properties.

Or use a floating notice instead, just insert it as an image and set parameters.
 
Last edited:

XDinc

Well-known member
how do I add a conditional to the header image and logo to hide it from guests and members who are not logged in? what conditional do I use and where do I add it?

Open your PAGE_CONTAINER template,
Like as,

1627651208530.png

Find following codes, (Line numbers help to you)

Code:
<header class="p-header" id="header">
    <div class="p-header-inner">
        <div class="p-header-content">

            <div class="p-header-logo p-header-logo--image">
                <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
                    <img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
                        width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
                </a>
            </div>

            <xf:ad position="container_header" />
        </div>
    </div>
</header>

Add this conditional for your request,

<xf:if is="$xf.visitor.user_id">
The codes above.
</xf:if>
 
Last edited:

Brogan

XenForo moderator
Staff member
Add this to the extra.less template if you just want to hide it without editing a template:

Less:
[data-logged-in="false"]
{
    .p-header-logo
    {
        display: none;
    }
}
 

GrowLabz

Member
Add this to the extra.less template if you just want to hide it without editing a template:

Less:
[data-logged-in="false"]
{
    .p-header-logo
    {
        display: none;
    }
}
thanks that worked great at removing the logo! however the header image is still showing, what should I do to the .css to hide the header image from guests also?
 
Top