CSS rank

  • I got inspired from another forum software which is still WIP. They were using CSS ranks differently from what Burning Board supports by default. I thought it would be nice to share with you all in case you are interested

    Code
    .badge, a.badge {
        font-size: 12px;
        color: rgb(121, 177, 75);
        background-color: rgba(255, 255, 255, 0.39);
        border: solid 1px rgb(121, 177, 75);
        text-transform: uppercase;
    }

    The resultant badge will look like this

    Please note that if you use the above code, all badges will look like this. I am yet to figure out how different badges will have the same format but various colours.

    Smile , it's good for health

  • background-color - will change the background colour of the badge

    border - will change the border colour around the badge

    color - will change the text colour used in the badge

    You could also add "border-radius: 4px" etc... to make the badges have rounded edges

    You can check out CSS School for various different effects you can do: https://www.w3schools.com/css/default.asp

    Einmal editiert, zuletzt von NicoleSophie (18. Oktober 2018 um 11:27)

  • Update 1 :

    Looks like the above code will affect new and online badges too. Also the new post indicator on the main page. Use the code below instead

    Code
    .userTitleBadge {
        
        color: rgb(121, 177, 75);
        background-color: rgba(255, 255, 255, 0.39);
        border: solid 1px rgb(121, 177, 75);
        text-transform: uppercase;
    }

    You can check my forum to see it in action.

    Smile , it's good for health

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!