Ines's Boxcode Playground

[Ines]

Welcome to my Boxcode Playground! This is going to be a thread wherein I experiment and explain the results of my experiments for other people to use and expand upon. I welcome & actively encourage people to post in this thread things made with the help of or incorporating my posts here. This first post will serve as an index of posts & a cache of useful links. I will not be taking any boxcode requests; rather, I'd like to give out useful information and tutorials so that anyone can make their own. For now there are only boxcode tests, but I may add photoshop tips in the future.

However, I am open to suggestions or questions on how to get your style code (especially character sheet formatting, where this is most pertinent) to your specifications, or even if you have a "what if?" or "can this be done?" question. I ask that you send me a PM either on here or on Discordselkie#1001 for any questions and leave the thread for posting your own experiments. If you'd rather post your own thread, send me the link and I will add it here.

To-Do

• Play with the border-image CSS (as an alternative/more customizable version of the [frameborder] code from Tarot, described here)
• Individual boxes for images and using them to edit the appearance of the image

Useful Links

• BBCode Quick List -- Mizahar's very own BBCode Quick List, put together by Gossamer and Tarot. A great reference for what you can do with Mizahar's built in BBCode.
• Mizahar's Gallery -- Upload all of your photos that you use on Mizahar here. That way you will never have to worry about losing your pictures, or the website changing their hosting and hotlinking rules/requirements/terms.
• w3schools.com -- this link goes specifically to the CSS portion of the website, where it covers different parts of CSS and what it does. CSS is what's used when you use style= & style2= in your boxcodes.
• BBCode Text Colorizer (Found the link via Antipodes Aesthetics Workstation , thanks Anti!) -- Auto-generates colored text (including gradient text!)
• Pixie -- a color grabber that I personally use. Picks colors from anywhere on your screen with keyboard combinations.
• Color Grabber -- a color grabber that I have not used, but is by the same person who made the BBCode text Colorizer.

My Posts

• Test 1 - Side by Side Codes (Using Style2 Nesting)
• Tests 2 and 3 - Position: Sticky & Position: Absolute

Other People's Posts

• Ennisa Template - Ennisa actually made her own template using the code guide I wrote here. It's super cute!

[Ines]

This was prompted by a request for column help from Calla Davin. The base style code used was quoted directly from her CS at the time of writing this [7/13/2019]. I used it because it was originally intended to just be an example for her and her CS, but I realized that it could come in handy for other people, too. Thank you for reading! Enjoy!

Base Style Code

Code: Select all

