[kokoro-cafe]

How to Create Your Own Walkthrough

Hi everyone!
I know making walkthroughs can be a pain so I've tried to make it easier on everybody with a post template and a WYSIWYG (what you see is what you get) text editor.  Unfortunately, not all of the functions show up with the text editor, but it's simple enough to understand once I go over basics. So lets begin!


Additional Resources:
More Tutorials

Menu:
Basics of BBCode
Toolbar
Customizing Template
Template Add-ons


Basics of BBCode

This is for those uber beginners that don't understand how BBcode works.

Spoiler  Hidden:

What is BBcode?
BBcodes are similar in function to HTML (a basic coding for websites), except the naming of the codes are up to me.  You will find that when typing a post there are already some BBcodes right under the 'Subject' line that are available for your use.  For example, the box with the letter 'B'.  This box is used to make words bold.  When clicked on it gives you:



To bold a word or sentence just encase that word in between, like this:

Code: [Select]

[b]Word/Sentence you want bold[/b]
Or you can just highlight the sentence you want to bold and press the 'B' button.

Important!
All BBcodes will have an opening tag and a closing tag.

For example:
Code: [Select]

Code: [Select]

[b] This is an opening tag
[/b] This is a closing tag[/pre]

The '/' signifies that it is a closing tag.  Your content typically goes in between these two tags (not always, there will be exceptions).  If your post shows up funky (i.e. - everything is still in code) more than likely you forgot one of the tags so go back over what you did.  The other reason usually is because you have the tag format wrong.

Back to list


Toolbar

Now that you understand a little more about BBCodes, lets introduce you to the important walkthrough tools on the WYSIWYG text editor.

What is a WYSIWYG text editor?

Spoiler  Hidden:

WYSIWYG text editor stands for What You See Is What You Get text editor. In other words, most of the bbcodes will be converted while you type in the editor.
Instead of seeing something like this while you are typing:

Code: [Select]

[b]Hello[/b]
You will see this:
Hello

It's much cleaner and less confusing for beginners.

Important!
Not all bbcodes will be converted so be careful, some buttons will still retain their bbcode form even in the WYSIWYG editor.

Walkthrough Tools You May Need

Spoiler  Hidden:

The highlighted buttons in the image below shows the tools you may need to create your own walkthrough:



This set of tools at the very end of the toolbar is the most important for your walkthrough:



Here is an overview of each button:

Button	Icon	BBCode	Description
Toggle WYSIWYG/BBCode		N/A	Toggles between the WYSIWYG editor and the standard BBCode text editor. The BBCode editor is for more advanced users and can help make minor adjustments to the walkthrough.
Maximize		N/A	This expands your text editor to the size of your internet browser window.
Code Box		code	Makes a box like this to display bbcodes without it converting the bbcodes:
Spoiler		spoiler	Creates a box like this that hides text: Spoiler  Hidden: Hiding text
Hide		hide	Everything within the Hide tags are hidden from guests.
Anchor		anchor	Anchor tags are used within a post. Anchor tags help the iurl tags (below) navigate to the right place in the post.
In-Post Linking		iurl	iurl tags are links that only work within your post. It directs users to a specific part of your post that is marked by the anchor tag (above).
Image		img	Image button help post images. When clicking on the image button it will ask for the image link. You can insert the appropriate height/width for the image or just select insert and then select and resize your image by hand. If you need a place to upload your image you can click on "Add image to post" right below the text editor on the left hand side.
Table		table,tr,td	Table button creates a table for the post. You can specify the number of rows and columns after clicking the button.
Link/Unlink		url	The left button is to create a link and the right button is to unlink the text.

Back to list


Customizing Template

Let's start customizing the walkthrough template.

How Do I Start a New Walkthrough?

Spoiler  Hidden:

• Go to the correct forum location you need to post your walkthrough.
• Click on 'New Topic.'
• This will open up a new template for you to customize.
• Congrats, now you can start your walkthrough!

What Does a Fresh Template Look Like?

Spoiler  Hidden:

You should now have a fresh template in front of you, like this:

How Do I Begin Customizing the Template?

Spoiler  Hidden:

Now you need to start filling fields in from the top:

[/u]

Field	Description
Subject	The title of the game you are posting a walkthrough for. If it is a main walkthrough, include [Walkthrough] in front of the title. If it is an event walkthrough, include [Event WT] in front of the title. Example: [Walkthrough] My Forged Wedding
Tags	Hashtags to describe the walkthrough and game. Helps others to find your walkthrough. Separate tags with a comma.

How Do I Customize the Main Body of the Template?

Spoiler  Hidden:

Now that the top is filled, we can begin on the actual walkthrough.

First, maximize your text editor window.

This should be the top half of your template:

• The yellow region on the image is the placeholder for where the image of the game belongs. You want to delete that broken image box and insert a new image using the image button on your toolbar.
• The red/pink region are places where you will need to customize the links that leads to other websites or other parts of the forum. You can change the link by highlighting the link you want to change and clicking on the unlink button then highlighting where that link was and click on the link button. Type in the address, click insert and you are done. If you would like to create your own link title, you just click the link button, insert the address and a description (your link title) then hit insert. Important! When unlinking then re-linking, make sure you don't make two links into one single link.
• Everything that are marked with {} and capital letters need to be changed. See what's written inside of the {} to help determine what to change it to. Just FYI, URL means web address.

• First off the red/pink parts in the image indicates the hide tags. All of your answers must be contained within the two hide tags (same goes for un-highlighted spoiler tags).
• All of the green regions indicate the anchor and iurl tags. You can differentiate them by checking to see if the tag says anchor or iurl. For the most part you won't need to touch these. If there are not enough iurl links and anchor tags for all of the routes, then you can create more by simply copying and pasting what is already on there with some minor adjustments. Details will be explained further down in the tutorial.
• Change the tan/brown regions to your walkthough route names. Important! Make sure the iurl alphabet corresponds to the anchor alphabet. Otherwise your links will be taking the users to the wrong part of the walkthrough. For example if your iurl=#a then your anchor=a.
• Again, anything with {} needs to be changed.
• Fill in your answers under where it says Chapter or you can customize the area as you see fit. Just make sure each route is contained within it's own spoiler tags.
• Hurray! You have created your first walkthrough! If you don't need to add additional routes you can click 'Save' to publish. If you are not ready to save yet, you can click 'Save to Drafts' and access it later from your user panel.

Template Add-ons

Adding Points Needed for Missions in Each Route (Voltage Event Walkthroughs)

Spoiler  Hidden:

[/color]
Copy the code below and paste it above :heart:Special Thanks To:

Code: [Select]

[code]
  Route 1  |  Route 2  |  Route 3  |

[/code]

Linkback: https://kokoro-cafe.net/index.php?topic=1853.0