XF 2.2 Lightning Bolt icon show on desktop as well as mobile

[Mr Lucky]

This has to be an easy one, but I have drawn a blank.

I want the bolt to show in the same place, between alerts and search

Can anyone help please?

 

[BassMan]

I have this one:

[cXF] Add What's New beside Alerts tab

If you got our add-ons on websites other than customizexf.com or xenforo.com, then you got them on pirated sites. If so, we suggest you remove the add-on from the server and download it from the original site. Please, support the developers and...

xenforo.com

Maybe it is ok for your needs.

 

[frm]

Maybe it is ok for your needs.

I used this one and removed the "What's New" tab to standardize the mobile/desktop appearance.

 

[Russ]

Just add this to extra.less, for the icon + the text to show:

.p-nav .p-navgroup-link--whatsnew {
    display: block;
}

Or icon only:

.p-nav .p-navgroup-link--whatsnew {
    display: block;
    .p-navgroup-linkText { display: none; }
}

 

[beerForo]

That's what I use (the add-on above). I like having it on both so on mobile people know what it does immediately if they have been mostly on full site.

 

[frm]

Or icon only:

While this works, it puts it next to the Search bar, unlike @BassMan's add on.

I nitpick at stuff like that... so went with his solution over attempting a CSS edit (I think I convinced him to do it, actually, and he made it free).


vs

 

[beerForo]

Yup I think my comments in that thread made that change lol.

 

[Russ]

For what it's worth, easily done via CSS still. I've just never been a fan of installing an add-on for what a tiny bit of CSS can do. I appreciate that Bassman add-ons provide additional options though.

.p-nav 
{
    .p-navgroup.p-account
    {
        border-top-right-radius: 0;
    }
    .p-navgroup.p-discovery
    {
        margin-left: 0;
        background-color: transparent;
        border-top-left-radius: 0;
        .p-navgroup-link--whatsnew
        {
            display: block;
            border-left: 1px solid @xf-publicHeaderAdjustColor;
            border-top-right-radius: @xf-borderRadiusMedium;
            border-top-left-radius: 0;
            background: @xf-publicHeaderAdjustColor;
            .p-navgroup-linkText { display: none; }
        }
        .p-navgroup-link--search
        {
            margin-left: 5px;
            background: @xf-publicHeaderAdjustColor;
        }
    }
}

If you're really picky about it

 

[beerForo]

Mine is on the right side of the search tab, using the add-on. I think he has a setting.

 

[Russ]

Mine is on the right side of the search tab, using the add-on. I think he has a setting.

Which is why I said: I appreciate that Bassman add-ons provide additional options though.

 

[beerForo]

Oh yes! I always appreciate some clean CSS as well, and you have been helpful.

 

[frm]

Which is why I said: I appreciate that Bassman add-ons provide additional options though.

@Russ unfortunately can't be there all the time (Pixel Exit and all) and I believe I did tip him for this (if I recollect) which is why it's free.

But hopefully, anyone who chooses your edit over the add on throws ya a couple of bucks for that solution.

 

[Mr Lucky]

Wow, lots of help here. I'll try everything and see what works best for me. Much appreciated all.

 

[Mr Lucky]

I really like the bassman addon's configurability (I have a subscription to his paid addons anyway) but am going with the very simple CSS from Russ

 

[briansol]

For what it's worth, easily done via CSS still. I've just never been a fan of installing an add-on for what a tiny bit of CSS can do. I appreciate that Bassman add-ons provide additional options though.

.p-nav
{
    .p-navgroup.p-account
    {
        border-top-right-radius: 0;
    }
    .p-navgroup.p-discovery
    {
        margin-left: 0;
        background-color: transparent;
        border-top-left-radius: 0;
        .p-navgroup-link--whatsnew
        {
            display: block;
            border-left: 1px solid @xf-publicHeaderAdjustColor;
            border-top-right-radius: @xf-borderRadiusMedium;
            border-top-left-radius: 0;
            background: @xf-publicHeaderAdjustColor;
            .p-navgroup-linkText { display: none; }
        }
        .p-navgroup-link--search
        {
            margin-left: 5px;
            background: @xf-publicHeaderAdjustColor;
        }
    }
}

If you're really picky about it

View attachment 234255

this is missing the hover style attributes.

 

[briansol]

&:hover
{
text-decoration: none;
background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
}

 

[Mendalla]

Just add this to extra.less, for the icon + the text to show:

.p-nav .p-navgroup-link--whatsnew {
    display: block;
}

Or icon only:

.p-nav .p-navgroup-link--whatsnew {
    display: block;
    .p-navgroup-linkText { display: none; }
}

Wish I had the time to learn this CSS stuff better. This is such a nice, simple way to add it. And I don't mind it being next to Search. Seems to make sense to have it there, really.

 

[Mouth]

&:hover
{
text-decoration: none;
background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
}

Where within the CSS should this go? It also puts the hover-over effect on the search button for me.

 

[briansol]

Yea it's not working correctly. Just the code from Russ breaks mobile

 

[Russ]

Yea it's not working correctly. Just the code from Russ breaks mobile

You could just apply the CSS in a media query wrapper so it only happens above the navigation break:

@media (min-width: (@xf-responsiveMedium  + 1))
{
    .p-nav 
    {
        .p-navgroup.p-account
        {
            border-top-right-radius: 0;
        }
        .p-navgroup.p-discovery
        {
            margin-left: 0;
            background-color: transparent;
            border-top-left-radius: 0;
            .p-navgroup-link--whatsnew
            {
                display: block;
                border-left: 1px solid @xf-publicHeaderAdjustColor;
                border-top-right-radius: @xf-borderRadiusMedium;
                border-top-left-radius: 0;
                background: @xf-publicHeaderAdjustColor;
                .p-navgroup-linkText { display: none; }
            }
            .p-navgroup-link--search
            {
                margin-left: 5px;
                background: @xf-publicHeaderAdjustColor;
            }
        }
    }
}

Removes the formatting so there are no background colors.