Custom badges

[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:

Loading...

Please wait while the description loads.

Loading...

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.

[cagatay]

@phenomlab which one i should remove?

[phenomlab]

@cagatay These

.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;
}

[cagatay]

@phenomlab its not work, nothing changed when i deleted those css.

[phenomlab]

@cagatay what isn’t working?

[cagatay]

@phenomlab there is no changes after deleted css code;

[cagatay]

@phenomlab how can i set blue tick like sudonix to my own? coz codes which you are shared, it not look like yours;

[phenomlab]

@cagatay It’s documented here
https://sudonix.com/topic/386/custom-badges/18?_=1669196219630

[cagatay]

@phenomlab i read it and did it what you wrote. but result as below;

blue icon not seen, it hide by avatar

[phenomlab]

@cagatay Yes, having checked, I see what you mean. I’ve fixed this on your site.

This is the new applied code

.post-header a[href*="/groups/onaylı-üyeler"] {
    margin-right: 3px;
    margin-top: 1px;
    border-radius: 50%;
    line-height: 20px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}
small.label.group-label.inline-block i {
    margin-top: 1px;
    margin-left: 0px;
    vertical-align: middle;
    justify-content: center;
    display: flex;
}
.post-header a[href*="/groups/onaylı-üyeler"] .group-label {
    min-width: 20px;
    display: flex;
    justify-content: center;
}
.self-post a[href*="/groups/onaylı-üyeler"] .group-label {
    position: absolute !important;
    right: 51px;
    top: 44px;
    z-index: 2;
}
.topic-response-post a[href*="/groups/onaylı-üyeler"] .group-label {
    position: absolute !important;
    left: 20px;
    top: 44px;
    z-index: 2;
}
.topic-response-post i[component="user/status"] {
    position: absolute;
    left: -1px;
}
.group-label {
    vertical-align: -6px;
}

However, there were some errors on your part. You were correct in renaming the actual group in CSS (good call) because of the language not being English, but the path was incorrect. You used the below, which was customized for @crazycells install

/forum/groups/onaylı-üyeler

It should be

/groups/onaylı-üyeler

You also have some overriding CSS somewhere that defines a lower z-index value which forces the “verified” icon behind the avatar, so I’ve added an adjustment for that

z-index: 2;