Posted by Keina's HTML Guide

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2017-08-29 16:09:16

Hiya and welcome to my HTML Guide!
I hope to solve some questions I've gotten and seen recently!
If what I have posted here doesn't answer your question, feel free to post a reply here or shoot me a PM. :)

Please be sure to remove any *'s, replace #'s with actual numbers and replace any #HEXCODE with a color code when you're using this code!

Index:
- General HTML
- Lists
- Tables
- Div Boxes
- Misc. code




General HTML
Here I'll teach you the basics of HTML!


<*i*>Text<*/*i>
Italicized text example.

<*b*>Text<*/*b>
Bolded text example.

<*u*>Text<*/*u>
Underlined text example.

<*font size="#"*>Text<*/*font>
Font size 2 text example.
Remember, this can only go up to 7.

<*font color="#HEXCODE"*>Text<*/*font>
OR
<*font color="Color Type"*>Text<*/*font>
Font color text example.
Things that could go for Color Type is like: Red, Green, Blue, Yellow, etc.

<*span style="background-color:#HEXCODE;"*>Text<*/*span>
OR
<*span style="background-color:Color Type;"*>Text<*/*span>
Highlighted Text example.
Things that could go for Color Type is like: Red, Green, Blue, Yellow, etc.

<*center*>Text<*/*center>
OR
<*p style="text-align:center;"*>Text<*/*p>
This will center your text.

<*img src="URL"*>
Replace URL with a direct link to the image when you have it hosted on an external site.
Make sure it's a direct link to the image and not the page the image is hosted on.


<*a href="URL"*><*img src="URL"*><*/*a>
This will make the image clickable when a user clicks the image.
Be sure to replace URL with a direct link with the image you want to use and a URL to a site/webpage/topic/post/etc.


<*img src="URL"* title="TEXT"*>
This will give text when you hover over the image.
Remember that Internet Explorer uses the alt tag for some reason but the title tag works on all browsers BUT Internet Explorer.


<*a href="URL"*>Text<*/*a>
Clicky Link example.

<*strike*>Text<*/*strike>
Strike Out text example.

<*blockquote*>Text<*/*blockquote>
Block quote example.


<*hr*>
This will add a thin bar across the entire width of a post/div/den description/etc. Used generally as a divider between sections.

