BBC Coding: How-To for Newbs

(This is a thread from Mizahar's fantasy role playing forums. Why don't you register today? This message is not shown when you are logged in. Come roleplay with us, it's fun!)

Here's the place to find information on 'How do I do that?' when it comes to creating avatars, signatures, calculating travel time or big purchases, or even working with the bbc code. There are help files for codework for both the main board forums and the lore sections. There are threads advertising players that are willing to create signatures for other players. Please feel free to discuss technical issues, photo cropping, suggest new bbc code, or get help from players and admins on things you want to do. This forum includes posts, wiki technical aid, avatar art, character sheet art, signature work, and all things visual when it comes to Mizahar.

BBC Coding: How-To for Newbs

Postby Maewrath on January 15th, 2014, 1:45 am

Image


Welcome to the BBC Code How-To! This is for those who have the codes but aren't quite sure how to manipulate them to the best of their uses, or when they should be used to better your character's information or simple player ease-of-access.

Let's start this off by saying two things; One, the link up top is to Gossamer's Code list. At the bottom Tarot has used Style boxes in a pretty, but simple way compared to what some OTHERS have done. That's what this is for, to give you that boost of knowledge on the workings instead of just GIVING you a whole code and expecting you to deal with it on your own. First, we need to establish Termonology before we get into anything real fancy.

Termonology:
  • Brackets and Braces; [Brackets] are used when coding, while {braces} are similar and allow me to symbolize codes without using codes... which can get redundant and quite annoying for lists of basic codes.
  • Nesting is the process of using multiple codes together. When using multiple codes, watch what code you start with, then what comes next. When closing {/"codes"} You'll close in the opposite way you opened them.
  • Styles are a very powerful tool, we'll be using those a LOT. They are a type of code, so be warned that sometimes I may talk about "styles" other players use but it can refer to both the aesthetic appeal and/or the code itself. Generally they come hand in hand, though.
  • WoTT or Wall of Text Test is when you preview a style with the text just random gobbledegoop to test certain features.
  • Templates are just boxes basically, with aesthetics and appeal, maybe a little text as a place holder.
  • Skeletons are templates with base information, such as Character Sheet
This list may grow in time as I come across other terms that may confuse new folk.

Current topics I've covered:
Organization
Patchwork Styles
Basic Picture Blending

Tips:
  • Post Your Template for easy access for any future post, anywhere on the Forums!
    Use the "Preview" button often! If it turns out wrong, you can hit the back button on your browser to return to the previous edit with no loss!
  • Try not to use backgrounds that are too active, they take away from the information.
  • "Transparent" IS a color term accepted by the codes! It's only 100%, so it make a style box invisible to use it JUST for organization!
Last edited by Maewrath on January 18th, 2014, 1:19 am, edited 1 time in total.
Maew's thoughts | Wrath's thoughts
BBC Coding: How-To for Newbs!
Maewrath
Blood Ribbon Animator
 
Posts: 26
Words: 26435
Joined roleplay: January 14th, 2014, 6:03 am
Race: Akalak
Character sheet

BBC Coding: How-To for Newbs

Postby Maewrath on January 15th, 2014, 1:46 am

Image

ORGANIZATION

There are five tools to organization; Formatting, Lists, Columns, Tables and Tabsets. They can be used in mixtures or stand-alone for all your needs. Note that this is the basics of organization, true mastery takes a bit of fiddling and a little experimentation!

Formatting
{b}Bold{/b} can be used above for headers when listing information or when talking in character to emphasize spoken word. {i}Italics{/i} are good for sub-headers or your character's thoughts. It beats using apostrophes in my opinion, and trumps using quotes for both thought and word.

Now {color=(color)} is another great tool allowing you to change the color of local text. I'll show you later how to make a whole post use a specified text color so DO NOT use this for an entire post, it gets clunky and difficult to use for multiple colors, which you might decide later on you want to use...

With the link to BBC codes Goss has put up, there is also a {font=(font)} option for localized fonts. As with Color, you can change a whole post's Font using a {style=(Style)} code, so it might be preferable not to use this to change the font of everything.

Lists and Columns:
Lists are self explanitory... they make lists! {list}{*}(Item One){*}(Item Two){*}(Item Three){/list} enables you to make lists, or even lists WITHIN lists! {list=} allows you to set an organized listing! 1, i or I are great options here for ordered lists!
  1. You don't need to start another line
  2. for the next bullet,
  3. but it helps organization for later edits.
  1. Just a tip for now,
  2. you will be editing this a LOT later on
  3. when you start working with possessions.
  4. Might as well keep it organized on seperate lines.
  5. Also, for lists IN lists,
  6. Just nest another list code inside the first.
    1. It can be the same type of list or different.
    2. It doesn't really mater,
    3. but you MUST remember;
    4. There are two lists here,
    5. so there must be two closures.
    6. Even when they close at the same time,
    7. otherwise you get junk...
    8. Luckily all list types end with {/list}!

Now, here's the quick and dirty on Columns. You know with your item list? There's a LOT of blank space on the left that leaves something to be desired. {columns=#}when used in juncture with a list can allow a streamlined possessions list!

Example:
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9


Tables:
This site has an excellent table code allowing for the organization of information. {table} allows the user to create a table with columns separated by | marks (no spaces needed between word and mark) and rows by just starting a new line. Let's work with an example here, shall we?
Example A:
Expense|Cost|Total
Starterpack|+100gm|100gm
Iron Staff|-12gm|88gm
Shortbow|-30gm|58gm
Shortbow Arrows(20)|-1gm|57gm
Leather Armor|-10gm|67gm
Quiver|-20gm|47gm

There's your table base. No code needed for each column or row. Now, slap on a {table} and {/table} tag to get;

Example B:
ExpenseCostTotal
Starterpack+100gm100gm
Iron Staff-12gm88gm
Shortbow-30gm58gm
Shortbow Arrows(20)-1gm57gm
Leather Armor-10gm67gm
Quiver-20gm47gm


But there's more! See how the color is so drab sometimes? For color schemes, use {table2=(background color),(text color)} and {/table2} to change colors. Now, there's a problem if you use Styles... WHaaaaa? Your text doesn't change colors... Well this is easily remedied. Use the {color=(color)} code BEFORE the {table2} code to change all of the text within that table. Using it after the table and before a text will change ONLY that cell, just a heads up.

Examble C:
ExpenseCostTotal
Starterpack+100gm100gm
Iron Staff-12gm88gm
Shortbow-30gm58gm
Shortbow Arrows(20)-1gm57gm
Leather Armor-10gm67gm
Quiver-20gm47gm


Much better, isn't it? As added tips, you can use {i} or {b} codes for the top row (each cell must be formatted individually) to annunciation them as Header Cells. You can also use the {center} code around the tables to center them but NOT the information inside.

Example D:
ExpenseCostTotal
Starterpack+100gm100gm
Iron Staff-12gm88gm
Shortbow-30gm58gm
Shortbow Arrows(20)-1gm57gm
Leather Armor-10gm67gm
Quiver-20gm47gm

Vualla! A Table!

Tabset:
A great tool for compressing information, Tabsets allow you to set tabs like a folder filing system with a height that cannot be exceeded. {tabset=200} with more than that height in information/tables/lists or whatever will have an automatic scroll bar... and it can center just like Tables! This code can be tricky to master... But luckily it's text color altering ability transcends the Style nesting protocol, so no {color} manipulation is needed.

{tabset=(height of tabs)}{tab=(Name of Tab),(background color),(text color),(Name of Tab, Can include spaces)} Add info here, then {/tab}{tab=(Name of Tab),(bg color),(text color),(Next tab)}More info before closing{/tab}{/tabset}

DO NOT FORGET TO CLOSE! I've done this a lot out of haste and never saw the flaw. If you forget to close two tabs will blend. If you do not close {tabset} the tabs will unstack into big blocks. As a side note, some of you may LIKE these blocks with the name tag. Go right ahead and use this if it suits your ends. For the following example I'm going to show a basic use with a WoTT in place of information.

Example A:
 
First Tab
This is the first tab, cool isn't it? This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?This is the first tab, cool isn't it?

 
Second Tab
This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!This is the second tab, Just as good as the first!


Tables, lists, columns, images, whatever information you want in there can go in there! If you're looking for a compact CS, you could probably have one tabset code with enough tabs for every topic!

Tip: I find it useful to use these for similar yet distinct information. For those with a LOT of skill types, why not seperate them into Combat/Career/Physical/Mental/Magical or other various forms of tabs and assortments, or for your equipment On person/At Residence/Borrowed.
Last edited by Maewrath on January 18th, 2014, 1:20 am, edited 1 time in total.
Maew's thoughts | Wrath's thoughts
BBC Coding: How-To for Newbs!
Maewrath
Blood Ribbon Animator
 
Posts: 26
Words: 26435
Joined roleplay: January 14th, 2014, 6:03 am
Race: Akalak
Character sheet

BBC Coding: How-To for Newbs

Postby Maewrath on January 15th, 2014, 1:46 am

Image
STYLES!

The moment you've all been waiting for! Styles! Now, this is a VERY powerful tool and must be handled with care, because if you mess it up... you can end up with lines and lines of code with no idea what went wrong. Now, Tarot has some sample Style boxes on the BBC page, but I'm going to show you how to make your own from scratch!

{style=
This is always how you start a style, and it ends with {/style} no matter how much you fill it with! When using a secondary style, it's {style2= and {/style2} (Experimental).

I know I haven't gone through lists of code, but for now I think I will! Fractions of it, at least. You add these into Style, the first going right up against the = mark with no space.

Style "patches"
width;###px;Setting a width removes the stretchiness that Frames have, but be careful; wide widths can cut off some of the text and cause an annoying scroll bar at the bottom of the page. A side bar can be moved down with text, the bottom bar has to go back and forth with each line... Just remember that.
height:###px; Height of the box, if the information exceeds the space given, it will cause a scroll bar beside the box.
padding:#px; Padding is the space around the text so it isn't butt up against the boarders of the box.
border:#px; (boardertype) (color);Simply the boarder around the box.
background-color; (color)
background-image:url(URL of Your Image)For those who just loved the framepic option, try this out!
background-repeat:(vertically, horizontally, tile, no-repeat);
margin-left/right:##px; When width is omitted, you can set a custom space between the edges of the page and the edges of the box, whether fifteen to the right and thirty to the left or whatever. They must be done individually, left and right, though doing just one will effect only that side.
margin:auto; Centers the box
float:left/right Floats the style to one side! Particularly useful when stacking.
color: (number, or proper color name);
font: (font name);
size:###px; Max=200, minimum=50


Now here's where it gets REALLY wonky...
Example A:
Check this out!
Alright, it just got real...
And this!

Can you see this? How this can help you or hurt you? Too little space for anything real big, but if you slowly work the two width patches together you can wind up with somehting like this;
Example B:
You see what I'm getting at here?
Think Facebook style CS!
Boom!
Just blew your mind, didn't I?


Tip: Don't forget, for better separation you can add boarders, margins, whatever! You can even make each individual piece a different image! However, the style might become too "busy" and become more aesthetic than functional... and a dysfunctional Character sheet is a dysfunctional experience...

I think that's the basics for now!
Last edited by Maewrath on January 18th, 2014, 1:20 am, edited 1 time in total.
Maew's thoughts | Wrath's thoughts
BBC Coding: How-To for Newbs!
Maewrath
Blood Ribbon Animator
 
Posts: 26
Words: 26435
Joined roleplay: January 14th, 2014, 6:03 am
Race: Akalak
Character sheet

BBC Coding: How-To for Newbs

Postby Maewrath on January 15th, 2014, 1:47 am

Image
IMAGE BLENDING!

Alright, this will probably be my most simple post yet, and the most organized.
  1. Find a suitable image of appropriate size OR LARGER. Stretching something pixilates it and makes it horrible quality, but shrinking it is MUCH better.
  2. Open it up in Paint (Not Paintshop, ohnonono... Normal old simple Paint will do) and size it down by clicking on the Select tool, right clicking the image and clicking the resize option. If it has the option, do it by Pixels and select Width. Make it match the width of your style, then save it.
  3. Go to Fotoflexer, an online free picture editor site and upload your photo.
  4. Click on Decerations above the tools, then click Borders all the way to the right.
  5. Click Vignette/Matte in the dropdown menue and edit your picture accordingly; change the color to suit any solid background, increase/decrease size of the gradient and the strength. Top strength assures that the outer boarder is the color specified and size allows the "haste" so to say, of the change. Experiment for the best combination.
  6. Saving is free, allowing you to choose where to download the image and all.
  7. Upload it to your Gallery (If you did not know, you have a gallery!).
  8. Grab the URL of the image, make sure to view full size THEN grab it, otherwise you'll have a smaller version...
  9. After your Style opener, post the image as you would normally for a header (or footer) banner.
  10. Enjoy your blended image!

Alternate options:
Just want ONE side blend into the color? Well bring it up in Paint and put a blank space on all the other sides you DON'T want to fade! A header will blend down, but it won't have a pesky boarder of the background color around it! Same for a footer! A signature can have a blank slot for a quote if you'd like!
Maew's thoughts | Wrath's thoughts
BBC Coding: How-To for Newbs!
Maewrath
Blood Ribbon Animator
 
Posts: 26
Words: 26435
Joined roleplay: January 14th, 2014, 6:03 am
Race: Akalak
Character sheet


Who is online

Users browsing this forum: No registered users and 0 guests