If you've ever browsed some of the roleplay threads in these sections, you'll surely have noticed fancy posts with colorful backgrounds, images, tidbits of all sorts- and as happy as we are to remind you that none of this is necessary to roleplay (well, unless a host says so)... who are we to stop you from learning more about this possibility that our forums can offer, or simply use it in your posts?
Well, that's what this thread is for. Up here, you can find all the basic information, tips and resources to start out with CSS, processed through the eyes of us forum roleplayers. And in the next post and onward, you can share your own tips, request CSS help, or submit templates to be moved to the template gallery! (Please check the gallery thread for submission guidelines!)
Template Gallery
☆ The basics of PokéCommunity's CSS
Right. Let's start from the most basic way we have to add character to our posts. Just like in Word, PokéCommunity comes with a simple editor that can make words bold, italic or underlined (among other things). But unlike Word, those things don't happen inside the window where you're editing your post. If you write down something, want to make it bold, and press the Bold button on top, what you get in the editor is...
And those are BBCode tags. They all do different things, but they all apply to what's inside of them. As you can see, they use the square brackets, the / character marks an ending tag, the lack thereof is for beginning tags. There's a complete list of them here, even for those that don't have a dedicated button in your typical post editor. I have a feeling [float] might come in handy...
Now, CSS can expand the capabilities of BBCode by a lot, but the only way to use it is by including it inside specific BBCode tags in the first place! The tags that allow it are DIV, SPAN, and CIMG. You may notice that just typing [div]*text*[/div] or [span]*text*[/span] does nothing, though. So how are these tags used?
Code:
[PLAIN][b]your text here[/b][/PLAIN]Now, CSS can expand the capabilities of BBCode by a lot, but the only way to use it is by including it inside specific BBCode tags in the first place! The tags that allow it are DIV, SPAN, and CIMG. You may notice that just typing [div]*text*[/div] or [span]*text*[/span] does nothing, though. So how are these tags used?
- [div] is essentially creating a "box" inside your post. You can add anything you want in there as if it was a post inside a post, and you can heavily customize how it looks.
- [cimg] works similar to the [img] tag, which is used for adding images. If you use this tag though, it will require you to add some CSS functions to it to customize how it looks.
- [span] simply applies whatever CSS is inside the tag to text and text only. It's a bit more specific, and you may be fine with DIV most of the time.
☆ How does CSS work?
I just mentioned adding CSS properties right inside the tag. To clarify how that works, let's take a look at an example!If you've ever used the colored text option from the editor you should've seen some BBCode that looks like this:
Notice the = sign inside the opening tag, followed by the chosen color. For the CSS tags, it works the same way, but instead of the color of choice, you can add the CSS properties of your choice! There happens to be a CSS function that determines the color of text, and that can be added to these tags anyways, but notice how it's written differently inside of this SPAN (which is a BBCode tag in itself, like we said).
will not work (notice the missing ; after "red"). Sadly, it can take little to mess this up... that's how things are~
If you get that right, though, you'll be able to add more and more of these properties one after another, and all inside the same DIV, SPAN or CIMG tag. That's the beauty of css!
Code:
[PLAIN][color=red]text[/color][/PLAIN]
Code:
[PLAIN][span=color:red;]text[/span] || [span="color:red;"]text[/span][/PLAIN]You may keep all of your css inside of quotes ("...") if you want, but it's not necessary.
Unlike BBCode, CSS uses : as if it was a = sign, and needs the ; symbol at the end of each, so to speak, "instruction" that you're giving it, even if it's just a single one. Looking at this example still, color is what we'll call a property and red its value. More info on this here!
Code:
[PLAIN][span="color:red"]text[/span][/PLAIN]If you get that right, though, you'll be able to add more and more of these properties one after another, and all inside the same DIV, SPAN or CIMG tag. That's the beauty of css!
☆ Template Time!
Already? Well yes, because creating a roleplay template step-by-step can give us the opportunity to go over all the CSS functions that one may need, as well as streamline this whole thing. But first things first... you may want to put all of your text and images in a single box that you can then customize.
Let's add a simple border to visualize it.
As you can see, without specifying anything, this box will be as wide as it can be! Which means that unless you use some trickery, it will not allow any other "object", be it plain text, another DIV tag, or an image, to be placed on the side of it - only above or below.
⚠️ Important! width as it is can be quite disrupting for mobile users, as it will not consider how wide someone's screen is and will force horizontal scrolling. Trust us, reading posts with horizontal scrolling is hellish. Please use max-width in your CSS whenever possible.
If you put these together, you may go from the example above to something like this (the arrows aren't part of the actual CSS of course):
Something useful to know for long posts: you can set a defined height and then add overflow-y:auto; to your CSS, to make a scrollbar appear on the side of your box and allow you to see all the content anyways. This very post works like that, but here is another example of a roleplay chapter post which uses this technique as well.
Colors for these properties can be given in a few ways: words (red, teal), HEX codes (#ffffff is white for example), or RGB / RGBA values ((255,0,0) is RGB for red). Here is an online color picker!
⚠️ Important! When changing the background of a DIV, remember to change the color of the text too, or the forums will pick whatever text color is set to work with a certain theme. It can often happen that someone who's using a light theme, like VIII, creates a DIV with a light background, sees the default black text, and doesn't set any text color. This would cause people with a dark theme, like Yggdrasil, to have white text on a light background, and that's often unreadable. Setting text colors can be done easily with CSS by just using the color property. Example:
Also, as a side note... please make sure the post is easy to read above everything. Choose lighter, pastel color combinations, enlarge the font if needed, and check your contrast score on tools like this!
⚠️ Important! Apparently, Spoiler tags will overwrite your chosen background color with the default one, and only carry over your chosen text color. When creating a spoiler inside of a DIV tag, please remember to create another DIV tag inside of it, encircling all of the content in your spoiler, and set a background color for it as well.
Which becomes...
⚠️ Important! But also a bit niche. If for whatever reason you have a very long word in your post (somethinglikethisbutlonger for example, but it could also be a string of ======= used as separator) it might be a good idea to add the property word-wrap:break-word;, or the browser may still force horizontal scrolling in your box even past the maximum width you've set.
Adding this in the CIMG tag will give, in context:
Evelyn Laurent
Jubilife Training Grounds, October 4
*text*
The simplest way to get started is to put all of the positioning and general properties in a big outside box. In this case, we won't add a background-color to it either. We'll just create a box that only has this:
This by itself doesn't do absolutely anything... but this:
Let's put all of the information about Evelyn, including her picture, in a new box that we can see as a header. It's meant to stick out, so why not keep the background color from before? Let's add padding in this box too, though. And one more thing... since now, with just two lines of text, the image might overflow from the box (a side effect of float), let's add a minimum height.
Let's add the main text box now! You may not need to create a new box at all and write inside the outer DIV, but for long posts, you may want to add the height and overflow-y:auto properties right in here. Let's do that, and let's add the padding again.
Put it all together and...
Evelyn Laurent
Jubilife Training Grounds, October 4
This is already very close to this actual post of Evelyn, which uses a rather standard template of which you can find many, many other examples across the forums. You don't really need anything more complex than this!
Here's the final result again but with thicker borders around each box, so you can visualize them better:
Evelyn Laurent
Jubilife Training Grounds, October 4
And from here, the options are endless! Want to add a "header" but on the bottom? It's quite common to put your Pokémon's information there if you're doing a Pokémon journey RP and you can surely do that! Need a few more pictures here and there? No problem either! Want to add more paragraphs and more titles? Make a box for each and create the chapter post of your dreams!
To be entirely fair, not all css properties or variations thereof may work on PokéCommunity, or look the same in all browsers. But that only applies to a few, usually more advanced features. In any case, feel free to reach out and ask away if you have any questions or doubts... in the Roleplay Lobby right here!
Let's add a simple border to visualize it.
Code:
[PLAIN][div="border:1px solid red;"]text goes here[/div][/PLAIN]text goes here
As you can see, without specifying anything, this box will be as wide as it can be! Which means that unless you use some trickery, it will not allow any other "object", be it plain text, another DIV tag, or an image, to be placed on the side of it - only above or below.
☆ Positioning your DIV and what's inside of it
Positioning your box inside your post is the first thing you may typically want to do, and there's a few properties to make this happen:- height and width determine the size of the box.
- margin determines the space that's left clear, as a "spacer", outside of the box. The value auto centers your box horizontally, if you provide a width as well.
- padding determines the space between the borders of the box and what's inside.
⚠️ Important! width as it is can be quite disrupting for mobile users, as it will not consider how wide someone's screen is and will force horizontal scrolling. Trust us, reading posts with horizontal scrolling is hellish. Please use max-width in your CSS whenever possible.
If you put these together, you may go from the example above to something like this (the arrows aren't part of the actual CSS of course):
Code:
[PLAIN][div="border:1px solid red;
→ max-width:75%;
→ margin:auto;
→ padding:5px;
"]text goes here
[/div][/PLAIN]text goes here
Something useful to know for long posts: you can set a defined height and then add overflow-y:auto; to your CSS, to make a scrollbar appear on the side of your box and allow you to see all the content anyways. This very post works like that, but here is another example of a roleplay chapter post which uses this technique as well.
☆ Customizing your box
So... We made a centered box and positioned our text inside of it. Can we make it look better though?- border can be used to actually set three things in one - width, style, and color (in this order). More info on how borders work can be found here.
- background-color specifies the background color of your box.
- background-image can be used for images from a certain URL, as well as color gradients.
- background-size is one of many commands that can help you set size, position, repetition and opacity of these backgrounds. More information on backgrounds is here!
Colors for these properties can be given in a few ways: words (red, teal), HEX codes (#ffffff is white for example), or RGB / RGBA values ((255,0,0) is RGB for red). Here is an online color picker!
⚠️ Important! When changing the background of a DIV, remember to change the color of the text too, or the forums will pick whatever text color is set to work with a certain theme. It can often happen that someone who's using a light theme, like VIII, creates a DIV with a light background, sees the default black text, and doesn't set any text color. This would cause people with a dark theme, like Yggdrasil, to have white text on a light background, and that's often unreadable. Setting text colors can be done easily with CSS by just using the color property. Example:
Code:
[[PLAIN]div="background-color:yellow;[/PLAIN][b][PLAIN]color:black;[/PLAIN][/b][PLAIN]"]text goes here[/div][/PLAIN]⚠️ Important! Apparently, Spoiler tags will overwrite your chosen background color with the default one, and only carry over your chosen text color. When creating a spoiler inside of a DIV tag, please remember to create another DIV tag inside of it, encircling all of the content in your spoiler, and set a background color for it as well.
☆ Formatting what's inside the box
CSS actually lets you format text using various properties, and can sometimes be more flexible than BBCode, but you can choose to do so with the PokéCommunity editor as well. With those tags in place, plus the positioning and aesthetic properties we listed, you can already get to something like...
Code:
[PLAIN][div="max-width:75%;margin:auto;padding:5px;
→ border:2px solid #c20059;
→ background-color:#ffcce4;
→ color:black;"]
[b][font=Uncial Antiqua][size=4]Evelyn Laurent[/size][/font][/b]
[i][size=1]Jubilife Training Grounds, October 4[/size][/i]
*text*[/div][/PLAIN]Evelyn Laurent
Jubilife Training Grounds, October 4
*text*
Jubilife Training Grounds, October 4
*text*
⚠️ Important! But also a bit niche. If for whatever reason you have a very long word in your post (somethinglikethisbutlonger for example, but it could also be a string of ======= used as separator) it might be a good idea to add the property word-wrap:break-word;, or the browser may still force horizontal scrolling in your box even past the maximum width you've set.
☆ Adding Images
Now, we might want an image of this Evelyn girl, right? In some situations, the [img] tag may suffice, but... it's anything but flexible. You need to have the image cropped to the right size and that can't be changed easily. With [cimg] however, you can do something more interesting, like setting a width for your image, a border, a shadow, a margin... and also push it to the side instead of aligning it with text. You'll need the float property:
Code:
[PLAIN][cimg="
→ max-width:80px;
→ border:3px solid #c20059;
→ float:right;
"]https://media.discordapp.net/attachments/853916794741719061/972933647336361984/unknown.png[/cimg][/PLAIN]Jubilife Training Grounds, October 4
*text*
☆ Box-ception!
Usually, creating DIV tags inside of other DIV tags is the best way to go from here. It can let you divide your template in defined parts, duplicate them easily, and have an easier time editing the template further.The simplest way to get started is to put all of the positioning and general properties in a big outside box. In this case, we won't add a background-color to it either. We'll just create a box that only has this:
Code:
[PLAIN][div="max-width:75%;margin:auto;padding:5px;"] *content* [/div][/PLAIN] *content*
Let's put all of the information about Evelyn, including her picture, in a new box that we can see as a header. It's meant to stick out, so why not keep the background color from before? Let's add padding in this box too, though. And one more thing... since now, with just two lines of text, the image might overflow from the box (a side effect of float), let's add a minimum height.
Code:
[PLAIN][div="
→ padding:5px;
→ border:2px solid #c20059;
→ background-color:#ffcce4;
→ color:black;
→ min-height:100px;"]
IMAGE: [cimg="max-width:80px;border:3px solid #c20059;float:right;"]https://media.discordapp.net/attachments/853916794741719061/972933647336361984/unknown.png[/cimg]
NAME: [b][font=Uncial Antiqua][size=4]Evelyn Laurent[/size][/font][/b]
LOCATION: [i][size=1]Jubilife Training Grounds, October 4[/size][/i]
[/div][/PLAIN]Let's add the main text box now! You may not need to create a new box at all and write inside the outer DIV, but for long posts, you may want to add the height and overflow-y:auto properties right in here. Let's do that, and let's add the padding again.
Code:
[PLAIN][div="padding:5px;
→ max-height:130px; (130 pixels is just to make it tiny and show how overflow works!)
→ overflow-y:auto;"]
* text goes here * [/div][/PLAIN]Put it all together and...
Evelyn LaurentJubilife Training Grounds, October 4
You can tell that Evelyn is proud of her little Pokémon. Surely she didn't put much thought into it at first, when Shaula was only meant to be an added asset to get her into the boat to Hisui, and she only caught her and took care of her because of this. Any Pokémon would've been fine, also - at least, it's a way to get up the ladder and catch stronger Pokémon in the future, right? But now that they began to know each other more and work in the Security Corps, Evelyn and Shaula have become more friends than they've ever been before.
And friends deserve a nice meal after a training session. Shaula gulps down the few Pecha Berries that Evelyn has on her quickly, without leaving anything but the stems.
Compared to other Pokémon that are seen here at the training grounds, Shaula is not that strong and especially, not that large. That can be said about Evelyn herself, who is often surrounded, willing or not, by taller, older, smarter, or all-of-the-above-at-once people. She can't do much about it but give herself some slack, some room for growth, and yet all the stories about people relentlessly chasing down their goals and never giving up don't make it any easier for her. All of the peer pressure from her colleagues who have been on the job for longer also doesn't help. At least the broken target gives her some dopamine to keep at it and some reassurance to stay positive...
And friends deserve a nice meal after a training session. Shaula gulps down the few Pecha Berries that Evelyn has on her quickly, without leaving anything but the stems.
Compared to other Pokémon that are seen here at the training grounds, Shaula is not that strong and especially, not that large. That can be said about Evelyn herself, who is often surrounded, willing or not, by taller, older, smarter, or all-of-the-above-at-once people. She can't do much about it but give herself some slack, some room for growth, and yet all the stories about people relentlessly chasing down their goals and never giving up don't make it any easier for her. All of the peer pressure from her colleagues who have been on the job for longer also doesn't help. At least the broken target gives her some dopamine to keep at it and some reassurance to stay positive...
This is already very close to this actual post of Evelyn, which uses a rather standard template of which you can find many, many other examples across the forums. You don't really need anything more complex than this!
Here's the final result again but with thicker borders around each box, so you can visualize them better:
Evelyn LaurentJubilife Training Grounds, October 4
You can tell that Evelyn is proud of her little Pokémon. Surely she didn't put much thought into it at first, when Shaula was only meant to be an added asset to get her into the boat to Hisui, and she only caught her and took care of her because of this. Any Pokémon would've been fine, also - at least, it's a way to get up the ladder and catch stronger Pokémon in the future, right? But now that they began to know each other more and work in the Security Corps, Evelyn and Shaula have become more friends than they've ever been before.
And friends deserve a nice meal after a training session. Shaula gulps down the few Pecha Berries that Evelyn has on her quickly, without leaving anything but the stems.
Compared to other Pokémon that are seen here at the training grounds, Shaula is not that strong and especially, not that large. That can be said about Evelyn herself, who is often surrounded, willing or not, by taller, older, smarter, or all-of-the-above-at-once people. She can't do much about it but give herself some slack, some room for growth, and yet all the stories about people relentlessly chasing down their goals and never giving up don't make it any easier for her. All of the peer pressure from her colleagues who have been on the job for longer also doesn't help. At least the broken target gives her some dopamine to keep at it and some reassurance to stay positive...
And friends deserve a nice meal after a training session. Shaula gulps down the few Pecha Berries that Evelyn has on her quickly, without leaving anything but the stems.
Compared to other Pokémon that are seen here at the training grounds, Shaula is not that strong and especially, not that large. That can be said about Evelyn herself, who is often surrounded, willing or not, by taller, older, smarter, or all-of-the-above-at-once people. She can't do much about it but give herself some slack, some room for growth, and yet all the stories about people relentlessly chasing down their goals and never giving up don't make it any easier for her. All of the peer pressure from her colleagues who have been on the job for longer also doesn't help. At least the broken target gives her some dopamine to keep at it and some reassurance to stay positive...
And from here, the options are endless! Want to add a "header" but on the bottom? It's quite common to put your Pokémon's information there if you're doing a Pokémon journey RP and you can surely do that! Need a few more pictures here and there? No problem either! Want to add more paragraphs and more titles? Make a box for each and create the chapter post of your dreams!
To be entirely fair, not all css properties or variations thereof may work on PokéCommunity, or look the same in all browsers. But that only applies to a few, usually more advanced features. In any case, feel free to reach out and ask away if you have any questions or doubts... in the Roleplay Lobby right here!
☆ Good CSS Practices
We have already scattered some of these across the tutorial above, but here's a better, more compact list of what to keep in mind when creating a template.- With DIV tags and images, please set a max-width to avoid horizontal scrolling! Also be careful about setting margins or paddings in absolute values (pixels in this case) - might look small on laptop, may be huge in proportion on a smartphone! Try to make your template responsive, basically.
- Avoid bright, neon colors, especially in backgrounds, and make sure the post is readable.
- To the same effect, avoid making your font sizes too small! If you're using CSS, then 12px is a good threshold for most fonts available on the forums.
- If you use a background color for your template, be mindful of spoilers, and make sure they also have a similar background.
- If you're making a very long post, consider using overflow-y:auto and setting a max height! If you mashed words together or something, use word-wrap:break-word instead!
☆ Useful Resources for CSS
- w3schools.com is your friend. It not only has a very comprehensive list of all CSS properties and what values they accept, it also has various tutorials, as well as...
- w3school's Color Picker. Very good for finding the HEX or RGB values of the colors you want to use, as well as tinkering with different shades and finding cool color combinations. You may also google "html color picker" and find many more, if you don't like this particular one.
- This Contrast Checker can help you determine whether or not your color combination makes for an easy reading experience... I've been guilty of ignoring this too many times...
- Gradient Generators such as cssgradient.io can help you with implementing gradients without writing the css code yourself!
- Internet & Technology, over here on the forums, has a more general BBCode / CSS guide you can check out. Or you can just post there and get all the help you need!
- I linked it previously but here it is again: PokéCommunity's list of BBCode tags.
Guide by Eleanor, updated July 2022
Last edited by a moderator:
