|
|||||||
---|---|---|---|---|---|---|---|
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! 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> <*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 exampleLists 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
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
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>
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.
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! ![]() Edited on 01/04/19 @ 12:51:47 by Keina (#50109) |
👁🗨Nifur-c lean ❄ (#94890) Astral View Forum Posts ![]() Posted on 2017-10-21 09:20:19 |
hi Keina! I've tried your codes above and they are super useful! but how to identify the tree background and the den background color with my CSS code individually? Or how to change background color in my den in general... I tried this, it worked on online code boxes, but didn't work in my den. also I have a curser code above the background code which worked ![]() <*style> body { background-color: #CCCCCC; } <*/style> ![]() Edited on 21/10/17 @ 09:34:03 by DitDot[Primal] [LightsOff] (#94890) |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2017-10-21 11:17:40 |
Hiya DitDot! To change the background of your den page you'll need to code in a program like Notepad or Notepad++ which are both free to use! Once you're done working on your CSS you can upload it to Dropbox and get the sharing link then change the www to dl so it'll work! You can use this guide to help you with Den CSS even more in depth if you want as style tags won't work for changing the overall appearance of your den page. Hope it helps! ![]() ![]() |
Julia*grace* (#127710)
King of the Jungle View Forum Posts ![]() Posted on 2018-01-09 17:57:09 |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2018-01-09 17:59:52 |
Hiya Julia! For gifs, you use the same code you would for regular images! Here's the code: <*img src="URL"* */*> Remove the *'s and replace the URL with the direct link to the image/gif. Hope it helps! ![]() ![]() |
Julia*grace* (#127710)
King of the Jungle View Forum Posts ![]() Posted on 2018-01-09 18:05:14 |
<*img src= "https://media.giphy.com/media/1316cEyMAtS3GE/giphy.gif"* */*> ![]() Thanks!! ![]() |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2018-01-09 18:06:18 |
Nyte (#123996)
Toxic View Forum Posts ![]() Posted on 2018-01-29 18:38:10 |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2018-01-29 18:46:36 |
Yeesh! I'm sorry that happened! My inbox is always open to any questions if you can't contact me at the moment, I can respond to messages when I can. :o ![]() |
Nyte (#123996)
Toxic View Forum Posts ![]() Posted on 2018-01-29 18:47:47 |
I just wanted to give you a hard time. I literally just stumbled across this, heh. Though, when my tablet is charged (which, y'know, won't be till tomorrow), I have a question or two about expanding/collapsing boxes! ![]() |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2018-01-29 18:53:54 |
I'll gladly answer it! ![]() Feel free to either leave a reply here or send me a PM, which ever works best for you! ![]() ![]() |
♡白鳥♡ (#101693)
![]() Cursed View Forum Posts ![]() Posted on 2018-03-11 11:36:00 |
Does anybody here know how to put CSS on a thread? For example, I saw somebody with a colored background on a sales thread and I was wondering how I could do that. I know there's a way, I just can't figure it out ![]() |
Nyte (#123996)
Toxic View Forum Posts ![]() Posted on 2018-03-11 12:09:33 |
I don't think you can use CSS on a thread, you can use straight HTML to do it, though. :} EX: <*body bgcolor="#E6E6FA"*> (without the *) ![]() |
♡白鳥♡ (#101693)
![]() Cursed View Forum Posts ![]() Posted on 2018-03-11 12:10:32 |
@Nyte, thanks! Where can I find a tutorial on this? It seems complicated ![]() |
Keina [Not Active] (#50109)
Lone Wanderer View Forum Posts ![]() Posted on 2018-03-11 12:10:41 |
Hiya Yoshimitzu! CSS is not able to be done on thread posts unless they either used a <*table*> or <*p*> code to try and change the background of the thread post itself although it wouldn't cover the entire post. I hope that helps! ![]() ![]() |
Nyte (#123996)
Toxic View Forum Posts ![]() Posted on 2018-03-11 12:11:26 |
I know little bits an pieces here an there. Mostly self taught. There is, however, lots of helpfull resources both on an off site! If you're curious how to do certain things, you're more than welcome to PM me (or, as it's Keina's thread) Keina! :} ![]() |