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:
this crazy stuff
for some reason
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.
Firstly, for lists, you have two options for bullet point style. The default, and squares. For the default, you can just use the normal [ul] at the beginning. If you want squares, add type="square" to that. So, [ul type="square"]
Secondly, the [code] issue: there's a handy little tag called [noparse]. This allows you to have your code inline if you want, or just in general show your code.
Uh, there's another thing... Oh yeah, marquees! Marquees are a thing. You can use the [marquee scrollamount=#] tag for fun scrolling texts. Replace # with how fast you want it to be.
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 '.
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.
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.
Before I get to it, it's important we understand something:
grid-template-columns deal with the width of individual grid boxes on a row. You can have any number of grid boxes you can define like 50px 800px 50px etc
grid-template-rows deal with the height of the grid boxes and how many rows you will have. It's advised to have a single value such as 50px
[div][attr="style","display:grid;grid-template-columns:50px 800px 50px;grid-template-rows:50px;grid-template-areas:'A1 A2 A3';"][div][attr="style","grid-area:A1;background-color:green;padding:1%;text-align:left;border:20px white solid;"][/div][div][attr="style","grid-area:A2;background-color:yellow;padding:1%;text-align:right;"]Y[/div][div][attr="style","grid-area:A3;background-color:blue;padding:1%;text-align:right;border:20px white solid;"][/div][/div]
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.
willowthefox: Hewwo! I'm new to this place, and I just wanted to say Hi! My name is Willow, and I am a new artist thinking about taking up freelance art as a job, and I'm also really into the Changed and furry fandoms. I can't wait to meet you all! :3
Sept 10, 2022 21:29:49 GMT
illirica: Hello! Shoutbox is pretty quiet a lot of the time, but I think if you scroll up a little there's a link to our discord server there if you want to join!
Sept 10, 2022 22:47:13 GMT
willowthefox: Oh, I would join if I could but Discord is blocked on my school laptop and on my phone, so I can't use it.
Sept 11, 2022 0:05:38 GMT
willowthefox: And sorry for the late response, I've been working on some drawings.
Sept 11, 2022 0:06:28 GMT
paperwork: Have you tried punching the internet until the block is broken?
Sept 11, 2022 1:24:50 GMT
paperwork: It says "meatball" on my end?
Sept 13, 2022 6:37:36 GMT
paperwork: Willow, of course I know how website blocks work. The website puts up its arms into a blocking position, which stops you from getting close to it. To break through the block, you have to exhaust its stamina bar, ideally by punching it. It's easy.
Sept 13, 2022 6:38:43 GMT