XF 2.2 css nickname

[Luca_]

Hi, would cbi be kind enough to tell me how to get this?

 

[Old Nick]

Each username with the same colour belongs to the same user group. In the user group settings you can do this.
Just add color: red for example.

 

[Luca_]

Each username with the same colour belongs to the same user group. In the user group settings you can do this.
Just add color: red for example.

View attachment 310867

yes ok friend.. but... I would like motion effect like you see around on some forums...

 

[Old Nick]

Create a class in the extra.less template and use it in the Username CSS field i posted above.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Luca_]

Create a class in the extra.less template and use it in the Username CSS field i posted above.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

I need a lightning type effect, there are many forums with those nicknames... do you have any examples?

 

[CedricV]

    position: relative;
    font-weight: bold;
    color: #f9d71c; /* Bright yellow lightning color */
    text-shadow:
        0 0 5px #f9d71c,
        0 0 10px #f9d71c,
        0 0 20px #f9d71c,
        0 0 30px #ff8f00,
        0 0 40px #ff8f00,
        0 0 50px #ff8f00;
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 100% {
        text-shadow:
            0 0 5px #f9d71c,
            0 0 10px #f9d71c,
            0 0 20px #f9d71c,
            0 0 30px #ff8f00,
            0 0 40px #ff8f00,
            0 0 50px #ff8f00;
    }
    50% {
        text-shadow:
            0 0 2px #f9d71c,
            0 0 5px #f9d71c,
            0 0 10px #f9d71c,
            0 0 20px #ff8f00;
    }

Try this. Otherwise, ask ChatGPT.

 

[Luca_]

    position: relative;
    font-weight: bold;
    color: #f9d71c; /* Bright yellow lightning color */
    text-shadow:
        0 0 5px #f9d71c,
        0 0 10px #f9d71c,
        0 0 20px #f9d71c,
        0 0 30px #ff8f00,
        0 0 40px #ff8f00,
        0 0 50px #ff8f00;
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 100% {
        text-shadow:
            0 0 5px #f9d71c,
            0 0 10px #f9d71c,
            0 0 20px #f9d71c,
            0 0 30px #ff8f00,
            0 0 40px #ff8f00,
            0 0 50px #ff8f00;
    }
    50% {
        text-shadow:
            0 0 2px #f9d71c,
            0 0 5px #f9d71c,
            0 0 10px #f9d71c,
            0 0 20px #ff8f00;
    }

Try this. Otherwise, ask ChatGPT.

beautiful thanks.. only thing.. it seems too mixed.. how do I get a less mixed writing

 

[CedricV]

beautiful thanks.. only thing.. it seems too mixed.. how do I get a less mixed writing


View attachment 310868

Change the background hexes to something darker. For example:

    position: relative;
    font-weight: bold;
    color: #00b7ff; /* Bright electric blue for lightning effect */
    text-shadow:
        0 0 5px #00b7ff,
        0 0 10px #00b7ff,
        0 0 20px #007acc,
        0 0 30px #004c99,
        0 0 40px #004c99,
        0 0 50px #003366;
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 100% {
        text-shadow:
            0 0 5px #00b7ff,
            0 0 10px #00b7ff,
            0 0 20px #007acc,
            0 0 30px #004c99,
            0 0 40px #004c99,
            0 0 50px #003366;
    }
    50% {
        text-shadow:
            0 0 2px #00b7ff,
            0 0 5px #00b7ff,
            0 0 10px #007acc,
            0 0 20px #004c99;
    }

 

[Luca_]

thx man, I play now.