Free Mod How to customize the style of the tags list in first post and even "remove" the comma separator

[glennrocksvb]

If you want to change the style of the tags to how it is styled on this forum (right here in this first post), then add these in css_additional template or via Sitebuilder > Style > CSS Editor.

/* add border around each tag */
div[id^="content-tags"] a {
    border: 1px solid #c0c0c0;
    padding: 3px 4px;
    border-radius: 3px;
    background: #f1f1f1;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}
/* "remove" the comma separator by covering it with an element that has the same background as the first post */
div[id^="content-tags"] a:after {
    content: " ";
    width: 3px;
    height: 3px;
    position: absolute;
    right: -4px;
    bottom: 4px;
    background: {vb:stylevar thread_starter_background}; /* for vBCloud, this should be using harcoded color using the same color as the first post background color as defined in thread_starter_background stylevar in Style Variable Editor */
    z-index: 1;
}

NOTE:

1. For self-hosted vB5, make sure the "Text Only" checkbox is not checked when saving the template.
2. For vBCloud, you need to hardcode the background color using the same color as the first post background color as defined in thread_starter_background stylevar in Style Variable Editor. So change this:

background: {vb:stylevar thread_starter_background};

to:

background: #EBF4F9; /* this is the default first post background color, adjust as needed */

[Menderley]

Can i delete my own posts? (I'm so stupid... i found my problem.... i'm a stupid stupid human. Try to set notes in CSS wit "//" instead of "/**/")

[glennrocksvb]

That happens. Be nice to yourself. You can actually use "//" in SCSS

[Menderley]

The // has Made my css Dont Work correclty and destroyed my Search bar xD it is a reason to hate my self. For today xD

[Fleiding]

Hi Glenn,

For some reason the comma changes into a dot:


Is there different CSS I can use?

Thanks,
Rob

[glennrocksvb]

Can you put the CSS back on your site and I'll take a look

[Fleiding]

Back.

[glennrocksvb]

It's still comma and not dot. Try increasing the width and height in the second css rule.

[Fleiding]

I increased the width and height to 6, but now the borders are not as they should be.

[glennrocksvb]

Check post #5

[glennrocksvb]

Fleiding, try these changes in the 2nd css rule:

width: 5px;
height: 5px;
right: -6px;
bottom: 5px;

[Fleiding]

Awesome, enjoy your coffee!

[glennrocksvb]

Thanks! Glad to help.

[HaMooooDi]

Thanks, installed however I kept the comma cause I want to