• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

Post Flair Showoff! (has flair templates too!)

moon

37,467
Posts
16
Years
    • they/them
    • Seen Apr 19, 2024
    Get creative with your post flair and parade it around here :D <3

    You may submit so called "css-code" that other members can use to style their flairs with, since it's difficult to start from scratch :)

    It's helpful to put your css within a [code] yada yada [/code] tag here, as then it will be shown as text in your post and be possible for people to directly copy and use and tweak as they wish!


    To start off, below here is a template from Nah. Just copy the link address of an image on the web and insert it where it says to put the img URL. Change hex color codes and numbers around in the post flair editor to see what happens!

    Spoiler:



    Some CSS hints:
    You can almost put any kind of code in any part of the flair. Making a background-color in the "Main block" will affect different parts of the flair compared to if you put it in "Statistics" etc.

    background-color: #834777
    ^ use a hex value (any six number+letters between 0-9 and a-f) to set a background color for any part of your flair.

    border: solid #885f3f 1px;
    ^ is an example of how you can use the "border" feature. Some things to type instead of "solid" is groove, double, inset, outset, dashed, dotted... The number before "px" determines the border thickness and the number after the # is again a hex value, a color.
    You can put this in the "Main block" to put a border around your whole postbit, in "Your name" for a border around your username, and so on. Try it!

    border-right: solid #885f3f 1px;
    ^ by adding the "-right" you'll only put this kind of border on the right side of the element! Switch it for top / bottom / left if you want to put specific borders there instead OR as well. If you only use the "border" code like I wrote above, you'll but the same border on all sides of the element you're editing.

    box-shadow: 0px 0px 1em #785539;
    ^ Play around with different numbers to see what happens! px and em are both units of thickness/size, kind of.

    font-family: 'arvo';
    ^ Switch "arvo" for any other name of a text font that you can think of. Look in Pok?Community's text editor dropdown list of fonts for ideas :) font-family is nice to use on the "Your name" area or "Statistics" or "Mini Biography".

    color: #000fd8
    ^ instead of changing the background's color, this changes text color. Again, useful in the areas where there will be text!

    height / width / display: none;
    ^ these will NOT WORK! To not make you distort the threads, haha. Sorry!​

    Google searches will usually put you on this page https://www.w3schools.com/css/ which I find helps you well.
     
    Last edited:
    Hyzenthlay

    Hyzenthlay

    [span=font-size: 16px; font-family: cinzel; color:
    7,807
    Posts
    11
    Years
    • Where can I learn more about post flairs? When I click the link, it says the page I'm looking for isn't there. Could someone please give me a quick explanation on how it works? ^_^

    Cool flairs, by the way!
     
    tokyodrift

    tokyodrift

    [i]got me looking for attention[/i]
    4,532
    Posts
    12
    Years
    • Age 30
    • he/him
    • Seen Mar 8, 2024
    Hyzenthlay

    Hyzenthlay

    [span=font-size: 16px; font-family: cinzel; color:
    7,807
    Posts
    11
    Years
    • Hiroshi Sotomura

    Hiroshi Sotomura

    18,810
    Posts
    21
    Years
    • Yeah that link isn?t ready yet, haha.

    You basically stick in CSS rules, like the same kind of rules used in [div] and [span] tags, to customize it. Go crazy; add borders, add background images, etc. See various rules you can use here: https://www.w3schools.com/css/default.asp

    And then try using those rules to build your flair.

    For instance, the background image I have is written like this and placed in my "main block":
    Code: 
    background-color: #4d5266;
background-image: url('https://dl.dropboxusercontent.com/s/1fyq0sll2f15pxn/Fates.jpg?dl=0');
background-position: top;
color: white;
     
    Last edited:

    moon

    37,467
    Posts
    16
    Years
    • they/them
    • Seen Apr 19, 2024
    It?s fun to learn css! I learned by copying the fancy posts of others and editing them to create cool looking character profiles in roleplays xD
     
    Nah

    Nah

    15,947
    Posts
    10
    Years
    • Age 31
    • she/her, they/them
    • Seen today
    Would probably be helpful to provide a few templates for people to make use of. Most people don't know how to CSS from scratch and have little reason to spend the time needed to learn how to CSS to the level needed to do a post flair or anything on here. I sure as shit don't know how to CSS; every time I've done something with it it's been via modifying a template/pre-existing piece, or, in the case of my own post flair, Jo had to do it for me.

    So for now I'll drop what is basically the code for my post flair in this thread so people have that at least to use as a base:
    Code: 
    Main block

background-color:#fff; background-image: url(insert image URL here), url(insert image URL here); background-position: top, center; background-repeat: no-repeat, repeat; background-repeat: no-repeat, repeat;border: 15px solid rgba(152, 152, 152, 0.6);

Avatar container

border: solid #885f3f 1px; box-shadow: 0px 0px 1em #785539;

Your name

font-family:Berkshire Swash; font-size:26pt; font-style: oblique; letter-spacing:1px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0 5px #c93d54; color:#8a654a;

Statistics

float:center; text-align:center; padding-bottom:30px; width:166px; height:62px; padding-top:30px; background-image:url("insert image URL here"); background-repeat:no-repeat; margin:15px; font-family:arvo; font-size:10pt; color:#5e3c21; text-shadow: 2px 2px 4px #5e3c21;

Mini Biography
 
float:center; text-align:center; width:166px; height:62px; padding-top:5px; background-image:url("insert image URL here"); background-repeat:no-repeat; font-family:arvo; font-size:9pt; color:#5e3c21; text-shadow: 2px 2px 4px #5e3c21;
    note: it's better on standard postbit than legacy postbit

    feel free to ask for help y'all, no reason to not have fun with this new feature
     
    Last edited:
    ddrox13

    ddrox13

    Anti-Nonsense
    1,650
    Posts
    8
    Years
    • Mine is boring and generic and I don't care, but it's a pretty good base template if you're looking for something plain and effective. Designed on standard top postbit, but it doesn't break too badly on Legacy I think? The difference between mine and most of Staff is that they use image backgrounds or solid colors, while mine is a gradient.

    So yeah. If you're looking for a place to start, feel free to steal this and modify colors or shapes. Or kill the gradient and put an image there. Just make sure to change parts. I don't want everyone's looking identical to mine.

    Code: 
    Main Block:

background: linear-gradient(to right, rgba(400,196,223,1) 00%, rgba(200,70,190,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edc4df', endColorstr='#e029a6', GradientType=1 );
background-size: cover;
color: black;
font-weight: bold;
border-bottom: 10px solid skyblue;
border-bottom-left-radius: 70px;

Avatar Container:

border-bottom-left-radius: 25px;
opacity: 0.7;

Your Name:

color: purple;
font-weight: bold;
font-family: Satisfy;
font-size: 40px;
text-shadow: 2px 2px 0px #ba9bc9;


Statistics:

background: skyblue;
font-family: Satisfy;
color: purple;
border-top-left-radius: 20px;
border-top-right-radius: 0px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border: 3px solid purple;
border-bottom: 3px solid purple;
text-shadow: 2px 2px 0px #ba9bc9;

Mini Bio:

font-family: Satisfy;
color: skyblue;

    And some explanation:
    Main Block: the linear-gradient is, well, a linear gradient. I found rgba easier for editing it. Just change the numbers in the rgba slots until it looks like something you'd want. The bottom border is something I like, though border-top, border-left, and border-right work too. border-bottom-left-radius is responsible for the curve that probably breaks on Legacy but oh well. There's also a ton of wasted code in this block but I'm too scared to touch it.
    Avatar: I'll change this up when I change avatars. I made my avatar a little opaque for effect, and took a tiny bit off the bottom left so it wouldn't interfere with the border too much.
    Name: Only unintuitive thing here is text-shadow, which creates that blue tint behind my name. The numbers there are distances, but I've found 2px to work nicely.
    Stats: more of the same, just ALL of it this time. I have border-radius set in 3 corners, which leaves one corner edged and cool.
    Mini-bio: nothing to see here.
     
    Incineroar

    Incineroar

    441
    Posts
    14
    Years
    • Seen today
    Mine is pretty simple, I'll post the code below:

    Main Block:
    Code: 
    border-left: 3px green solid;
    This one is pretty simple, it just creates a solid border on the left side and makes it green, and also sets it to be 3 pixels wide.

    Avatar Container:
    Code: 
    border-radius: 50%;
    This is a neat little hack - border-radius makes your corners rounded. If we give it 50% of the height/width, it'll make a perfect circle if your avatar is perfectly square!

    Your Name:
    Code: 
    color: #8aaab6; font-style: italic; font-weight: normal;
    This is the styling used to emulate that of Platinum-tier supporters.
     

    moon

    37,467
    Posts
    16
    Years
    • they/them
    • Seen Apr 19, 2024
    Ok. I guess people use this thread as what I intended the sticky to be, so I?ll just merge them xD
     
    Hyzenthlay

    Hyzenthlay

    [span=font-size: 16px; font-family: cinzel; color:
    7,807
    Posts
    11
    Years
    • adventure said:
    It?s fun to learn css! I learned by copying the fancy posts of others and editing them to create cool looking character profiles in roleplays xD
    Click to expand...

    Haha, I'm exactly the same!

    Anyway, thanks everyone, these templates are really helpful! I'll report back with my own flair eventually. ^_^
     

    colours

    8,973
    Posts
    19
    Years
    • yeah the most difficult part is finding a way not only for certain flair designs to look good on both standard and legacy postbits, but also designing them so they look decent in different resolution computer screens which is a massive pain.
     
    Hyzenthlay

    Hyzenthlay

    [span=font-size: 16px; font-family: cinzel; color:
    7,807
    Posts
    11
    Years
    • Does anyone know how to make gradient text? Or something fancy, like what pastel has?

    Something like this:
    Spoiler:
     

    colours

    8,973
    Posts
    19
    Years
    • mine was made entirely in photoshop. :o if you're talking about the bg that is

    for gradient text what i personally use is this site. super handy, especially since it has tons of different gradients to pick from.
     
    Last edited:
    Hyzenthlay

    Hyzenthlay

    [span=font-size: 16px; font-family: cinzel; color:
    7,807
    Posts
    11
    Years
    • pastel said:
    mine was made entirely in photoshop. :o if you're talking about the bg that is

    for gradient text what i personally use is this site. super handy, especially since it has tons of different gradients to pick from.
    Click to expand...

    I meant your shiny name. ^_^

    Thanks for the website, the possibilities are endless! I've figured out how to work the code now, and stumbled upon this handy site as well: https://html-color-codes.info/
     
    Last edited:

    colours

    8,973
    Posts
    19
    Years
    • Hyzenthlay said:
    I meant your shiny name. ^_^

    Thanks for the website, the possibilities are endless! I've figured out how to work the code now, and stumbled upon this handy site as well: https://html-color-codes.info/
    Click to expand...

    OH WAIT NEVERMIND yeah i was confused for a bit; yeah my name is done w/CSS

    yeah dont use the site i gave you, i thought you were talking about generic gradient text or something. xD my name is essentially a gif wrapped around text.

    Your Name:
    Code: 
    background-image: url('https://78.media.tumblr.com/784a8631831a7a35ba0d4765486e4516/tumblr_nyb968BJZP1tchrkco1_500.gif');background-clip: text;-webkit-background-clip: text; color: transparent;

    that's pretty much the code on how to make it happen. :o
     
    You must log in or register to reply here.
    Back
    Top