(This is a thread from Mizahar's fantasy role playing forum. Why don't you register today? This message is not shown when you are logged in. Come roleplay with us, it's fun!)
The player scrapbooks forum is literally a place for writers to warm-up, brainstorm, keep little scraps of notes, or just post things to encourage themselves and each other. Each player can feel free to create their own thread - one per account - and use them accordingly.
Oh geez, wow, I'm really sorry about this. I disappeared after getting a job (and after just joining) - I was working a lot of nights closing and staying up late to make up for the fact that I felt my whole day had been wasted, and it became a vicious cycle of me waking up a few hours before work and then working the day and coming back home with very little interest in doing anything.
I also moved to California just recently. Now that I'm settled in, I feel safe to come back and write again. I'm sorry I disappeared like this! Feel free to slap me for leaving without a trace.
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.
[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.
[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.
[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!
I saw something that interested me on this website and I wanted to test it out...so another post of boxcode playground!
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.
[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!
[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.
[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]
I don't know the practical applications of this, but it sure looks neat. Anyone can feel free to post in this scrapbook (at any time) with either stuff I've posted that they've played with, or stuff they've found themselves. Have fun!
)