We are a popular roleplay site based on the Warrior series by Erin Hunter. Whether you're a fan of the books or not, WCC2 is a place to roleplay, enter contests, and make and talk with friends. Our site is a fun, fresh, and exciting new experience for all users alike so we urge you to join. If you're confused and need assistance or have questions, comments, or concerns, check Classic's rules or leave a thread below or message an administrator. Any of the more experienced members will also be willing to help so please don't be afraid to ask. Check out our Clans and Groups, which will give you wide range of different roleplaying experiences. Here on Classic we deeply care about each and every one of our members because we are more than just a community, we are family and we love one another and wish for each individual to be happy. If you ever have any troubles, refer to the support threads below we have a lot of wise and comforting members that can advise you and many supportive people as well. Choose a Clan, create your cat, and enter Warrior Cat Clans 2.
NOTE TO ALL DESIGNERS: Please remember when creating HTML layouts that you do not use general global selectors (link, body, h1, etc.) when styling your layout! It will cause the site to break on that page. When styling your layout, make sure that your selectors are unique to that specific layout or clan/group. (instead of .welcome it's .clanwelcome).
TL;DR Use CSS selectors unique to that clan or group page.
Post by The Worst Person Alive on Apr 10, 2021 8:36:14 GMT
TUTORIAL #1 -- NAVIGATING THE TEXT EDITOR
This tutorial will start from the very beginning and go through each of the functions of the text editor.
When you first open the text editor by clicking on the 'create reply' or 'edit post' button in a thread, it will take you to a screen that looks something like THIS:
...albeit probably in different colours. The labelled buttons here are pretty basic, but for completeness' sake let's go through them quickly:
Subject line. This is the title of the thread--the only time you'll need to fill this in with something is if you're creating a new thread.
Attachment button. You can use this to pin attachments like Word docs or other files (1mb max file size) to your post....but nobody really does that here since you can just insert images directly into the post anyway. CARRYING ON.
Options button. You can use this for a variety of different things, including bookmarking your threads so you can view them from your bookmarks list. Staff members have a few extra options with this button, like locking a thread so that no one can reply to it anymore or 'stickying' it to the top of the forum its in.
THE FABLED BBCODE BAR. Well, actually it's only me that calls it that, but still. This has a whole bunch of stuff that you can do that we'll get to in the next segment of the tutorial.
The text box. Type in here!
Preview/bbcode mode button. What we're looking at in this screenshot is the preview mode, which shows you what the post will look like to everyone else. Bbcode shows you the actual code the website reads to display the post--but unless you're coding layouts (which maybe you will be, if I have anything to say about it!) you probably won't ever need to switch into bbcode mode.
Create post button. Posts your reply. Don't worry if you make a mistake! You can go back and edit it.
THE BBCODE BAR
Alright, time for the real stuff. SHOW THE SCREENSHOT, BOIS.
Font face. Changes the font of the highlighted text, like this, or maybe this is more your style (though I hope not LMAO). Proboards has 8 default fonts, but there are ways of using more than just those 8....but that's a story for another tutorial.
Font size. Changes the size of the highlighted text. Like this. Or even like this!
Colour. Changes the colour of the highlighted text. Example A, Example B. You can pick what colour you want either through pasting in a hex code or picking it directly off a colour wheel.
Boldface. Bolds highlighted text, like this.
Italics. Italicizes highlighted text, like this.
Underline. Underlines highlighted text, like this.
Strikethrough. Strikes through highlighted text, like this.
Superscript. Makes highlighted text superscript, like this.
Subscript. Makes highlighted text suvscript, like this.
Clear formatting. Removes all formatting on highlighted text (formatting being the stuff mentioned above, like text colour and underlines and whatnot.)
Left-align. Aligns highlighted text to the left.
Centre-align. Aligns highlighted text to the centre.
Right-align. Aligns highlighted text to the right.
Justify. Justifies highlighted text.
Table. Adds a table, which can be edited further by editing the table's 'style' in the bbcode editor.
List. Adds a list.
Horizontal rule. Adds a flippin' great big line in the text box, like a line break.
Link. Embeds highlighted text with a link to some other web address.
Email. Honest to god don't know what this does.
Insert image. Inserts an image, which can be edited further by editing the image's 'style' in the bbcode editor.
Inserts a video. We don't really do this much on Classic.
Insert user link. Inserts a link to another user, 'tagging' them (aka sending them a notification that they've been tagged in a thread). A good way to get someone's attention if you want them to reply.
Insert code. Lets you insert bbcode into a post in plaintext form. Doesn't get used much on Classic, but gets used a lot here (so that users can copy bbcode templates).
Quote. Let's you quote another user, although there's also a quote button on everyone's posts already so it's kind of redundant.
Emojis. INSERT GLORIOUS, MID-2000S STYLE PROBOARDS EMOJIS. Don't tell me they're not cute!
Embed. Lets you embed Facebook/Instagram/Google Docs/Spotify/Pinterest/some other stuff into your posts. Also doesn't get used much.
Post by The Worst Person Alive on Apr 10, 2021 9:25:46 GMT
TUTORIAL #2 -- CREATING A COOL BOX
❝ WAIT, The Worst Person Alive! WHAT MAKES A BOX COOL OR NOT? ❞
Whether or not it was made using BBCode, obviously. ...Yeah, that's totally it.. Anyway, here's how you make a box using bbcode. First, TYPE THIS INTO YOUR BBCODE EDITOR (NOT THE PREVIEW SCREEN!)
[div style="height:100px;width:100px;background-color:white;border:1px solid black;margin-left:auto;margin-right:auto;"]cool box[/div] AND NOW SWITCH TO THE PREVIEW SCREEN AND YOU'LL HAVE THIS!
cool box
❝ WAITWAITWAIT SLOW DOWN. WHAT THE HELL IS ALL THAT? ❞
It's a box, mi amigo. Can't you read?
❝ BUT HOW DID THAT BIG LONG STRING OF TEXT TURN INTO A BOX? ❞
Okay, okay, let me break down what I'm doing. Here's the "big long string of text" again:
[div style="height:100px;width:100px;background-color:white;border:1px solid black;margin-left:auto;margin-right:auto;"]cool box[/div] Now let's break it down into sections. First, the mysterious DIV TAGS. In BBCode, a 'div box' or 'div' is basically a container for content. You can put a whole bunch of stuff in the div and you can tell it how it should look by styling it, aka adding some stuff in a style tag--which is what I've done above.
❝ ISN'T THIS KINDA LIKE HTML AND CSS? DIVS? STYLING? ❞
Yep. It's the same thing, but a little more restricted. And also looks less pretty, since all the code just tends to sort of all go on the same line. You open a div with
and close it with
, and anything in between the two tags is applied to the div. The opening
tag can get pretty long since that's where you put the styling, but if you look in the code to see where I've put "cool box", you can see that it's right in between the two tags. In other words, in that space there is where you put the actual content you want the div to have in it.
❝ ALRIGHT, SO WHAT IS ALL THIS STYLING STUFF ANYWAY? ❞
Good point! Let's go through it piece by piece. The first piece of styling I did was to set the height:
height:100px; ^ This lets the div know that you want it to be a hundred pixels tall. The way you write out stylr tags like this is always the same way--the thing you want to set, followed by a COLON, what you want to set it to, followed by a SEMI-COLON. That lets you chain a whole bunch together, like a beautiful, bbcode daisy chain.
width:100px;
^ I also set the width to be 100 pixels wide, which makes it a square, perfectly balanced as all things should be. I could've also set the width using a percentage, which tells it to take up whatever percentage of the screen you say. For example, I could say "width:100%;" and it would cover the entire width of the post, or I could do "width:30%:" and it would take up only 30%. The alignment of the div also matters when setting the width by percentage--a left-aligned div set to 60% width will take up the left 60% of the post, while a centre-aligned div set to 60% will take up the middle 60%, and so forth.
background-color:white; ^ Makes the background colour of the div white. You can also set it to a hex code or rgb code.
border:1px solid black; ^ Sets up the border of the box. Other possibilites include having a dotted line (just replace 'solid' with 'dotted', having a differently coloured line, having a thicker border (eg. 5px or 10px as opposed to 1px), etc.
margin-left:auto;margin-right:auto; ^ This just centers the div. There are other ways to center a div but hey, I like this one.
Don't tell me they're not cute!