Kauria's Coding Corner

[Kauria]

Heyowdy, everyone! I want to git gud at BBCoding and I want a place to practice it where the only people likely to see are bots and my old DE pals, haha. Might even turn this into a tutorial space of sorts if I do achieve any level of aforementioned gudness. Pay it forward!

For now, baby steps.

[Kauria]

(ok admittedly I have no idea where the bbcode ends and the css begins. SOME sort of coding is happening here; I may or may not be calling it the right thing. sorry nohiki I only know java and apparently weird (fun) java at that. why don't more coding classes show you how to make minecraft)

first things first: div
what the heck are you, bud. you're a div box. nice. what's that look like.

Gonna post code boxes followed by how they actually behave

[div]this text is between two div tags[/div]

this text is between two div tags

Ok cool nothing exciting happened there except that text is now standalone and has a lil extra padding around it. next. (now following this tutorial, vaguely: adoxographyv2.boards.net/thread/927/v5-templates)

[div align="center"]this text is between two CENTERED div tags[/div]

this text is between two CENTERED div tags

Hoho yeah, something happened there. Next!

Ok now let's get fancy with some table stuff. tables take a fair few tags before they even show up! let's try to make a simple table with a header row and two content rows.
table = start of table
tr = start of a table row
th = a header row, td = a content row (like how "Name" would be a header and "Naïma" and "Shya-tael" would be content entries)


[table][tbody][tr][th]IMPORTANT header text[/th][/tr]
[tr][td]less important content text #1[/td][td]here's another cell[/td][/tr]
[tr][td]and a second content row to wrap things up[/td][/tr][/tbody][/table]

IMPORTANT header text
less important content text #1	here's another cell
and a second content row to wrap things up

dude I didn't even put those tbody tags in there, proboards just decided they were needed after I hit preview. whatever that's fine. note that the header text is bold even though I didn't use a bold tag. also interesting that it adds an empty column to the second content row to keep the cells aligned.
and now, a synthesis! table inside div and then I go do the things I'm supposed to be doing instead of this

[div align="center"][table style="width:90%;"][tbody][tr][td]uh does this work?[/td][/tr][/tbody][/table][/div]

uh does this work?

verdict: sorta! Getting there. Gonna get fancy with images next time. (I'll be sure to keep it DE-themed. Man, dragons are great.)

edit: hmm, I think there are black table outlines getting lost against the black site background, haha. next time I'll figure out how to change those colors so it's easier to see what's going on.

[Kauria]

hey, I'm back!
first things first, getting visible table outlines.

[table][tbody][tr][td style="border:solid 1px #f00;"]this table should have a visible outline[/td][/tr][/tbody][/table]

this table should have a visible outline

yeah it does!

second things second, returning to the whole "fancy posts" thing. let's add a background image.

[div align="center"][table style="width:500px;"][tbody][tr][td style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Friedrich-Johann-Justin-Bertuch_Mythical-Creature-Dragon_1806.jpg/1200px-Friedrich-Johann-Justin-Bertuch_Mythical-Creature-Dragon_1806.jpg');background-position:center center;height:200px;"][/td][/tr]
[tr][td][/td][/tr][/tbody][/table][/div]

heck yeah?

[Kauria]

step the next.

   [div align="center"][table style="width:500px;"][tbody][tr][td style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Friedrich-Johann-Justin-Bertuch_Mythical-Creature-Dragon_1806.jpg/1200px-Friedrich-Johann-Justin-Bertuch_Mythical-Creature-Dragon_1806.jpg');background-position:center center;height:200px;"][/td][/tr][tr]
[td style="background-image:url('http://i.imgur.com/i2EIzN9.jpg');padding:20px;"]
[div style="background-color:white;padding:10px;text-align:justify;font-family:georgia;font-size:11px;"]Post here.[/div]
[/td]
[/tr][/tbody][/table]
   [/div]

Post here.

ok, so I'm noticing that the site does some weird autoformatting that means I can only successfully preview it once before it decays and deletes my image links. fun. just gotta keep copying it fresh from the code tags
also haha white text on a white background

[Kauria]

guh ok I wanna make one of those lil circle icon images how do I do that

step 1: put a picture in a table

[div align="center"][table style="width:500px;"][tbody][tr][td][img style="max-width:100%;" src="https://i.imgur.com/tHxbAAE.png"]
[/td][/tr][/tbody][/table][/div]

step 2: apply a border radius
[div align="center"][table style="width:500px;"][tbody][tr][td][img src="https://i.imgur.com/tHxbAAE.png" style="max-width:100%;border-radius:100%;"]
[/td][/tr][/tbody][/table][/div]

whoops he looked better without it

step 3: apply a border
[div align="center"][table style="width:500px;"][tbody][tr][td][img src="https://i.imgur.com/tHxbAAE.png" style="max-width:100%;border-radius:100%;border:5px solid #52325D;"]
[/td][/tr][/tbody][/table][/div]

[Kauria]

Ok, now I wanna learn how to put an image in a div/table nicely next to text. Looking at some templates (Charcoal Shadows by Red☠Frost, My Day Will Come by Laura), there are a couple ways to do this.

#1: make a thin horizontal box with text and then SLAP an image on top of it. you can do this by getting sneaky with margin-top and subtracting the radius of the image to slide it up into the same space.

here is what it looks like without the positional modifications:

[div style="height:25px;width:500px;background:#52325D;color:#FFFFFF;"][div align="center"][font size="4"][b]Look! It's Ourias![/b][/font][/div][img src="https://i.imgur.com/tHxbAAE.png" style="max-width:100px;border-radius:100%;"][/div]

Look! It's Ourias!

now adding in margin-left:-5px; to nudge him to the left (enough to cover the left edge of the purple box) and margin-top:-60px; to bring him up so the centerline of the image matches the centerline of the text.
now, why -60 px instead of -50? the icon is only 100x100. that would work IF the top line of the image were already centered with the text. but the text has 3 px of free space around it and 14 px of height, so 3 + half the text's height (7) = 10 additional px to move him up

[div style="height:25px;width:500px;background:#52325D;color:#FFFFFF;"][div align="center"][font size="4"][b]Look! It's Ourias![/b][/font][/div][img src="https://i.imgur.com/tHxbAAE.png" style="max-width:100px;border-radius:100%;margin-left:-5px;margin-top:-60px;"][/div]

Look! It's Ourias!

If I want to add an icon border, that gets factored into the vertical translation as well, so it becomes -65px with a 5px border.

[div style="height:25px;width:500px;background:#52325D;color:#FFFFFF;"][div align="center"][font size="4"][b]Look! It's Ourias![/b][/font][/div][img src="https://i.imgur.com/tHxbAAE.png" style="max-width:100px;border-radius:100%;border:5px solid #52325D;margin-left:-5px;margin-top:-65px;"][/div]

Look! It's Ourias!

I'll leave off there for now. Other kinds next time!

[Kauria]

Aaaaaalllll right, time to really figure some things out on my own.

let's do fills.
[div style="background:#9b76a6;"]hey howdy hey[/div]

hey howdy hey

fill + set size (500 px)

[div style="width:500px;background:#9b76a6;"]hey howdy hey[/div]

hey howdy hey

add in some text formatting? (text-align:center and color:#39253e)
[div style="width:500px;background:#9b76a6;text-align:center;color:#39253e;"]hey howdy hey[/div]

hey howdy hey

[Kauria]

I think one issue I've noticed with my learning process here is forgetting which phrases do what and where they should go. So I'm going to start making myself a guide.

Div Formatting

• Style tags go between the quotation marks in div style="". Order is arbitrary. Tags are separated within the quotation marks by semicolons ; 
  [div style=""]
  
  • Background sets the color of the div box. Takes hex codes with the # included.
    [div style="background:#535353"]
    this div has a gray background (and no set width; on my computer it just keeps going horizontally to the rightmost edge of the page
    
    
  • Width sets the overall width of the div. Can be a percentage or a pixel number. Can also set height here in the same way.
    [div style="width:500px"]
    this div is 500 px wide (and has a gray background so you can see where its edges are)
    
    
    this div is 500 px wide AND 100px tall (notice that the text still starts in the top left corner)
    
    
  • Gonna lump a bunch of text formatting all together: text-align, font-size, color, font-family, etc. change exactly the things you think they would about the text. Here's an example with all of them:
    [div style="width:500px;background:#535353;text-align:center;font-size:14px;color:#c3ff93;font-family:calibri;"]
    this text is centered, 14-pt, light green, and Calibri
    
    
    
  • Want a little extra space around your content within the div? That's what padding is for! [div style="padding:19px;width:500px;background:#535353;text-align:center;color:#ffffff"]
    Wow, so much room!
    
    Notice that this div is wider than the one above despite having the same width value. It has a padding of 19px, and that space gets added, I assume, to all four sides of the box. So it would really be...538 pixels wide.
    
    
  • Time to get fancy with a background image! Syntax is background:url(image address).
    Note that if you make the div wider than the image, it will tile to fill the available space. This may or may not be what you want.[div style="width:500px;height:200px;background:url(https://i.imgur.com/63a3hFp.png);color:#ffffff;font-family:serif;font-size:16px;"]
    Look, it's Starlight! Hi, Starlight!
    
    
  • border: <thickness> <style> <color>
    [div style="border:5px solid gray"]
    
    this div has a 5-pixel solid gray border (yes, it works with grey, too)
    
    
  • To round the corners of your divs, use border-radius. It can be in px or %
    [div style="border-radius:30px"]
    
    hee hoo
    this div's got rounded corners
    so you don't poke yourself
    
    Note that the text doesn't adapt to the change in shape, so it's probably better to center or indent content to keep it safely contained.
    
    
    
    
    
    
    A border radius of 100% will create an ellipse!
    (On a div with equal height/width, it will be a circle)
  
  

Mobile Compatibility

• So! One thing I've noticed is that my phone HATES displaying this stuff. Here's a screenshot of the mobile version of this thread:
  
  While there's a lot to unpack with the mobile version of this site (hello, light mode!), what's important here is how the div boxes display. The plain text wraps around just fine, but the div boxes (especially with the indent from the bullet list) get cut off partway through—and the site won't even let me scroll sideways to see the rest of them. The same also happens if I shrink my browser window on my computer.
  
• Percentages can adapt to different widths of screen, but when it comes to bg images they can get weird (still crop an image if it's larger than the space, or tile it if it's smaller)
  
• So, uh. Time to figure out how to fix that, I guess. Here's a link talking about responsive web design and adapting content to the viewports of different devices. idk how much I can accomplish from just the forum post side of things but I guess I'll chip away slowly and see what I can learn.
  

Found this chart partway through making this list; will be useful for the rest: www.rpnation.com/threads/div-box-chart.321626/