Makkun Sensei

HOW TO CUSTOMIZE TABULAS~!

by: Sensei Makkun (Teacher Makkun)

Hiya all~! Welcome to my tutorial about TABULAS TEMPLATING. You're very lucky, because aside from the fact that I'm a basic html user, I also liked things plain and simple, so you shouldn't worry. I'll make sure everything is easy to understand. But if you get confused, well you can e-mail me for more information. *Waves hand*. Enough with the useless things. You're here to learn, not to .... *sigh*. I just can't stop talking. LOLz. ^__^ sorry.

So~! There are only three things that you should learn. If you get the hand of each one of them, you're going to be OK. ^__^ After that it's up to your creativity, patience and ability to apply what you've learned to suit more personal needs.

THE THREE THINGS

Templates
Entry Formats
CSS

Basically, you should at least know basic html. If you don't, well..it's gonna take a much longer time. But hey, everyone started with zero. Okay, for firs-time html users, please browse the pages in "My Favorites". They have tutorials for basic html. Those who already know, well yay~! Proceed McDuff!

* Log-in to your Tabulas Account. Proceed to: STYLES ---> TEMPLATING ---> BUILD YOUR OWN TEMPLATE. Make sure you have a title for it. Anything's fine, really. (My current title is: Nymph).

PRE-TEMPLATING

You need to have a layout. Seen my site? I did the last three layouts. Back then I could only do a puff with Frontpage, so I opted for those cool ones distributed free by "layout designers". Yes, there are soooo many of them with a lot of pretty layouts downloadable for free. If you want to try some, well, you can visit the following:

Found one you like? Downloaded it already? Unzipped it? Okay, open the folder. You should see the index.html. Open it with your favorite html editor (I recommend Notepad) How? Double-click the index.html file, right click then choose "view source". You're now ready to edit it.

TEMPLATING

Once you have a layout for your site, you are ready to paste the "tabulas codes" which will make everything else work.

I will provide a sample where you'll see for yourself what I meant with pasting the tabulas codes.

There are two important codes which should never, never be gone.

The Navbar:

Of course, you have seen this already. ^___^ But what you might not have seen is the code for the navbar:

You can paste it anywhere you like. In my site, I usually put it above the contents. In that case, the codes would be like:

To generate something like this:

LOLz. This is not true. The important thing is, you get the picture where the navbar and the content is. ^__^

So, these are the two things that we need to paste. But the question is where?

Oops, a screencap from a random layout I found @ Crystal Kiss. This is WHERE your code for content should be pasted. But where exactly you ask?

Most downloadable layouts have the "About This Layout" introduction where the artist boasts how he liked the colors he used, where he got the images, brushes and other stuff. THAT'S EXACTLY YOUR "HINT" - the place where the code should be placed. Now, here's the equivalent HTML screencap of the above image. (When opened with Notepad).

Take note of the two things encircled:

<div style="postion: absolute; width:540; top:515; left:215;"> and

</div>

BETWEEN THESE CODES, is EXACTLY where you should paste  to make it effective for tabulas. Applying that, we'll have:

</div>

Adding , we'll have:

</div>

That's about it. Notice the artist made it convenient. She/He put  and  so that you'll know where you'll paste the tabulas codes. But before you paste them, you should delete the entire contents until all that's left are the divs, as indicated above. Like so:

BEFORE:

<div style="position:absolute; width:540; top:515; left:215;">  <p class="head">About This Layout</p> The title of this layout is called <b>Morning Flare</b> featuring a really cool multi-colored <b>CG Art</b> image from a Japanese site called <b>Little Bit</b>. Anyway, this layout is coded with tables, div, and CSS. This layout can only be viewed by the resolution of 800 X 600 or above. Please don't remove the credits and enjoy!<br><br> ♥ ♥ ♥ Kim <p class="head">How To Use This Layout</p> <ol> <li>To unzip the layouts, remember to read my rules. <li>Upload all of the unzipped files into your site. <li>Edit <a href="index.html">index.html</a> to modify your navigations and edit your contents from there. <li>Got any questions or problems? Post them at my <a href="http://kim.layout.no/forum" target="_blank">Message Board</a>. </ol> <p class="head">Copyrights & Credits</p> If you are planning to use my layout, please abide my conditions. <ol> <li>Do not remove the link back to my site. <li>Do not modify the HTML codes. <li>Do not modify the CSS codes. </ol> Image © <a href="http://www5a.biglobe.ne.jp/%7Emish/" target="_blank">Little Bit</a><br> <p class="head">Layout Designed By <a href="http://kim.wishingstars.net" target="_blank">Crystal Kiss</a></p>  </div>

