Cookie banner styling

[Alvin63]

Hi Russ. I've recently become aware that I need an advanced cookie banner. A couple of things. I used bassman's addon to style the Xenforo advanced cookie banner so it was a smaller, floating box on a desktop screen (as opposed to a large, screen-width banner at the bottom of the page). This looks better on desktop and is easier to read - however it takes up half the page on mobile.

Additionally some of the styling/colour changes didn't work with the pixel exit style. As in some kind of conflict somewhere? Because the colour changes showed up on default style. While he did give me some code for extra less to change those particular colour buttons, I was wondering if the styling for the cookie banner is already built into the pixel exit style somewhere (ie no need for an additional addon or extra.less alterations).

So that's the question really. Is there some styling built into my xenbase theme for the cookie banner somewhere? And if not, is there anything I can do to make the cookie banner smaller on mobile screens?! Thank you.

 

[Alvin63]

You could add something like this into extra.less:

@media (min-width: (@xf-responsiveWide  + 1))
{
    .u-bottomFixer
    {
        right: @xf-elementSpacer;
        bottom: @xf-elementSpacer;
        width: 400px;
        margin-left: auto;
        .notice.notice--cookieAdvanced .notice-content .u-pageCentered
        {
            display: block;
        }
    }
}

This will only apply to larger devices and revert back to the default behavior for mobile. I think the mobile approach XenForo has works best, personally. If you want that to always work, you need to remove the top 2 lines, and the bottom line (class + opening and closing bracket)

I've pasted that into extra less. The notice looks the same as before?

 

[Alvin63]

It's ok. I must have copied it incorrectly, Copied and pasted again and it's worked now

 

[Alvin63]

It looks excellent, thank you. There is a very slight darker border on the left side mainly but I assume I can adjust that in the notices styling section.

 

[Alvin63]

Thank you Russ. I really appreciate that. It looks fine on mobile. I think if someone was using a tablet it would still come out horizontally (as it does when you turn a phone sideways) but I think most people use mobile phone.

It also looks much better on the right and a better size

 

[Alvin63]

I've just realised I was on the forum - I thought I'd opened a support ticket. Apologies. Do you want me to delete anything?

 

[Alvin63]

Final question if I may. Where would I find the style properties to change the colour of the buttons (eg accept and reject) please? I looked in the Buttons section but it doesn't seem to be primary buttons. I was wanting to change them so accept was one colour and reject was a different colour. Thank you.

 

[Russ]

I've just realised I was on the forum - I thought I'd opened a support ticket. Apologies. Do you want me to delete anything?

I can move it to a ticket if you'd like. But nothing confidential here so all good.

Final question if I may. Where would I find the style properties to change the colour of the buttons (eg accept and reject) please? I looked in the Buttons section but it doesn't seem to be primary buttons. I was wanting to change them so accept was one colour and reject was a different colour. Thank you.

This you'll need to apply manual CSS. Looks like you already have it sorted though?

I see this:

[data-notice-id="-1"].notice--cookieAdvanced .cookies-buttons .button--link {
    color: #001861 !important;
    background: #fdfdfc !important;
}

This would be for the accept button:

.XenBase .notice.notice--primary a.button {
    background: #2d445d;
    color: #fff;
    border-color: #2d445d;
}

 

[Alvin63]

Thank you for the code for the Accept Button. How would I adapt that for the reject button please? Just to keep everything tidy

 

[Russ]

The first bit of CSS would change your reject button. You may need to add a higher selector, but also keep the !important (or remove the old CSS).

#XF [data-notice-id="-1"].notice--cookieAdvanced .cookies-buttons .button--link {
    color: #001861 !important;
    background: #fdfdfc !important;
}