Code Things That Work So Far

Also, you'll notice that the [code] appearance is pretty awful, which is why for most things I strongly suggest just hitting "quote" on the post you want to see, and then use the "BBCode" tab at the bottom to view the code.


Other things that work:

Negative margins - I confirmed this earlier on my test thread, you can use a negative margin to adjust positioning, so if you want to have a crazy shenanigan like:

You can totally do that.

Another thing we have is table. Table is not grid. It is like... Discount Dollar Store Garbage Grid. A lot of stuff doesn't work right, or doesn't work at all. You can't combine areas. Height works weirdly or poorly. If your goal is precise positioning of elements, table isn't going to do that for you - but you can get at least a little style going for you.

There's a "table" button in the editor that is an easy start. Basically, you're gonna start with [table] and then start each row with [tr] and each box with [td]

Remember to close your tags. If you want to adjust an element, you can use [td style="blah blah insert code like background-color:#FFFF00 here"]

You can use divs inside a table element. You can use tables inside a table element (embedded). If you're willing to write some truly ugly code, you can probably do some neat things with this, but grid was a lot more streamlined. I'll try to fiddle with tables more and get some more in-depth info when I can.

Great news div lovers- most of the "lost" div functionality works using [attr] This means stuff like grids, outlines, position (NICE), etc. still works, which is good and cool.

The code for this is: [div][attr="style","background-color:red;color:white;"][/div][/div]

Grids do work a bit differently, though. I (or someone better qualified) will try and put a more detailed guide on how they work and the syntax and all that, but tl;dr: it's exactly the same, except replace every /" with '.

Is there a way to make it fit though? Like the idea, but not fond of an image stretching outside of whatever the div may be.

So, I’ve been working with this a little. To get an image to size nicely, you want to use both a width and a max-width, ideally. The reason to use both of them is because with shoutbox existing, there is a lot of difference in window size... anyway, I won’t soapbox about that.


[div align="Center"]
[img alt="" src="https://media.discordapp.net/attachments/732971569655185551/805254214283952158/leo-anyas.jpg" style="Width:400px;max-width:95%;"][/div]


Gives you:




I used an align center in there just to make it a little tidier in that particular code, you can align it whichever way you like. Note that there are two width parameters here: the first sets the image width to 350px, and the second says that width can be a maximum of 95% of the available space - if 350px is more than 95% of the available space, it will scale down the image.

You can try resizing your window to see what happens with the image in action.

For anyone interested, working float code:

Without padding:

[img style="float:left/right;"]imgurl[/img]Text here


With padding:


[img style="float:left/right;padding:1%;"]imgurl[/img]Text here


Let me update that a bit, because there’s more to it than that.

The settings you can use for sizes are pixels (px), percentages (%), fractions (fr) and auto.

Pixels are used when you want the size of a particular grid element to be exactly a certain number of pixels. If I want a grid element to be exactly 20 pixels wide, I would use 20px as the size.

Percentages are used when you want the size of a particular element to be a certain percent of the space available, respective to the viewer screen. If I want part of a grid to take up exactly 68% of the space in the defined area on anyone’s screen, I would use 68% as the size.

Fractions are used when you want the sizes of particular elements to be a certain size with respect to each other. If I want one element to be twice the size of the next, I would use 2fr 1fr as the size.

And auto is used when you’ve defined everything else and you just want what’s left to take up the remaining size. This is really key because it compensates for various screen sizes - so, in lowla’s example above, his 50px 800px 50px is actually wider than my screen here, which means it’s getting cut off. Instead of using a wide pixel value, it’s usually better to use auto for the main element, because then it just takes up whatever space is available. 50px auto 50px will have one element of 50 pixels at either side, and then the middle element will take up whatever’s left.

You can also combine elements: You could set up your columns as something like 50px 1fr 20% auto if you really felt like it.

You can also leave the values undefined. If you leave the width undefined, your grid will automatically make it whatever it needs to be so that the height remains constant. In order to do this, simply omit the grid-template-columns element from your code.

Similarly, you can omit grid-template-rows from your code if you do not specifically wish to set row height.