HomeRegisterLog in
Log in
Username:
Password:
Log in automatically: 
:: I forgot my password
Table of Contents
Latest topics
Naruto Masashi Kishimoto

Any creations, posts, ideas, or otherwise content from this website are copyrighted to their owners and creators. No information may not be taken or used without said owners permission, with the exception of situations listed in the terms of service and rules which are subject to change without warning. All Rights Reserved.



Share | 
 

 Stat Sheet Coding Guide

View previous topic View next topic Go down 
AuthorMessage
Kaira
Graphics Administrator
Graphics Administrator
avatar


PostSubject: Stat Sheet Coding Guide   Thu Apr 03, 2014 6:54 am

Figuring Out Your Stat Sheets

If you're having trouble with your stat sheers, this is a little guide to helping you decode it. First is choosing which works out better for you.

If you have trouble with large blocks of texts with no spaces in between and want something fast and easy to use, then by all means go for the more basic code.

If you're used to coding HTML and basically if you know how it works, then go for the more advanced one. Either way, you get more or less the same result.


_________________



[16:05:55] Minor Threat x : INGOO OWNS KAIRA'S TALENT AND SKILLS
[16:06:01] Minor Threat x : MUAHAH
[16:06:37] @ Oturan : Kaira Ingoo Terms and Conditions apply, result may vary (but they will be freakin awesome no matter what)



Last edited by Kaira on Thu Apr 03, 2014 2:35 pm; edited 4 times in total
Back to top Go down
Kaira
Graphics Administrator
Graphics Administrator
avatar


PostSubject: Re: Stat Sheet Coding Guide   Thu Apr 03, 2014 6:56 am

Basic Coding


Anna of Arendelle
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10

In order to edit the more basic template, we're going to be dabbling with a mix of HTML and BBCode. If you're having more trouble with the HTML and you're better with working with BBCode, then this is for you. First, we're going to need the original code:

