Two questions - labels and section/widget

[michalcabala]

Hi Russ (or anybody ), kindly asking two questions.
My forum: https://forum.hcpcefans.cz (Bolt style, newest version 2.3.8)

1. I can't find anywhere option, how to hide private messages and notification labels in navigation on desktop.

2. I'm using Donations by Siropu addon. I have a Donations widget above footer on main (home) page.
I would like to have:
Donations section with 2/3 + 1/3 layout where I can place current Donations widget and custom widget (bank transfer info with QR code) beside each other.

AI told me something, but I would like to do it "right way"

Many many thanks for your answer,
Michal

 

[michalcabala]

Here's the screenshot (permissions for guests)

 

[Russ]

1.) Referring to the inbox+alerts? I guess you could add this to your extra.less:

a.p-navgroup-link.p-navgroup-link--iconic.p-navgroup-link--alerts, p-navgroup-link.p-navgroup-link--conversations { display: none !important; }

2.) For the donation thing, for this AI can't really mess up too bad. You could use a HTML widget, make sure to check "Advanced mode".

Replace the "DONATIONWIDGETKEY" with the widget key for your existing one.

<div class="block">
    <div class="block-container donationsSplit">
        <div class="block-body">
            <div class="donationsSplit-inner">

                <div class="donationsSplit-main">
                    <h3 class="block-minorHeader">Support the Community</h3>

                    <div class="donationsSplit-widget">
<xf:widget key="DONATIONWIDGETKEY" />
                    </div>
                </div>

                <div class="donationsSplit-side">
                    <h3 class="block-minorHeader">Bank Transfer</h3>

                    <div class="donationsSplit-bank">
                        <p><strong>Account name:</strong> Your Name / Business Name</p>
                        <p><strong>Bank:</strong> Your Bank Name</p>
                        <p><strong>Account number:</strong> 123456789</p>
                        <p><strong>Reference:</strong> Forum Donation</p>

                        <div class="donationsSplit-qr">
                            <img src="/path/to/qr-code.png" alt="Bank transfer QR code" />
                        </div>

                        <p class="donationsSplit-note">
                            Scan the QR code to donate by bank transfer.
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Extra.less

.donationsSplit-inner
{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: @xf-paddingLarge;
    align-items: start;
}

.donationsSplit-main,
.donationsSplit-side
{
    background: @xf-contentBg;
    border: 1px solid @xf-borderColor;
    border-radius: @xf-borderRadiusMedium;
    padding: @xf-paddingLarge;
}

.donationsSplit-widget p:last-child,
.donationsSplit-bank p:last-child
{
    margin-bottom: 0;
}

.donationsSplit-qr
{
    margin-top: @xf-paddingMedium;
    text-align: center;
}

.donationsSplit-qr img
{
    max-width: 100%;
    height: auto;
    border-radius: @xf-borderRadiusSmall;
}

.donationsSplit-note
{
    margin-top: @xf-paddingSmall;
    font-size: @xf-fontSizeSmall;
    color: @xf-textColorMuted;
    text-align: center;
}

@media (max-width: @xf-responsiveMedium)
{
    .donationsSplit-inner
    {
        grid-template-columns: 1fr;
    }
}

You'll probably need to adjust this further, as it might be adding additional wrappers.