Try it for yourself~! ^^ Delete everything else except the divs and paste  and 

AFTER:

Now, this is a tabulas template. ^_____^ ALWAYS make sure the two <divs> are present. Oh, and click "ENABLE" so this template is applied immediately.

*After this, you can now edit the "LINKS" where you put certain websites that you like, attach images, and of course, the NAVIGATION for tabulas. Example:

<a href="/~makkun">home</a><br>
<a href="/~makkun/profile.html">profile</a><br>

<a href="/~makkun/content.html">content</a><br>
<a href="/~makkun/gallery.html">gallery</a><br>
<a href="/~makkun/friends.html">friends</a><br>

<a href="/~makkun/friendof.html">friendof</a><br>
<a href="/~makkun/favorites.html">favorites</a><br>
<a href="/~makkun/links.html">links</a><br>
<a href="/~makkun/archives.html">archives</a><br><br>

Just replace this with your username. ^__^

THE PROBLEM >___<

Okay, so you've done the necessary things. BUT remember, there are images attached with every layout. And you have to find a place where to upload them, because if not, the images will NOT load to your Tabulas. So where? I recommend you the following sites:

Geocities

Graffiti

In Geocities, you should rename all file extensions to .txt (ex: makkun.jpg --> makkun.txt, makkun.css --> makkun.css) In Graffiti, you don't have any problem, only that the address is waaaaay too long. ^_^

After renaming all the images and files that constitute the layout, you'll have to edit them again with notepad, replacing all the files with their designated URLs. (Ex: "makkun.jpg" >> "http://www.geocities.com/makkun.txt"). Apply this, plus what I taught you with the navbar and contents, you now have a full-edited layout ready to use. Paste it as your new template and choose it as your default. WHERE?

YEHEY~! You're done with the FIRST THING. Remember we have three right? ^__^ But the remaining two are much easier. ^__^ Because I'm nice, and you're reading all the way, I'm gonna give you my entryformat for FREE. ^____^

ENTRY FORMAT

* Proceed to: STYLES ---> ENTRYFORMAT

Actually, there is nothing wrong with your default entryformat. But sometimes, the position of the Usericon is affecting the div alignments, so rearranging them, we can have an entryformat like so:

Just copy and paste it when creating a new entryformat. You can alter the font color and size as much as you like, like I said..basic only. Everything depends on your creativity after this. ^_^

If you want a divider other than the - - - - - - - - - - -, then you can attach a certain picture, generating an entryformat like so:

The one in bold is the code for the image you want to attach as a divider. Take note I used geocities and renamed the .jpg file to .txt. Renaming files to .txt will make those files appear, or loaded to your site. Only in geocities though. ^__^

After that, you only need to click "ENABLE ENTRYFORMAT". Make sure you have a title for this entryformat as well. ^___^

CSS

Every free layout comes with a .css file. Well, not all of them of course, but most of the time they do. The reason why I included it with our lesson is that there are certain styles that you should add with the existing ones. We have two: one for your commenting options, and one for the descriptions and texts found in the other pages of your Tabulas. Like in Gallery and Content sections.

Another freebie~! Paste it to your .css file: (Edit the colors and fonts that will suit your layout/preference).

input, textarea, option {
font-family: Tahoma,;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
border: #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px
}

table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: center;
}

.title{
font-family: Tahoma;
font-size: 11px;
font-weight : bold;
border-bottom : 1px dotted Black;
}

So, that's it~! Easy, correct? ^__^ You can save this tutorial for offline browsing to serve as a guide. ^_^ if you have more questions, just drop me a message and I'll get back to you as soon as possible. ^__^ I hope I made everything simple. Always a pleasure to help Tabulas users. =) Goodluck!