Code:
[center]<div style="height:180px;width:400px;background:url(http://i.imgur.com/SvGnP2o.png);border:1px #362f2d solid;color:#362f2d;"><div style="margin-top:-15px;">
[table][tr][td][/td]
[td][url=http://www.narutor.org/anna.html][b][color=#362f2d][font=Courier New]Anna of Arendelle[/font][/color][/b][/url][/td]
[td][/td]
[td][/td]
[/tr]
[tr][td][b]Ninjutsu[/b][/td]
[td]10[/td]
[td][b]Fortitude[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Iryo[/b][/td]
[td]10[/td]
[td][b]Vitality[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Fūinjutsu[/b][/td]
[td]10[/td]
[td][b]Agility[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Kujutsu[/b][/td]
[td]10[/td]
[td][b]Chakra Flame[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Taijutsu[/b][/td]
[td]10[/td]
[td][b]Evasion[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Genjutsu[/b][/td]
[td]10[/td]
[td][b]Stealth[/b][/td]
[td]10[/td]
[/tr]
[tr][td][b]Bukijutsu[/b][/td]
[td]10[/td]
[td][b]Ninja Art[/b][/td]
[td]10[/td]
[/tr]
[/table]
</div></div>[/center]

I. Working with the Appearance
Backgrounds

If you've noticed, this simpler code uses more BBCode than HTML. However, another thing you'd notice is that the height of this is a little bigger (180px instead of 160px) and this is because of the positioning problems of the HTML. Don't worry, that means you're just going to need a bigger background!

I'm going to use the second default background:
Spoiler:
 

This is the one time we're going to work with HTML Smile

Find the code that says this:
Code:
<div style="height:180px;width:400px;background:url(http://i.imgur.com/SvGnP2o.png);border:1px #362f2d solid;color:#362f2d;">

It should be at the beginning of the code. Notice that it says background:url(http://i.imgur.com/SvGnP2o.png). In the url parenthesis, you're going to want to replace the url of the current image with the url of the background change.

Notice that when I change it I get this:

Anna of Arendelle
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10

Border

Next we're going to want to change the border. Going back to our HTML, we want to look for something that says this:
border:1px #362f2d solid.

If we wanted to change it to white, we're going to look for the HEX values for white which is #FFFFFF

Alternatively, we can also change the thickness or style of the border by changing the values. However, because of my preferences of appearance, I'm going to stick to a 1px solid border.

By changing the color, we get:


Anna of Arendelle
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


Font Color

Still dabbling on the HTML, locate for something that says color:#362f2d.

Once again, if we wanted to change it to white, we're going to look for the HEX values for white which is #FFFFFF


Anna of Arendelle
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10

As you can see, the font for the link is still dark. In order to change this, we're going to have to edit the BBCode!

Look for something that says this now!
Code:
[td][url=http://www.narutor.org/anna.html][b][color=#362f2d][font=Courier New]Anna of Arendelle[/font][/color][/b][/url][/td]

And where it says color=#362f2d, we're going to change the HEX values to #FFFFFF.

Now we get:


Anna of Arendelle
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


II. Editing Your Values
Profile Name and Link

In order to edit the name and link, we're going to need to look for this again:
Code:
[td][url=http://www.narutor.org/anna.html][b][color=#362f2d][font=Courier New]Anna of Arendelle[/font][/color][/b][/url][/td]

The first thing we want to do is edit the link, so find this:
url=http://www.narutor.org/anna.html. Replace the link with the link to your character profile.

Now to edit the name of your character simply find this: Anna of Arendelle. Replace that with your character's name. In the end you should get:


Kaira
Ninjutsu10Fortitude10
Iryo10Vitality10
Fūinjutsu10Agility10
Kujutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10

Now in order to change the numbers in the bbcode, we're going to look for the category it falls under before the number. Say I levelled up Ninjutsu from 10 to 20. I'm going to look for the code that says:
Code:

[tr][td][b]Ninjutsu[/b][/td]
[td]10[/td]
[tr]

_________________



[16:05:55] Minor Threat x : INGOO OWNS KAIRA'S TALENT AND SKILLS
[16:06:01] Minor Threat x : MUAHAH
[16:06:37] @ Oturan : Kaira Ingoo Terms and Conditions apply, result may vary (but they will be freakin awesome no matter what)



Last edited by Kaira on Thu Apr 03, 2014 11:00 am; edited 1 time in total
Back to top Go down
Kaira
Graphics Administrator
Graphics Administrator
avatar


PostSubject: Re: Stat Sheet Coding Guide   Thu Apr 03, 2014 10:48 am

More Advanced Coding

Okay, so a bit of a warning here. We're going to be working with pure HTML. If that doesn't scare you, then by all means, let's proceed.

First of all, the dimensions for this is 400px x 160px, so it's smaller than the BBCode one by 30px. The good part is is that we save 30px of space! Yay for smaller signatures!

This is what we're working with:

Anna of Arendelle
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


As for the code:
Code:
<center><div style="height:160px;width:400px;background:url(http://i.imgur.com/SvGnP2o.png);border:1px #362f2d solid;"><table style="font:13px 'Courier New', Courier, monospace;color:#362F2D;width:400px;padding:5px;margin:-7px"><tr><td colspan="4" style="text-align:right"><a href="Link to app.html" style="font:12px 'Courier New', Courier, monospace;text-align:right;color:#362F2D; text-decoration:none"><b>Anna of Arendelle</b></a></td><tr><td><b>Ninjutsu</b></td><td>10</td><td><b>Fortitude</b></td><td>10</td></tr><tr><td><b>Iryō</b></td><td>10</td><td><b>Vitality</b></td><td>10</td></tr><tr><td><b>Fūinjutsu</b></td><td>10</td><td><b>Agility</b></td><td>10</td></tr><tr><td><b>Kugutsu</b></td><td>10</td><td><b>Chakra Flame</b></td><td>10</td></tr><tr><td><b>Taijutsu</b></td><td>10</td><td><b>Evasion</b></td><td>10</td></tr><tr><td><b>Genjutsu</b></td><td>10</td><td><b>Stealth</b></td><td>10</td></tr><tr><td><b>Bukijutsu</b></td><td>10</td><td><b>Ninja Art</b></td><td>10</td></tr></table></div></center>

I. Working With Appearances
Background

So first of all, we're going to look for this line of coding:
Code:
<div style="height:160px;width:400px;background:url(http://i.imgur.com/SvGnP2o.png);border:1px #362f2d solid;">

We want to change the background from the papery-brown into this:
Spoiler:
 

If you've read the previous tutorial, then you should probably know what we're going to edit. If not, then we're going to be looking for something that says this: background:url(http://i.imgur.com/SvGnP2o.png). After, we're simply going to switch the url within the parenthesis to the new url.

After, we get this:

Anna of Arendelle
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


Border

For the border, we can simply do exactly what we did in our previous tutorial. Directly quoting:

Kaira wrote:
Next we're going to want to change the border. Going back to our HTML, we want to look for something that says this:
border:1px #362f2d solid.

If we wanted to change it to white, we're going to look for the HEX values for white which is #FFFFFF

Alternatively, we can also change the thickness or style of the border by changing the values. However, because of my preferences of appearance, I'm going to stick to a 1px solid border.

By changing the color, we get:

Anna of Arendelle
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


Font Color

For the font color, instead of working with the DIV tag, we're going to be working with the table itself. First, locate this line of code:
Code:
<table style="font:13px 'Courier New', Courier, monospace;color:#362F2D;width:400px;padding:5px;margin:-7px">

Then we look for this segment in particular: color:#362F2D. Then we simply replace #362F2D into the color we want it to be. In this case, white. So we find the hex code for it, in this case #FFFFFF.

Once we change this, we get:

Anna of Arendelle
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


Now in order to change the font for the profile link, we're going to have to locate this:
Code:
<a href="Link to app.html" style="font:12px 'Courier New', Courier, monospace;text-align:right;color:#362F2D; text-decoration:none"><b>Anna of Arendelle</b></a>

Now look for the part that says color:#362F2D and change that into whatever color you want. I'm going to use white again.

Anna of Arendelle
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


II. Editing Your Values
Profile Name and Link

So, let's find this line of code again.
Code:
<a href="Link to app.html" style="font:12px 'Courier New', Courier, monospace;text-align:right;color:#362F2D; text-decoration:none"><b>Anna of Arendelle</b></a>

And instead of editing the color and all, we're going to look for Anna of Arendelle and we're simply going to replace it with whatever your character name is. So say it's Kaira.

As for the url, we're going to need to locate the part that says href="Link to app.html" and replace the Link to app.html with the link to your character app. One thing though is to always remember to leave the quotation marks or else it won't work.

Kaira
Ninjutsu10Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


As for values it's going to be a little bit trickier since everything is pretty much all clumped together. The trick is is to locate the number on the right side of the category that you want to change. Let's change ninjutsu!

Let's look for this line of code:
Code:
<tr><td><b>Ninjutsu</b></td><td>10</td><td><b>Fortitude</b></td><td>10</td></tr>

Then we only want the part with Ninjutsu and 10. So we'll only look at this:
Code:
<td><b>Ninjutsu</b></td><td>10</td>

Then we'll change the 10 to 20, so in the end we get this:

Kaira
Ninjutsu20Fortitude10
Iryō10Vitality10
Fūinjutsu10Agility10
Kugutsu10Chakra Flame10
Taijutsu10Evasion10
Genjutsu10Stealth10
Bukijutsu10Ninja Art10


Tips, Tricks, and Warnings

    Don't divide the code. If you divide the code (by this I mean hitting your enter key to "simplify" it, you get something that looks really out of proportion.

    Ex:

    You Don't Want This to Happen:
     

    Experiment! From there you can make your own things if you want!

    Don't be afraid to mess up! Mistakes are the key to learning!

    Make your own backgrounds and have fun with it.

_________________



[16:05:55] Minor Threat x : INGOO OWNS KAIRA'S TALENT AND SKILLS
[16:06:01] Minor Threat x : MUAHAH
[16:06:37] @ Oturan : Kaira Ingoo Terms and Conditions apply, result may vary (but they will be freakin awesome no matter what)

Back to top Go down
Sponsored content




PostSubject: Re: Stat Sheet Coding Guide   

Back to top Go down
 
Stat Sheet Coding Guide
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Training guide
» A little layout guide for those who want to give making one a try
» Coding Shop!
» OBS's Guide to the Underdark (Updated: 2/5/12)
» Guide: Creation Templates

Permissions in this forum:You cannot reply to topics in this forum
 :: Dumb Archives-
Jump to: