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?
 
Solution
Which header image?

What is the link to your site?

Try changing .p-header-logo to .p-header .

Less:
[data-logged-in="false"]
{
    .p-header
    {
        display: none;
    }
}
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:
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:
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;
    }
}
 
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?
 
Which header image?

What is the link to your site?

Try changing .p-header-logo to .p-header .

Less:
[data-logged-in="false"]
{
    .p-header
    {
        display: none;
    }
}
 
Solution
Back
Top Bottom