Custom badges

[phenomlab]

@DownPW Mmmmm, yes, the fastest way to do that would be to use the title attribute. Bootstrap has native support for that

If you added this attribute then hovered over the element, you’d see this

It’s possible to write jQuery to handle this - aside from that, you’d need to hack into the post template which I wouldn’t recommend. There isn’t any native CSS that will do this for you sadly, so the title="" attribute is the best way forward but won’t do anything without custom JS.

EDIT - I actually have a requirement for this myself, so will probably write some code to do it over the coming days/weeks (really depending on how much free time I have).

[crazycells]

@phenomlab thank you very much it looks great!

[DownPW]

@phenomlab said in Custom badges:

It’s possible to write jQuery to handle this - aside from that, you’d need to hack into the post template which I wouldn’t recommend. There isn’t any native CSS that will do this for you sadly, so the title=“” attribute is the best way forward but won’t do anything without custom JS.
EDIT - I actually have a requirement for this myself, so will probably write some code to do it over the coming days/weeks (really depending on how much free time I have).

very clever the addition of this “Title=” attribute, I would not have thought of it myself !! Cheer !!

This is exactly the result I’m looking for !
I don’t even know why, I’m not amazed at your prowess anymore

Excellent

[crazycells]

@phenomlab lol verified badge changed here as well

is there an easy CSS code to make it look more like a flower, rather than perfectly round? (just like the Twitter one)

[phenomlab]

@crazycells it’s possible, but would be very complex. Much less hassle to use either a direct image (which probably won’t look very good on scale) or use this SVG from Font Awesome which appears to be free

https://fontawesomeicons.com/svg/icons/twitter-verified-badge

[crazycells]

@phenomlab thanks.

[crazycells]

@phenomlab since both admin and global moderator badges are close to purple/maroon color, you can change one to green (which I believe was the verified badge color)

[phenomlab]

@crazycells yes, I need to change that here. Was switched out on a whim.

[phenomlab]

@crazycells @DownPW something of a “fresher” approach. Have a look at the below

Using the messenger type view I created, it then becomes possible to place the “verified” group according to the style from the same view.

This does mean some new CSS

.self-post a[href*="/groups/verified"] .group-label {
    position: absolute !important;
    right: 51px;
    top: 44px;
}
.topic-response-post a[href*="/groups/verified"] .group-label {
    position: absolute !important;
    left: 20px;
    top: 44px;
}
.topic-response-post i[component="user/status"] {
    position: absolute;
    left: -1px;
}

And, more importantly, I found a more efficient way of adding classes in the messenger view js. The revised code is below

// Target those elements already loaded in the DOM
$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        $('li[component="post"]').each(function(i, obj) {
            if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                console.log("Adding required classes for messenger type view");
                $(this).addClass('topic-response-post');
            }

        });
    });
});
// Target elements dynamically added to the DOM on post load
$(document).ready(function() {
    $(window).on('action:ajaxify.loaded', function(data) {
        $('li[component="post"]').each(function(i, obj) {
            if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                console.log("Adding required classes for messenger type view");
                $(this).addClass('topic-response-post');
            }

        });
    });
});

[crazycells]

@phenomlab this looks cooler than usual badges thanks for the codes…

but, I believe it should be located slightly lower since there is already a status circle that is taking some space from the avatar, and now this is taking more it feels like you are conversing with someone that has sunglasses, a scarf, and a hat I prefer to see their faces more clearly (well, in this case avatar )

[phenomlab]

@crazycells ha! Yes, I see your point. I guess it’s down to taste, and thanks to the absolute positioning, you can easily customise to suit taste.

It’s also worth noting that on here at least, this will only trigger on larger monitors - it would look awful on mobile devices in my view.

[crazycells]

@phenomlab yes I agree with you.

How do you achieve the restriction? I cannot see any screen resolution definition…

[crazycells]

@phenomlab oh, I think I got it. that is a general property for all group badges?

I do not see any of them on mobile…

[phenomlab]

@crazycells yes, the badges by default do not display on less than 1200px I believe (I might be wrong)

[crazycells]

hi @phenomlab , in this topic where the solution is chosen:

https://sudonix.org/topic/388/the-best-css-to-customize-our-logo

verified badge and online status are overlapping. I guess it is not intended?

[phenomlab]

@crazycells hmm, I’m not seeing that. Can you provide a screenshot?

[crazycells]

@phenomlab sure, here is how I see it:

[phenomlab]

@crazycells ah, yes, I know why. There’s a class I haven’t committed.

Thanks. I’ll sort that out tomorrow.

[cagatay]

@phenomlab said in Custom badges:

@crazycells @DownPW something of a “fresher” approach. Have a look at the below

Using the messenger type view I created, it then becomes possible to place the “verified” group according to the style from the same view.

This does mean some new CSS

.self-post a[href*="/groups/verified"] .group-label {
    position: absolute !important;
    right: 51px;
    top: 44px;
}
.topic-response-post a[href*="/groups/verified"] .group-label {
    position: absolute !important;
    left: 20px;
    top: 44px;
}
.topic-response-post i[component="user/status"] {
    position: absolute;
    left: -1px;
}

And, more importantly, I found a more efficient way of adding classes in the messenger view js. The revised code is below

// Target those elements already loaded in the DOM
$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        $('li[component="post"]').each(function(i, obj) {
            if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                console.log("Adding required classes for messenger type view");
                $(this).addClass('topic-response-post');
            }

        });
    });
});
// Target elements dynamically added to the DOM on post load
$(document).ready(function() {
    $(window).on('action:ajaxify.loaded', function(data) {
        $('li[component="post"]').each(function(i, obj) {
            if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                console.log("Adding required classes for messenger type view");
                $(this).addClass('topic-response-post');
            }

        });
    });
});

My style looks like it with those codes. There isjust seems some blue color of my checked icon

[phenomlab]

@cagatay you should remove those two CSS blocks your referenced as that’s what’s causing the odd looking blue circles over the avatar.