Circuit
[cd=font-weight: bold; font-style: italic; backgro
- 4,815
- Posts
- 16
- Years
- Berlin
- Seen Jan 6, 2021
We Roleplayers gather here today to strive towards better CSS for writing purposes such as clarity and design. Here are some guidelines which aim to help you design your CSS so that it appears cleaner and gives an overall better impression for your roleplay! Let's begin! NB: This will not give you any design templates, since those can already be found for RPs in the RPT.
Finally, make sure your design FITS YOUR CHARACTER. If you have a lively bright background for a very dark and serious character, well, no one is going to take your character seriously. You must ALWAYS ensure that your design fits your character's personality, and ensure that the response from the CSS matches the response from your character overall. CSS design can change the mood of your character with as simple a change as background colour. Be aware of this, and ensure that the emotions conveyed from the CSS are the right ones.
Last words: Ultimately, it is your writing which will invoke the most emotional response from your reader, but you want to reinforce the feelings you are aiming to convey through your stylisation. But if you write well enough, any design that doesn't perfectly fit wont have much negative impact. That said a good design will impress, and you'll garner a lot more respect and credit for a very well designed bit of CSS to compliment your character. At the end of the day though it is your writing that matters, and if you make people focus on that, with or without CSS, and focussing on that will get you very far indeed!
Hope this helps some of you :)
Design
Arguably the most important factor in any CSS construction, the design is what readers will first see when they come to read your RP, be it the OP or a character post. This can immediately deter or attract potential RPers and readers, and is very important that you make it as attractive as possible, whilst maintaining readability and simplicity. Here are a few tricks to ensure that you get the most out of your CSS design:- Main Body Borders
These borders can make or break CSS and you really should aim to make them appear as smooth and reduce the bulkiness that some borders end up having. Block colour, square borders are very clunky, and very often detract from a potentially very nice CSS design. This can be prevented by using border rounding, using the following code:
The order of the value for each corner is as such: top-left, top-right, bottom-right, bottom-left. Example:
Spoiler:
Redacting one value results in the bottom-left and top-right values being the same. Redacting two values results in the top-left and bottom-right values and the bottom-left and top-right values being the same, and redacting three values results in all radii being the same. Example:
Spoiler:
And with that, you can now take the edge off your otherwise clunky and sharp borders, which mainly become an eyesore in bulk colour.
Another technique you can use to improve your borders is to stylise them. This can be done using the main border command, which often appears as such:
Here you can change the "solid" definition to one of the following:
"groove" "ridge" "inset" "outset" (omitting the "" of course). This results in the following examples:
Spoiler:
As you can see, these make for more refined borders. Couple these with border rounding, and you can make some really nice borders, which are pleasing to the eye. There are plenty of other ways to achieve some totally wicked or simplistic designs, if you just mix codes creatively.
Also, try and keep away from using extremely bright and/or vivid colours as border colours. These (at least imo) look tacky and are quite distracting. I prefer dull colours, which can be brighter if you use inset, outset, groove or ridge borders.
[*]Main Body Backgrounds
Very often I come across CSS with very abstract, busy and loud backgrounds in RPers' CSS, and it really detracts from the text, in some cases making it unreadable. This doesn't mean that the text isn't visible or is the wrong colour against the background, but that the background image used simply attracts the reader's attention too much that focusing on the text is very difficult. To avoid this, backgrounds with vibrant colours should be avoided, when placed directly below the text you want the reader to see. Here is an extreme example indicating this:
Spoiler:
Okay, so that was probably more extreme than you'll likely ever see in RPT, however I've seen similar very occasionally, and CSS designs that achieve a similar effect just not as extremely are more common. The first thing to do is plop a nice child body in there, for your text to sit on so it can be read without the background detracting your attention from it. Example time:
As you can see this is a LOT easier on the eyes. I apologise to those who I've turned blind from my first example. You can also lower the opacity on the child body if you reeeaaally want your background to show through, and this can be done in the "background-color" code of the child body. Instead of using a hexadecimal code for your colour (#------) you can use the "rgba" format. This uses the rgb values and adds and "alpha" value which controls the opacity. 1 is fully opaque and 0 is fully transparent. It looks like this:Spoiler:
This means the background is white with an opacity of 80% (Is 80% opaque). Applied to my previous example it looks like this:
So you still get your background in place, but can still read the text. Best of both worlds eh? Hahahaha!Spoiler:
[*]Child Body Backgrounds
Okay, so I pretty much covered this before, and it is pretty obvious how it should look in order to preserve text legibility, but just to reinforce the point; do not have vibrant colours as your child body's background. Keep them dull, close to white (or black) or so that the text is still very visible and you do not strain your eyes to read it. Slight gradients work wonders in keeping a child body's background interesting whilst not detracting from the text. That's all for that really, it is pretty self-explanatory once you've seen the previous examples.
Finally, make sure your design FITS YOUR CHARACTER. If you have a lively bright background for a very dark and serious character, well, no one is going to take your character seriously. You must ALWAYS ensure that your design fits your character's personality, and ensure that the response from the CSS matches the response from your character overall. CSS design can change the mood of your character with as simple a change as background colour. Be aware of this, and ensure that the emotions conveyed from the CSS are the right ones.
Text
Whilst it may not seem like it, text appearance is a very big factor in attracting or deterring readers, and you should always strive to find the best text in any design. On average, I spend around half of my time on the text when I design CSS for a character (if I do design CSS). There's a lot to consider when designing your text, so think carefully about what you choose since it has a fairly large impact for something so minimal. Here is what you should try and think about each time:- Text Font
An obvious one, but it is also a very important one. First things first: DO NOT WRITE IN COMIC SANS. If you do, stop it. On that same note, do not write in ANY cursive font, as they are not suitable for large blocks of text and look horrible. There are plenty of sans-serif and serif fonts which will give the same feeling across, in a style that is a lot easier to read. For a good list of fonts of each style, look here.
Text font should always match your character; generally, more upbeat characters benefit from sans-serif fonts whilst darker and more serious characters benefit from serif fonts. Of course, it's up to you to decide how you want your text to appear and convey to your reader the feelings and emotions you want.
[*]Text Colour
Colour matters. It needs to be legible for a start, but also can be used to convey a little bit of emotion. Red for passion and danger, blue for colder characters, green for passive, more upbeat characters and so on. Ultimately, I don't advise colouring your text anything other than greyscale, but some people do, and want to, so here is the advise. Be aware on what colours drag out which emotions, and use them accordingly. Making text look pretty isn't paramount to legibility and emotional response.
[*]Text Size
Last thing here, your font size matters too, and does add to the emotional response of the reader. Smaller fonts indicate a more timid character, whilst larger fonts give a feeling of presence and make your character feel larger and bolder as a result. Don't be ridiculous with sizes, since this only works up to a point, before just being plain silly. I mean come on, you're gonna have your posts deleted if your font is 48px large or is so small it can't be read.
Last words: Ultimately, it is your writing which will invoke the most emotional response from your reader, but you want to reinforce the feelings you are aiming to convey through your stylisation. But if you write well enough, any design that doesn't perfectly fit wont have much negative impact. That said a good design will impress, and you'll garner a lot more respect and credit for a very well designed bit of CSS to compliment your character. At the end of the day though it is your writing that matters, and if you make people focus on that, with or without CSS, and focussing on that will get you very far indeed!
Hope this helps some of you :)
