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 seem 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’.
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.
If you want to see thumbnails of the skins, do the following:
Followed by this:
And pick one.
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 completely, 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. click me!
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:
#000000 = black
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:
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...
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
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
It’s sorta like Las Vegas.
Whatever happens in the CSS box stays in the CSS box.
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:
I don’t think I’m forgetting anyone but if I am, tell me and I’ll add you. <3