Posted by -STUCK- Unofficial Lioden HTML Forum Help Thread

EasyPlesi (#23249)

King of the Jungle
View Forum Posts


Posted on
2014-05-03 10:43:34

the unofficial HTML help thread

feel free to practice your HTML in the comments below!
updated: 1/19/2024

table of contents

➜ the basics
code opening + closing: bold, italic, underline, strike, blockquote, spoiler
➜ fonts + headers
changing the color, type, alignment and size of your font
➜ images
image hosting, posting, resizing, and more!
➜ links
making clickable words + images
➜ combining codes
using what you learned in the steps above.

the basics

notice: remove the asterics * from the codes before use.

➜ code opening and closing

before we begin, you need to understand the most basic rule of coding: each code, in order to work properly, must have an opening and a closing. The opener defines where your code begins, and the closer defines where you want your code to end. Forgetting one or the other can mess with the rest of your code: forgetting to close a link, for example, will turn the rest of your post into a link. Openers are typically defined with a <* > symbol, where closers are typically defined with a <*/> . There are some cases where you don't need to worry about closing your codes, but it is generally good practice to remember to close it.

➜ bold

This is a normal sentence. This is a normal sentence, but in BOLD.
code: <*b>your bold statement goes here.<*/b>

➜ italics

This is a normal sentence. This is a normal sentence, but ITALIC.
code: <*i>your italic statement goes here.<*/i>

➜ underline

This is a normal sentence. This is a normal sentence, but UNDERLINED.
code: <*u>your underlined statement goes here.<*/u>

➜ strike

This is a normal sentence. This is a normal sentence, but STRIKED OUT.
code: <*s>your striked out statement goes here.<*/s>

➜ blockquote

This is a normal sentence.

note: blockquotes will break in tables like the one its in. the only fix ive found is to create a new table inside of the blockquote. If you're not putting a spoiler into a box code, you do not have to worry about this.
code: <*blockquote>your quoted statement goes here.<*/blockquote>

➜ spoiler

This is a normal sentence.
note: spoilers will break in tables like the one its in. the only fix ive found is to create a new table inside of the spoiler, which will reveal a new box when clicked. If you're not putting a spoiler into a box code, you do not have to worry about this.

code: [*spoiler]your spoiled statement goes here.[*/spoiler]

Q: can I change what the spoiler button looks like?
A: not on forums :(

fonts + headers

notice: remove the asterics * from the codes before use.
- = - = -


➜ headers

about headers: there is nothing you can do to style headers in forum posts. I 1000% reccomend you play with font sizes instead if you want to get fancy. The only way to style headers (changing their color, font, size, etc.,) would be through css which is extremely limited in forum posts. Below are the example sizes and styles of each.
code(s): <*h1>header one<*/h1> , <*h2>header two<*/h2> , <*h3>header three<*/h3>

➜ font color
There are a few ways to change color! Below are two different codes you can use to change the color of your text. Please be aware of readability when choosing font color - I bet you had a pretty hard time reading all of the words in the first sentence of this section. Could you imagine trying to read the entire post like that?
code one: <*font color=red/orange/yellow/etc>Your sentence goes here.<*/font>
code two: <*font color=#HEXCODE>Your sentence goes here.<*/font>

➜ font size

Font size will differ from 1 to 7, with 1 being as small as can be, and 7 being larger than most headings.
1 2 3 4 5 6 7
code: <*font size=0>Change the 0 from any number between 1 to 7.<*/font>

➜ changing fonts

Changing your font can sometimes be its own monster, and requires a different sort of code, which I refer to as "p styles" for. obvious reasons. These style entire paragraphs, and can be edited in various ways which we will touch more upon beneath "combining codes".

Lets change your font.
code: <*p style="text-align:center;font-family:Constantia;">"Constantia" can be changed to a set of various different fonts to give it a unique style. Be warned, not all fonts will work here. However, fonts like Georgia, Times New Roman, and Comic Sans can all be used on Lioden.<*/p>

This is another option, and requires less work - although, only comes out looking like this. It's called Typewriter Text.

code: <*tt>Would you believe I've been here 10 years and had no idea this existed?<*/tt>

images

notice: remove the asterics * from the codes before use.
- = - = -


➜ hosting

In order to post images, they must be "hosted" somewhere - what this means, is that images saved to a device (like in your pc image folder) must be posted to a hosting site like imgur so you can access the Image URL. I'll be using Imgur in my examples of how to find your image url. The easiest way is to right-click on the hosted image, and scroll down to "copy image address". However, imgur will also give you the "direct link" without the necessity of right clicking if you don't have the capability for whatever reason. If that doesn't work, you can also drag the image into a new tab, and copy the link in the searchbar.



➜ posting

Once you have your Image URL/Image Address/Direct Link (all names for the same thing), you'll be able to post it using the code below. There are two different options because I've noticed some browsers really hate quotation marks. Replace "URL" with the url you got from the above step.

code: <*img src="URL"> / <*img src=URL>
another code: <*img src="URL"<*/img>

➜ resizing

You've got your image, but its too big/too small for your forum! What now? Don't worry about using a program to resize the image, the code above is more than capable of doing it for you. There are two different metrics you can use to change an image's size: pixels, and percentages. Pixels will resize an image for you down to the specific pixel, where percentages will resize an image for you based upon the container it fits within. I use "width" in the code, leaving height to automatically resize itself, but you can swap width out for height to get the same effect.

code (pixels): <*img src="URL" width=500px> / <*img src=URL width=500px>
code(percentages): <*img src="URL" width=85%> / <*img src=URL width=85%>

➜ Image Titles

You know how sometimes when you hover over an image and you get a little blurb explaining what it is? You can do that too :) Hover over the image below if you're unsure what I mean.



code: <*img src="URL" title="hello world!"> / <*img src=URL title="hello world!">

links + clickables

notice: remove the asterics * from the codes before use.
- = - = -

➜ Links

this is another one of those annoying ones that rely on what browser you have - some just hate quotation marks. You will have to see which, or if both, work for you. In order to get a clickable link, you must first have a destination. Once you have a destination, copy the address from the top of the page. This is called a page url, or page address.


example: What do you want your link to say?
code: <*a href="PAGEURL">What do you want your link to say?<*/a> / <*a href=PAGEURL>What do you want your link to say?<*/a>

➜ Clickable Images

Remember in the last step where we learned how to grab an image url and a page url? Time to put your knowledge to the test. You can also add titles and/or resize your images.



code: <*a href="PAGEURL"><*img src="IMAGEURL"><*/a> OR <*a href=PAGEURL><*img src=IMAGEURL><*/a>

combining codes

notice: remove the asterics * from the codes before use.
- = - = -

➜ the Basics

You can combine a lot of the above codes, so long as you remember the proper code openings and closings. There are a few limitations like changing the colors of links, headers, and buttons, but this thread will give you a good start into the html of Lioden.

➜ p style crash courses

Remember how I said back in fonts that p style codes were unique? Well, thats because they have the capability of changing multiple factors in one string of code. (The box that this tutorial is in is a mass connection of p style codes!) I'm not going to go too far into depth, but you can create a 'string' of code by combining a lot of the codes you learned above into one string to style an entire thread, paragraph, or section. The main difference is that instead of the codes being separate entities, they'll be in one line separated by ;s.

some things you can change in one p style code
font, font color, font size, font weight, alignment, background color, text transform, and more.



example code:
<*p style="text-align:center;font-family:comic sans MS;font-size:15px;color: purple;text-transform:uppercase;">I can change the alignment, size, color and font all in one line of code. Have fun, coders!<*/p>




Hrt Icon 57 players like this post! Like?

Edited on 19/01/24 @ 19:28:41 by EasyPlesi (#23249)

Juminakata (River) (#6903)

Toxic
View Forum Posts


Posted on
2014-05-03 17:33:26
this is great, thank you! there is one already, but this one is more organized!

One question; how to you do the strike out on LD?



Hrt Icon 0 players like this post! Like?

🌳 Dad 🌳 (#22988)


View Forum Posts


Posted on
2014-05-03 17:35:09
strikeout

<*s>TEXT<*/s>



Hrt Icon 0 players like this post! Like?

EasyPlesi (#23249)

King of the Jungle
View Forum Posts


Posted on
2014-05-03 17:35:48
Oh right! Dur! Thank you for reminding me, I'll add that.

This is crossed out text
<*strike>This text isn't crossed out<*/*strike>



Hrt Icon 0 players like this post! Like?


Edited on 04/05/14 by Queen Halloween [TNS] (#23249)

Juminakata (River) (#6903)

Toxic
View Forum Posts


Posted on
2014-05-03 17:43:39
ahhh... Thanks guys! Strike out is one thing I couldn't find anywhere, so that helps a ton!



Hrt Icon 0 players like this post! Like?

OspreyCommando (#30345)

Brilliant
View Forum Posts


Posted on
2014-05-03 23:53:47
Every time I try to add a pic to my den it doesn't work. Like the coding doesn't even appear instead of the pic. It doesn't save when I click save. Any ideas?



Hrt Icon 0 players like this post! Like?

Echo (#15480)

Sinister
View Forum Posts


Posted on
2014-05-03 23:55:08
Show me what you're putting, DarkPaw. Take a screenshot, maybe?



Hrt Icon 0 players like this post! Like?

🌳 Dad 🌳 (#22988)


View Forum Posts


Posted on
2014-05-04 02:11:16
If you're using,
<*img src="IMAGE URL" width=510*>

You have to remove the *'s for the code to work.

You can also try this code,
<*img src*="URL"*/*>

Remember to remove the *'s!



Hrt Icon 0 players like this post! Like?


Edited on 04/05/14 by Sasha The She-Wolf {L.A.W.S} (#22988)

RecklesslySpellbound (#15343)

King of the Jungle
View Forum Posts


Posted on
2014-06-04 09:57:07
Wow this is super handy, thank you so much!

My only other question would be how do you make a clickable word?

For example when people tag their stud using their link but only typing their name?

Or is that not a HTML?



Hrt Icon 0 players like this post! Like?

EasyPlesi (#23249)

King of the Jungle
View Forum Posts


Posted on
2014-06-04 09:59:38
Targaryen -
<*a href="LINK">What you want your text to say<*/*a>

It's under "Font color, Highlighting, Links, and Fonts" :) Remember to remove the *s



Hrt Icon 0 players like this post! Like?


Edited on 04/06/14 by Queen Halloween [TNS] (#23249)

RecklesslySpellbound (#15343)

King of the Jungle
View Forum Posts


Posted on
2014-06-04 10:00:52
OH! Derp. Sorry. My Bad!

Thanks again.

This is so helpful.



Hrt Icon 0 players like this post! Like?

Bastion (#11518)

Protector
View Forum Posts


Posted on
2014-06-18 01:27:03
Queen! You're such an html pro! xD

I have a question too, actually. I want to change the white LD default background on my den page to a more muted, easy-on-the-eyes brown color (#DEB887 or something similar). What is the coding I need to do that? Do I just make a really big table or...? the body bg html doesn't seem to be working.



Hrt Icon 0 players like this post! Like?

ckelsy319 (#26745)

Deathlord of the Jungle
View Forum Posts


Posted on
2014-06-18 01:35:19
bookmarking



Hrt Icon 0 players like this post! Like?

✷ Tserin (#2230)

Prophet
View Forum Posts


Posted on
2014-06-18 02:26:58
Bastion's Girl -- Changing the default Lioden background would require CSS, which is a bit different from HTML. You'd have to code it into a separate file, upload the file somewhere, and link to it to get it to work.



Hrt Icon 0 players like this post! Like?

Bastion (#11518)

Protector
View Forum Posts


Posted on
2014-06-18 05:32:12
Oh, I see. So do I just copy the page source from LD, use the hex code I want, then upload the file someplace? Or is it more complicated than that? I'm not really all that familiar with CSS.



Hrt Icon 0 players like this post! Like?

Arrl [LL]{PP}(COF) (#33792)

Vicious
View Forum Posts


Posted on
2014-06-18 05:39:40
Very helpful!



Hrt Icon 0 players like this post! Like?







Memory Used: 648.52 KB - Queries: 2 - Query Time: 0.00061 - Total Time: 0.00621s