Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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.

    Code:
    /* 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:
    Code:
    background: {vb:stylevar thread_starter_background};
    to:

    Code:
    background: #EBF4F9; /* this is the default first post background color, adjust as needed */
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

    #2
    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 "/**/")

    Comment


    #3
    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

    Comment


      #4
      Hi Glenn,

      For some reason the comma changes into a dot:


      Is there different CSS I can use?

      Thanks,
      Rob

      Comment


      #5
      Fleiding
      Everybody lies
      Fleiding, try these changes in the 2nd css rule:

      Code:
      width: 5px;
      height: 5px;
      right: -6px;
      bottom: 5px;
      Helpful? Donate. Thanks!
      Fast VPS Host for vBulletin: A2 Hosting & IONOS

      Comment


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

      Comment

      Working...
      X