Posted by -STUCK- Unofficial Lioden HTML Forum Help Thread

Queen Halloween (#23249)

Angelic
View Forum Posts


Posted on
2014-05-03 10:43:34
the unofficial HTML help thread
┌──────────────────────────────────────────────────┐
Welcome to the revamped Unofficial HTML Help Thread!
└──────────────────────────────────────────────────┘

Feel free to practice the HTML down in the comments below. However, please remember to remove only the asterics (*'s) from the code, otherwise it won't work. Thank you!

Table of Content

↣ basic codes ↢
bold, italic, underline, strike, and blockquotes

↣ changing fonts ↢
size, color, and headers

↣ images and clickables ↢
posting images, changing image size, creating clickable links, creating clickable images

↣ alignment ↢
center, left, and right align

↣ combining codes ↢
how to properly order code to achieve certain looks

↣ contributors and honorable mentions ↢

↣ basic codes ↢
┌──────────────────────────────────────────────────┐
notice:
please remember to remove asterics (*'s) from the code
└──────────────────────────────────────────────────┘


BOLD
<*b>BOLD<*/b>

ITALIC
<*i>ITALIC<*/i>

UNDERLINE
<*U>UNDERLINE<*/u>

STRIKE
<*s>STRIKE<*/s>

BLOCK QUOTE

<*blockquote>BLOCK QUOTE<*/blockquote>

When Combining:
when combining these particular set of codes, it doesn't matter much what order you put the codes in, so long as you have the beginning and the end of the code between the only words you want changed. You can have all of them at once, if you really want. But you need to remember to close your code so your code doesn't stretch to words that you don't want them on.

<*b><*u><*i><*s>this is the code I used for the above sentences.<*/s><*/i><*/u><*/b>

Notice how I closed the code with the same codes I opened with. You have to apply every ending to every code you open. A <*/b> won't close off a <*i> code, for example.

↣ changing fonts ↢
┌──────────────────────────────────────────────────┐
notice:
please remember to remove asterics (*'s) from the code
└──────────────────────────────────────────────────┘


Size
There are 7 sizes of font, as showcased below.
With this code I used the placer "1", however, to change the size of the font, replace the 1 with any number between 1 and 7.

<*font size=1>Size 1<*/font>

Size 1 Size 2 Size 3Size 4 Size 5 Size 6 Size 7


Color
You can also change the color of your font! However, you will need a hexcode, which is a six-digit number assigned to a certain color. I put a few basic ones down below for you, but I would also recommend using coolors.co or color-hex.com to find a certain hexcode that won't assault your readers eyes. 10/10 would recommend NOT picking a vibrant color.

<*font color=#hexcode>your text will go here.<*/font>

#84C0C6
#8F3985
#25283D
#607744
#B4656F

Headers
there are also several sizes of headers, as evidenced below.
with this code I again used "1" as an example, but if you want to change it, change it with a digit between 1 and 3.


<*h1>header 1<*/h1>

Header Size 1

Header Size 2

Header Size 3



notice: you cannot change the color of headers; but you CAN change the size and color of font if you would prefer using those as headers.

When Combining these Codes

You probably noticed that both the size and color modifiers end in <*/font>, but the same rule of openers and closers apply here. If you change both the size and color of a certain stretch of text, you must end with two <*/font>s, otherwise your size or color (whichever you placed second in the line) will continue to change the rest of your post, and ruin the rest of your HTML.

this is what it's like to change both size and color.

<*font size=4><*font color=#B4656F>this is what it's like to change both size and color.<*/font><*/font>

You cannot change the color of h1 codes.


↣ images and clickables ↢
┌──────────────────────────────────────────────────┐
notice:
please remember to remove asterics (*'s) from the code
└──────────────────────────────────────────────────┘


Posting Images
Before you post an image, you first have to have an image URL. You can only get these when an image is posted on an image hosting site (my favorite being Imgur - it's free and ad-free), you can't get an image URL directly from your computer. Once you host the image, you right-click and find the pop-up "Copy Image URL" or "Copy Image Address". Another nice thing about Imgur is that it will also give you the image url once you upload it.

Rhpo0NJ.png
(click and drag image into a new tab to enlarge it)

Note: all image urls end in .png, .jpeg, or .gif ; if your URL doesnt, then it's not the corrent URL.

Once you have your image url, enter it in the below code.

<*img url="URL">


Changing Image Size

You might have noticed that on some threads, people have images that are WAAAAY too big to fit comfortably. To six this problem, you can easily edit the code to size them down without loosing too much resolution. I don't put my images above 500 (the size of the above image), sometimes 400 or 450 when I want my threads to be organized. The code below I set at 500, so your images won't overextend your threads.

<*image url="URL" width=500>


Creating Clickable Links

Clickable links are also, thankfully, really easy. HOWEVER, I've noticed lately that the code changes slightly depending on what browser you use. Please check all of the below codes to see which one correctly posts with your browser, and let me know so I can properly label them.

In order to have a clickable link, you need the page URL you want the link to direct to. The page url can be found at the top of the screen.

v3oOPlO.png"

Once you have the page URL, you input it in one of the below codes.
Check out this rad Clan!

ver1:
<*a href="URL">These are the words that will be Clickable<*/a>

ver2:
<*a href=URL>These are the words that will be Clickable<*/a>

ver3:
<*a href=URL">These are the words that will be Clickable<*/a>



Creating Clickable Images

yoooo this is where we combine our above codes :) I will be using the image size modifer code, but don't think that you have to. Because of the iffy browser based page url codes, I will be posting all three versions. Please feel free to test them out here so you know which code works properly for you. You can see the "final" version above the codes, a photo and link to my side stud.

urrKkG0.png"

ver1:
<*a href="URL"><*img src="URL" width=400><*/a>

ver2:
<*a href=URL><*img src="URL" width=400><*/a>

ver3:
<*a href=URL"><*img src="URL" width=400><*/a>


↣ alignment ↢
┌──────────────────────────────────────────────────┐
notice:
please remember to remove asterics (*'s) from the code
└──────────────────────────────────────────────────┘


Aligning Your Posts

You can "Center" (like this post!), "Right", and "Left" align all of your posts. All posts are naturally left aligned, so you don't really need the code, but it's an option anyway. Be sure you have everything you want aligned before the end code - <*p>! In the below code, simply replace center with right or left if you want to change the alignment.

<*p style="text-align:center;">TEXT<*/p>

Combining Code
If you want to align your entire post, make sure you have THIS code in the very beginning. You don't even have to add a end for this code (<*/p>) if you intend on having the entire thread aligned.

↣ combining codes ↢
┌──────────────────────────────────────────────────┐
notice:
please remember to remove asterics (*'s) from the code
└──────────────────────────────────────────────────┘


Combining Codes:


The most important thing about combining your code is remembering to add an ending to all of your codes (with an exception to the alignment code, if you intend on having your entire thread aligned a certain way). The "preview" button is going to be your best friend - if it doesn't show up correctly in your preview, it isn't going to show up correctly in your thread. Double, triple, and quadruple check your codes - including your links, just to be sure they haven't broken.




↣ contributors and honorable mentions ↢
no annoying notice, yay! :D

Contributors
!! awesome people who have helped out on this thread !!

(#22988)
for reminding me to add strike to the main thread, and answering questions to confused users!

(#2230)
for answering questions relating to CSS and generally being awesome!

(#15480)
for answering questions and supplying helpful code additions!

(#7498)
for supplying and teaching me the blockquote code!

(#36534)
for adding helpful code additions!


Honorable Mentions
!! awesome people who have awesome threads and awesome guides for you to check out !!

HTML Guides

Kay's HTML Guide
Aslan's HTML Guide
Dad's AWESOME HTML and CSS Guide!

Table Guides
Tserin's Table Guide!
I used this guide to update this thread! <3

Have other guides that deserve an honorable mention! Post them below so I can add them :)




Edited on 31/10/18 @ 22:35:16 by Queen Halloween (#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?


🌳 Dad 🌳 (#22988)


View Forum Posts


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

<*s>TEXT<*/s>


Queen Halloween (#23249)

Angelic
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>



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!


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?


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?


🌳 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!



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?


Queen Halloween (#23249)

Angelic
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



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.


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.



ckelsy319 (#26745)

Deathlord of the Jungle
View Forum Posts


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


✷ 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.


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.


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

Vicious
View Forum Posts


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