[*spoiler*]Text[*/*spoiler]
Text here. This will only appear after hitting the Toggle Spoiler button.


Headers

<*h1*>Text<*/*h1>

Header 1 text example.



<*h2*>Text<*/*h2>

Header 2 text example.



<*h3*>Text<*/*h3>

Header 3 text example




Lists

Lists are fairly simple to code.

Organized List

Organized List Name
<*ol*><*li*>List Item 1<*/*li>
<*li*>List Item 2<*/*li>
<*li*>List Item 3<*/*li><*/*ol>

Example Organized List
  1. Example 1

  2. Example 2

  3. Example 3


The <*ol*> tag stands for Organized List while the tags <*li*> stands for List Item. If you'd like more list items just add more <*li*> tags inside the <*/*ol> tag and label it. The numbers are added automatically in this case so no need to worry about putting numbers in.

Unorganized List

Unorganized List Name
<*ul*><*li*>List Item 1<*/*li>
<*li*>List Item 2<*/*li>
<*li*>List Item 3<*/*li><*/*ul>

Example Unorganized List
  • Item 1

  • Item 2

  • Item 3


The tag <*ul*> stands for Unorganized List in this case. Just like before, <*li*> stands for List Item. Just add more <*li*> tags inside the <*/*ul> tag if you'd like more than three items. Bullet points are added automatically so do not worry over that.


Tables
Tables tend to be VERY picky and tend to break easily if the code is incorrect. Feel free to PM me any questions when it comes to using tables or just leave a reply here.

<*table style="width:#px;border:#px solid;"*><*tr*><*th*>Header Text<*/*th><*/*tr><*tr*><*td*>Content Text<*/*td><*/*tr><*/*table>

Header Example
Content Example


You can have a Table with two headers and two contents. Just copy and paste the bolded code above to get it.
Remember to keep it inside the <*/*table> tag when you're copying and pasting the code.

Header 1 Example
Content 1 Example
Header 2 Example
Content 2 Example



Div Boxes
Due to the recent coding change that has happened, div boxes work a little differently now.

Scrolling Div Box with Background color
<*div style="width:#px;height:#px;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text<*/*div>

Regular Div Box
<*div style="width:#px;height:#px;"* class="scrollBox"*>Text<*/*div>

Side by Side Div Boxes
<*div style="width:800px;"*>
<*div style="width:#px;height:#px;float:left;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text1<*/*div><*div style="width:#px;height:#px;float:right;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text2<*/*div>
<*/*div>
It is vital that you do not add any spaces inbetween the two div boxes you type inside of or else they'll not be lined up correctly.

Expandable Div Box
This has to be done in CSS to accomplish this. If you do not have a CSS or are using a Premade CSS by another user, I cannot help you with this. Premade CSS users have to ask the one who made it to add it in for you so you can accomplish this.

CSS:
.name {
height: #px;
padding: #px;
overflow: hidden;
margin-bottom: 10px;
transition: height #s;
}

.name:hover {
height: #px;
overflow: auto;
}

HTML:
<*div style="width:#px;background:#HEXCODE;border:#px solid;"* class="name"*>Text<*/*div>

You can change out name for just about anything your heart desires as long as both the CSS and HTML names match.

Floating Corner Div Box
This also has to be done in CSS. Here's a Guide with it premade for anyone who wants it.

CSS(For floating left corner box):
.name {
position: fixed;
bottom: 0;
left: 0;
}

HTML:
<*div style="width:#px;height:#px;background:#HEXCODE;border:#px solid;"* class="name"*>Text<*/*div>

Same thing applies here with the Expandable Div Boxes, just change the name to whatever you'd like as long as they all match.


CSS

Rounded corners on Div Boxes:
.name {
border-radius: #px;
}

Custom Scroll Bars:
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #HEXCODE;
border-radius: #px;
}

::-webkit-scrollbar-thumb {
background: #HEXCODE;
border-radius: #px;
}

::-webkit-scrollbar-thumb:hover {
background: #HEXCODE;
border-radius: #px;
}

Please note that this will not display on Firefox and IE browsers, so any players who use those as their preferred browser will not be able to see the special scroll bars.


Misc. Code
Any code that doesn't fit into any of the categories will be here!

CSS Linking Code
<*link rel="stylesheet"* type="text/css"* href="URL"* */*>
Be sure to replace the URL with a direct link to your CSS.

<*body bgcolor="#HEXCODE"*>Text<*/*body>
This will change the color of the background.


I hope it solves your questions about HTML!
If you ever have any questions or want me to help you code something just feel free to send me a PM or just reply to this thread and I'll get to it when I can!




Hrt Icon 12 players like this post! Like?

Edited on 01/04/19 @ 12:51:47 by Keina (#50109)

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2018-11-14 15:43:57
Heyo Lexx!

Try doing this! I've bolded the changes:

body > div.container.main > div:nth-child(1) > nav > div.navbar-header > a > img {
content: url('https://i.imgur.com/S5sExtT.png') !important;
}


Not quite sure what you mean by it appearing as text in your den page since I didn't seem to see anything.
Care to take a screenshot of it at all by any chance?



Hrt Icon 0 players like this post! Like?

Timo (#53555)

Amazing
View Forum Posts


Posted on
2018-11-14 22:32:24
So, I've encountered a problem. The Centering text does not work? I don't know what to do.



Hrt Icon 0 players like this post! Like?


Edited on 14/11/18 @ 22:33:09 by Prussia (#53555)

Lexx (#156135)

Impeccable
View Forum Posts


Posted on
2018-11-15 11:25:34
Hm, nope, still doesn't work. It shows up as text
Its on the bottom, kinda hard to see lol



Hrt Icon 0 players like this post! Like?

Myriad (#76)


View Forum Posts


Posted on
2018-11-15 15:13:13
(@Keina I hope you don't mind me jumping in to answer since you're not online. I don't mean to step on your toes! <3)

@Lexx if it's showing up as text on your den page then it sounds like you might be putting the code directly into your den description, rather than in the css file?? It needs to be changed in the file itself of whatever css layout you're using (assuming that the original creator/seller allows edits to their layouts, of course).

@Prussia where are you putting the text that you want to center? You need to use the right one of the two options in the original post depending on where the text is. For instance in lions' bios the simple first one will work:

<center>text goes here</center>


But in forum posts you need the more complicated one:

<p style="text-align:center;">text goes here</p>



Hrt Icon 0 players like this post! Like?

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2018-11-15 21:01:37
No worries, Myriad! I appreciate it when others jump in to answer questions if I'm not around.



Hrt Icon 0 players like this post! Like?

Lexx (#156135)

Impeccable
View Forum Posts


Posted on
2018-11-16 04:56:06
Oh! Ofcourse, lol I'm dumb xD



Hrt Icon 0 players like this post! Like?

HeraldofHares (#111045)

Heavenly
View Forum Posts


Posted on
2019-03-25 20:47:48
thank you for aiding in creating my page :o



Hrt Icon 0 players like this post! Like?

Petrichor🍨4/5
Fuchsia mks (#161184)

Punk
View Forum Posts


Posted on
2020-10-28 19:27:56
Just testing this out lol

xOZIFKv




Hrt Icon 0 players like this post! Like?

Yolo (#223371)

Confused
View Forum Posts


Posted on
2021-06-21 06:58:51
I'm stuck with Floating Corner Div Box, i'm not sure where to put it, and the guide link isnt working, could i get some help?



Hrt Icon 0 players like this post! Like?

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2021-06-21 07:32:42
Hello Yolo!

The code I provided above should place a div box in the bottom left corner. I'll remove the guide link as I didn't notice that it no longer worked.

Floating corner div box:

.name {
position: fixed;
bottom: 0;
left: 0;
}

Just make sure to replace "name" with whatever you wish to call it.
I hope this helps!



Hrt Icon 0 players like this post! Like?

Yolo (#223371)

Confused
View Forum Posts


Posted on
2021-06-21 07:36:07
It didn't quite help, where do i put the Code, witch part of my css, at the end, begining?



Hrt Icon 0 players like this post! Like?

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2021-06-21 07:46:57
I usually prefer placing it near other classes that you plan on using for other div boxes to make finding it a bit easier. But, it could be placed at the bottom and work fine there as well if you prefer that.



Hrt Icon 0 players like this post! Like?

Yolo (#223371)

Confused
View Forum Posts


Posted on
2021-09-29 11:04:37
Hello! i'm.. back..like.. from.. a long time.

i couldn't really get what you ment.
i tried putting it in my territory description, it didn't work, i also tried putting it directly in my css, wich didn't work.



Hrt Icon 0 players like this post! Like?

Myriad (#76)


View Forum Posts


Posted on
2021-09-29 11:36:54
I don't think the OP is active atm, their last login date is a few months back.

For the floating div code provided, there's 2 parts to it - so you'd have to put the css part in the css file, and the html part in your territory description.

CSS
.name {
position: fixed;
bottom: 0;
left: 0;
}


HTML
<*div style="width:#px;height:#px;background:#HEXCODE;border:#px solid;"* class="name"*>Text<*/*div>

I put Keina's code into 2 colours for you to make it easier - the red text above goes in your css file, and the blue text goes in your territory description (and you need to remove all the asterisks from that to make the html work, of course!).

You also need to make sure that if you change the name of the element (where Keina has the template setup just as 'name') you change it in both the css and html so it still matches. So if you change 'name' to 'floatingdiv' for example, you need to change it to that in both locations, or it will no longer work :)



Hrt Icon 0 players like this post! Like?


Edited on 29/09/21 @ 11:37:10 by Myriad (#76)

Yolo (#223371)

Confused
View Forum Posts


Posted on
2021-09-29 11:43:44
Ohh! makes sense now, thank you!


Edit: it worked!



Hrt Icon 0 players like this post! Like?


Edited on 30/09/21 @ 03:55:34 by Yolo (#223371)







Memory Used: 633.48 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00443s