[style=overflow: auto; background:linear-gradient(#e7ded5, #ddd9b8); padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; width: 574px; margin: auto; border-radius: 0px 0px 40px 40px; border: 4px double #e7ded5; color: #985846;][googlefont=Slobo]text[/googlefont][/style]

The code that reads overflow: auto; is required so that you can have the style2 boxes as the last thing in the style box and the text doesn't fall out of first box. For this one I just have the two style codes sitting next to each other with a width value that takes into account the padding for both the original style ( style= ) and the secondary style codes ( style2= ). Padding in the secondary style codes is optional for the column sections, but it's good to have them if you think the text for both is going to run into each other. If you take it out, you have to change the width: ##px value into 277. I got the number by taking the width of the first style code, subtracting the right and left padding values and halving it, getting 277. I played around until I got 262 as the ideal width. Not really sure where it comes from but it's a good size that prevents text posted after from squeezing into the middle.

one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six

1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99

The columns should work with whatever number you put in (I'd do 3 at the most unless you start using a wider template and adjust the codes to match, because as you can see in the code, if something is too long it will get split up. Lorem ipsum dolor sit amet is only on one line.) To put a new entry into the column, you just have to start a new line.

Code: Select all

[style2=float: left; margin: auto; padding: 10px; width: 262px;][columns=2][b]one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six[/b][/columns][/style2][style2=float: right; margin: auto; padding: 10px; width: 262px;][columns=3][b]1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99[/b][/columns][/style2]

This one is basically identical to the first one, but I decided to play around/give an example of how you can change the code-within-code to your liking. You have to adjust the width of the code if you add a border. Here, since they both have 4px wide borders, the width is 259px. The inner edges touch, and it looks kinda cool to me. You can also do anything you can do in the style= code with the style2=...including the gradient background, which I reversed as an example.

one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six

1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99

However, if you don't want them to touch, all you have to do is adjust the width: ##px to whatever you want.

Code: Select all

[style2=float: left; margin: auto; padding: 10px; width: 259px; border: 4px double #985846;][columns=2][b]one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six[/b][/columns][/style2][style2=float: right; margin: auto; padding: 10px; width: 259px; border: 4px double #985846; background:linear-gradient(#ddd9b8,#e7ded5);][columns=3][b]1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99[/b][/columns][/style2]

They don't have to be uniform, either. You can have one way bigger than the other, but they should add up to the same number you started with.

one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six

1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99

Along with changing the value of the right box to 159px, I changed the left box to 358px. I subtracted one pixel to show what they look like with a gap.

Code: Select all

[style2=float: left; margin: auto; padding: 10px; width: 358px; border: 4px double #985846;][columns=2][b]one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six[/b][/columns][/style2][style2=float: right; margin: auto; padding: 10px; width: 159px; border: 4px double #985846; background:linear-gradient(#ddd9b8,#e7ded5);][columns=3][b]1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99[/b][/columns][/style2]


They are also uneven in height (because of the contents and size difference) so the text afterwards is uneven. I'm still trying to figure out how to fix this in a better-er way, but one thing you can do is set a height.

one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six

1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99

There are some fun things you can do with height. I'll probably make another post showing off scrollbars and scrollbar related things!

Code: Select all

[style2=float: left; margin: auto; padding: 10px; width: 358px; border: 4px double #985846; height: 200px;][columns=2][b]one
two
three
four
five
six
seven
eight
nine
ten
forty-two
ninety-six[/b][/columns][/style2][style2=float: right; margin: auto; padding: 10px; width: 159px; border: 4px double #985846; background:linear-gradient(#ddd9b8,#e7ded5); height: 200px;][columns=3][b]1
2
3
4
5
Lorem ipsum dolor sit amet
6
7
8
9
10
eleven
12
45
99[/b][/columns][/style2]

[Ines]

These tests were prompted by me looking through w3schools (link in my first post) and reading about the position property. I don't know the practical use of either of them, but they sure are stylish.
Thank you for reading! Enjoy!

Test Two: Sticky :

this is sticky text! It's so sticky!
It's sticking everywhere!

This box uses position: sticky in a style2 code, and top: 0 to make it stick to the top of the box. overflow: auto means that when the text takes up more space than the height allows, it creates a scrollbar. padding: XXpx sets the overall padding value, but because padding-top: 0px is listed after it, the top padding is overridden to 0px. This removes the gap from the sticky text and still keeps it looking neat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.

Code: Select all

[style=margin: auto; padding: 10px; padding-top: 0px; width: 350px; height: 300px; overflow: auto;][style2=margin: auto; padding:5px; position: sticky; top: 0; background-color: #5C3B3B;]this is sticky text! It's so sticky!
It's sticking everywhere![/style2]
This is normal text!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.[/style]

This is the exact same code as above, but instead of top: 0, I set it to bottom: 0, and I cut & paste the style2 code holding the sticky message onto the bottom of the filler text. I also changed padding-top: to padding-bottom:, for the same reason as before.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.

this is sticky text! It's so sticky!
It's sticking everywhere!

Code: Select all

[style=margin: auto; padding: 10px; padding-bottom: 0px; width: 350px; height: 300px; overflow: auto;]I think I got something on my shoe!

[color=#804040]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.[/color][style2=margin: auto; padding:5px; position: sticky; bottom: 0; background-color: #5C3B3B;]this is [url=https://www.w3schools.com/css/css_positioning.asp]sticky[/url] text! It's so sticky!
It's sticking everywhere![/style2][/style]

Test Three: Absolute :

this is absolute text! It's so absolute!
It's absoluting everywhere!

this text is hidden by absolute, so not ideal for this purpose - sticky would be better!

The main difference between sticky and position: absolute is that absolute automatically only takes up the space of the words it contains, but also is not in-line with the text, so it is always taking up that space on the top, even if there is text after it. I tested using absolute without a style enclosing it, (so, instead of doing style and then style2 with the absolute inside it, just the style with absolute) and all it really did was overlay everything else. Didn't seem very useful. I have included the code for the box here, so if you want to play around with it yourself, show me what you do!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.

Code: Select all

[style=margin: auto; padding: 10px; padding-top: 0px; width: 350px; height: 300px; overflow:auto;][style2=margin: auto; padding:5px; position: absolute; background-color: #5C3B3B;]this is [url=https://www.w3schools.com/css/css_positioning.asp]absolute[/url] text! It's so absolute!
It's absoluting everywhere![/style2]
this text is hidden by absolute, so not ideal for this purpose - sticky would be better!

this is normal text!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu risus vel enim consequat hendrerit tristique sed massa. Sed est lacus, scelerisque quis lectus ac, tristique porttitor massa. Ut et ex a metus consequat pharetra. Nullam non tortor libero. Duis tincidunt porta lectus. Nulla congue imperdiet sem, nec rhoncus purus facilisis eget. Cras in fermentum massa. Nullam eu nunc convallis, molestie dolor nec, scelerisque velit. Nulla nec augue in neque finibus imperdiet. Nam et ligula eget augue faucibus molestie. Nam tincidunt sem ut massa efficitur, eu aliquam sem tincidunt. Vivamus id tellus condimentum, volutpat eros id, hendrerit mi. Aenean vitae urna eu metus blandit mollis quis sit amet enim. Aenean mollis imperdiet est, tristique accumsan ex luctus nec. Vestibulum quis porta nisl. Phasellus dictum orci risus, aliquet aliquam mauris suscipit eu.[/style]