Zoë's V5 Coding Tutorials

« Prev
1
Next »

[ retro gm ] angel lí ✨ Advertiser 8,162 POSTS Pronouns: she/her last seen May 1, 2024 3:18:47 GMT -5 bloomtodeath	Zoë's V5 Coding Tutorials Jan 4, 2014 3:56:08 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by [ retro gm ] angel lí ✨ on Jan 4, 2014 3:56:08 GMT -5 table of contents. BASIC V5 CODES BASIC TABLE (WITH SCROLLBOX) CODE
	Last Edit: Jan 12, 2014 0:19:39 GMT -5 by [ retro gm ] angel lí ✨ “and men said that the blood of the stars flowed in her veins.”

[ retro gm ] angel lí ✨
Advertiser

8,162 POSTS

Pronouns: she/her
last seen May 1, 2024 3:18:47 GMT -5

bloomtodeath

Zoë's V5 Coding Tutorials Jan 4, 2014 4:32:05 GMT -5

Quote

Post by [ retro gm ] angel lí ✨ on Jan 4, 2014 4:32:05 GMT -5

basic codes.

Hello and welcome to my first V5 Tutorial. This one will be about the basic V5 codes and conventions, and their similarities/differences from V4. Let's start with the basics:

div vs. atrb codes.

The key difference between V4 and V5 is that V5 uses wrap tags called 'div'. 'div' is pretty much V5's version of 'atrb' (aka attribute), with some parallels to CSS coding. If you know a little about CSS coding this might be easier than you thought, but if not, don't fret! It's quite similar to V4 and even if you've never made a template before in your life I'll take you through basic template making in future posts.

So, 'div' replaces 'atrb'. In V4, you may have started a table by coding in 'atrb=style' - but in V5, we start with 'div'. A simple example of this is the alignment codes.

alignment codes.

Here are some examples to show you:

To move your text to the left
[div align="left"]text here[/div]
To move your text to the right
[div align="right"]text here[/div]
To center your text
[div align="center"]text here[/div]

These three codes can be found in the posting buttons when you go to reply to a thread. In V4, these were coded into the atrb style tags, but now they've become divs.

font codes.

Now, let's move on to colours! In V4 you'd go [*color=ee2222]text here![/color*] (without the asterixes), but in V5 you type in:

[font color="ee2222"]text here![/font]

So you basically just add 'font' to the start and end it with [/*font] instead of [/color*].

To change fonts, use this code:

[font face="font name here"]your text[/font]

To change the size of your text, do the same as you did with the color code and add 'font' to the start of the color wrap tag and end it with [/*font].

[font size="number"]text[/font]

Codes such as bold, italics, etc. have all stayed the same and I believe have been translated into V5 coding by themselves in previous posts.

image codes.

Again, adding an image is really simple because the button is right there for you in the reply to thread function. In V4, the code would read [*img]link here[/*img], but in V5, the code is simply one wrap tag.

[img alt=" " src="http://i356.photobucket.com/albums/oo1/purplepenguin/icons3/stock20_pikkupenguin.jpg" style="max-width:100%;"]

So click on that icon and insert the direct link into where it says 'Image URL' - and now we've got a nice little icon like so with that one image wrap tag:

If you'd like to change the size of your image, grab that link again and find 'max-width', it's just before the tag closes. Have a change around with the precentage - to shrink it to half it's size, you would chance 100% to 50%, like so:

[img alt=" " src="http://i356.photobucket.com/albums/oo1/purplepenguin/icons3/stock20_pikkupenguin.jpg" style="max-width:50%;"]

So, as you can see, the basics are really quite simple - in the next post I'll move on to learning how to code a basic table and image template. If you have any questions please feel free to PM me or catch me on the cbox/skype. Hope this has helped!

NEXT: BASIC TABLE CODING

Last Edit: Jan 4, 2014 4:37:09 GMT -5 by [ retro gm ] angel lí ✨

“and men said that the blood of the stars flowed in her veins.”

[ retro gm ] angel lí ✨
Advertiser

8,162 POSTS

Pronouns: she/her
last seen May 1, 2024 3:18:47 GMT -5

bloomtodeath

Zoë's V5 Coding Tutorials Jan 12, 2014 0:12:56 GMT -5

Quote

Post by [ retro gm ] angel lí ✨ on Jan 12, 2014 0:12:56 GMT -5

basic table.

Now I'm going to teach you all how to code a basic V5 table with a scrollbox.

First, we'll start off by centering our post using the center button

[div align="center"][/div]

As I mentioned previously, tables are a lot simpler to code in V5 due to it all being condensed into one 'div' bracket, with each element such as background colour or width separated by the ';' semicolon key. So, we'll add that in to our code like so:

[div align="center"][div style=""]text here[/div][/div]

So now we've got the skeleton of our table sorted. Let's add in a background color in-between the two " symbols - all the div attributes go in these little quote marks so make sure that everything's sandwiched inbetween them:

[div align="center"][div style="background-color:#CD0000;"]text here[/div][/div]

If you want to change the background color from red, type in the HEX code (eg. #ffffff).

Now let's get our table dimensions in order. I'm going to make this a medium-sized table, so I'll make it 450px wide by 300px high. (Again, if you want to change the size, just change the dimension NUMBERS. Make sure you keep everything else the same or the code will break.) I'll add in those codes like so:

[div align="center"][div style="background-color:#CD0000;width:450px;height:300px;"]text here[/div][/div]

To make your textbox have a scrollbar, you then add in the 'overflow:auto' element to the end of your bracket, like so:

[div align="center"][div style="background-color:#CD0000;width:450px;height:300px;overflow:auto"]text here[/div][/div]

Note: the scrollbar will only work if you have enough text in your post to overflow 300px (the height of your table.) I tend to use Lorem Ipsum as some stock text for my template testing, so we'll throw that in to this table like so:

[div align="center"][div style="background-color:#CD0000;width:450px;height:300px;overflow:auto"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.[/div][/div]

Now, let's click 'Preview' - you'll begin to see the table come together. And look, you've even got a nifty little scrollbar!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Now we'll just change our text to make it pretty (scroll up to the previous post to learn how to change font attributes) and we're good to go!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

And there you have it! A nifty little posting table with a scrollbox for you to use in V5. If you have any questions please PM me or catch me on Skype/the Cbox, and I hope this helped you guys!

NEXT: HOVER TABLES

Last Edit: Jan 12, 2014 0:16:27 GMT -5 by [ retro gm ] angel lí ✨

“and men said that the blood of the stars flowed in her veins.”