CSS Help & Resources
View Single Post
September 20th, 2010 (2:23 PM).
a guide by mika, top banner by jared
So I've noticed lately on PC that we don't really have a cohesive notion on how formatting should be done. In some cases it's laziness, in other cases it's ignorance, and in other cases, it's just a lack all around of general organization. I decided to make a brief guide to see if I couldn’t help out a little. :3
Before we do anything else, I want to talk about the automatic formatter that's built into the V-Bulletin Post System. You know how when you copy paste a post for pc from Microsoft Word, the font you’re using and the color of your text tend to carry over? [Well, for most people anyways, Safari doesn’t support this system so you Mac Users can stare at me and go ‘wuuuuut’ if you’d like. :3] That’s called the ‘WYSIWYG System’ or ‘What You See is What You Get’. I could tl;dr but I’ll avoid that and be frank. It takes away you having to do the BBC code guesses at what you want and does it for you.
It has its ups and downs, its pros and cons.
What a lot of people I’ve found don’t know is that you can chose not to use this system.
See that highlighted button? That turns the WYSIWYG system on and off.
Here’s an example of each.
The big difference is one view has the BBC code displayed and the other doesn’t. Seems like it’d be neater to just use the WYSIWYG system, right?
If you’re just doing a simple copy and paste, it’s pretty simple right? It never messes up, right?
Let’s take a brief moment and talk about Forum Themes otherwise known as Forum Skins. [From now on in the guide we’ll call them skins just for the hell of it. Because I’m lazy.]
PC has a ton of them. In truth, I’ve yet to find another site with as many customizable skins for you to view the forum in. That’s really cool, it makes the forum so much more user-appealing because you’re not stuck in a god awful theme that you hate until the site admins decide to change it but it also causes a few difficulties. The primary issue here comes from the fact that each individual skin looks different. I know, simple right? But really, it’s true. Each skin has a different color scheme, Midnight Misty is dark, Pawlicious is green and Forever Standing is blue. It doesn’t
like a huge issue at first but if you know anything about how websites are done up, you should know about a magical thing called ‘CSS’.
Helper Kotone says:
Cascading Style Sheets, or CSS, is a formatting code system that changes the default colors of your normal text, your links, the backgrounds, the font and the font size all in one little package. It’s like a [ size= ] or a [ color = ] bbc code except it works for the whole page, not just the post you’re working on.
The CSS is different for every single skin. No two skins have the same css.
If you’re not sure how to change your skin or if you don’t know which one you’re using, click the spoiler and follow the instructions.
The easiest way to change your skin is to scroll down to the bottom of whatever page you’re on and select a skin from the drop down:
If you want to see thumbnails of the skins, do the following:
Followed by this:
And pick one.
Now, if you’re a little confused on CSS, don’t worry you don’t need to master it to post well on PC. You just need to understand what it does.
Here’s an example of a post I made in the DCC on my default skin of choice, Forever Standing:
Now, here’s the same post in Midnight Misty.
See how the color of the text in my post changed? That’s CSS at work. Now, when you’re not using the automatic formatter of the WYSIWYG system [i.e.: you’re just using plain text] you don’t need to worry about this because it’ll automatically change the color of your font to match the default font on whatever skin any particular person is using. If you use the automatter however, you’re locked in with that color because the [*color=][/color] tags over ride the built in CSS.
Here’s an example.
I made this post:
in TCTI awhile ago. I copy and pasted it directly form Word and the black font I was using in word carried over. On Forever Standing, you can read the post just fine, so it should be fine on all skins, right?
Here’s the same post in Midnight Misty:
As you can plainly see [or not see], the text is almost, if not
, impossible to read.
This is because I forgot to make sure in the WYSIWYG system and make sure that there were no color tags brought over when I copy pasted from word.
It’s not too terrible here, this is just black font, but if you take a bright blue font and put it on a skin like Blossom Shower, you’re going to be causing inexplicable pain agony and torture on whoever tries to read your post. This is why you sometimes see people rage on you to not use colored posts. They’re not doing it because they’re trying to shoot down your creativity, it just freaking hurts to look at. It can be so painful that people can’t read beyond a basic skim what you’re saying and that’s sometimes why you don’t get the responses you want if you chose to use a colored font.
Now, if you really really like using a colored font, there’s a way to do it more professionally without causing said pain and torture upon your fellow readers. The way we do this is with a CSS code of our own, to make a background color that carries over no matter what skin you use so you can use whatever color you like and you won’t risk permanent injury to your potential readers.
Okay, so you want to use colored text but you don’t want people to whine about the fact it’s colored? No big deal, we can help you. Remember, the BBC code and everything you do code wise in the little post box over rides the CSS so all we need to do to make sure your text is readable is put our own background behind it. You’ve seen this, without a doubt, in signatures on PC but it can also be used in other places, including threads.
Take the Pokemon Claim thread for example.
See how Lightning made the background of her text area pink? That doesn’t change no matter what skin you switch to. The colors on the pink background won’t change either. What she used here was a combination of CSS and BBC code. It’s much more complicated than what we’re going to do but I thought I’d show you an example of this sort of thing in action.
Okay, so let’s begin.
We’re going to make a new post and we’re going to do it with some CSS so we can use a pretty colored font.
First off, we’re going to click the WYSIWYG button.
This means we’re inputing all the code by hand. This is also known as ‘hard coding’.
In the little window, we’re going to put the following:
[ css-div="overflow:auto; background: #FFFFFF; border: 1px solid #000000;"]Insert witty text here [/ css-div]
This looks like:
Insert witty text here
...when the spaces are removed from [ css-div] [/ css-div]
Helper Kotone says:
Did you notice instead of ‘red’ ‘black’ ‘white’ and ‘blue’ we put 6 numbers? That’s called a hex code and it’s how the computer displays colors. Each color has an individual hex code. If you have a program like photoshop, you can get the hex code of the color you want to use by double clicking the foreground color and copy pasting the code. If you don’t have that, you can google the name of the color you want followed by ‘hex code’ and it’ll spit it right out. There are also hex code charts you can use, just look for them!
Now, at the moment, all we’ve done is change the background and added a border to the area around our text. We haven’t changed the font color and if you were to switch to Midnight Misty, we’d have the same problem we had last time with being unable to read stuff. Now we’re going to add a tag to our css-div bbc tag to override the color crimson. It looks like this:
So here’s the code we’re going be using now:
[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000;"]Insert witty text here [/ css-div]
Which, again with the spaces removed, looks like this:
Insert witty text here
Now that we’ve added that color tag, we’re going to have the same color no matter what skin we’re on in that box. Even if we change to Midnight Misty, we’ll still have the red font color there on a white background and we’ll be able to read it.
Onto the next step, adding some cell padding!
I think the text looks a little cramped. Let’s give it a little bit of wiggle room. With cell padding, the higher the number the more pixels it is away form the edges. The lesser the number, the closer to the border it creeps. For the purposes of this tutorial, we’ll use 10px but you can feel free to mess around with the number when you use your own CSS stuff. [Remember, the preview button is your best friend ever.]
[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000; padding: 10px; padding-right: 10px; padding-left: 10px;"]insert witty text here~
Remove the spaces...
insert witty text here~
See how less cramped it looks? Now we’re getting somewhere. ^-^ Now to round the edges. Again, the higher the number the rounder the edges. We’re going to use 3 for this tutorial.
[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000; padding: 10px; padding-right: 10px; padding-left: 10px;
-webkit-border-radius: 3px; -moz-border-radius: 3px;
"]insert witty text here~
Spaces go poof and
insert witty text here~
Helper Kotone says:
If you like the edges boxy, you’re going to want to delete the parts in
font from your bbc code.
If you’re more code savy, this: -webkit-border-radius: 3px; -moz-border-radius: 3px; is the part that needs to go poof as it’s the thing making your edges round
So you’ve got the basics, now how do we make it all ~fabulous~?
It’s sorta like Las Vegas.
Whatever happens in the CSS box stays in the CSS box.
You can do
slanty danty tags
You can also do:
and everything in between.
You can make it
You can put an
in, you can do anything you want. You can even
change the color
and stuff like that.
So there you have it, the basics and how-tos on how to make things pretty and a reason why using green font without a css background is grounds for
torture and pain and suffering
grumbles from your readers.
A few final comments:
Don't use a black background. I know, it's cool, it's emo, it's hip, it's scene but uh, it looks like crap and it can give people headaches. Dark grey is a far better alternative but I'd avoid really dark colors all together. Remember, there are old people on this site and our eyes aren't like your young whippersnapper eyes.
Don't make the text too small, don't make the colors too close in contrast.
Just use a bit of common sense and don't go over the top. It's not worth it, no matter how cool you think it'll look.
Credits / Resources
Jared for the graphics outside the screenshots
Beachy for teaching me the PC version of CSS
Luke, Ausaudriel and the rest of the #thepokecommunity gang for the moral boost to write this thing
Alter Ego, Jared and Manipulation for beta-ing this thing from all aspects [Grammar, Graphics and CSS respectively]
I don’t think I’m forgetting anyone but if I am, tell me and I’ll add you. <3
Joined Nov 2005
View Public Profile
Send a private message to Mika
Find all posts by Mika
Find threads started by Mika
Ignore Posts by Mika