[Ines' Scrapbook] Driving You Batty

(This is a thread from Mizahar's fantasy role playing forums. 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.

[Ines' Scrapbook] Driving You Batty

Postby Ines on September 15th, 2017, 6:53 pm

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.
User avatar
Ines
Ines & Adeliz, one season only!
 
Posts: 112
Words: 66942
Joined roleplay: May 2nd, 2017, 10:41 pm
Location: Syka
Race: Akalak
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Featured Thread (1) Mizahar Grader (1)

[Ines' Scrapbook] Driving You Batty

Postby Karin on September 15th, 2017, 7:52 pm

No slapping, just glad to hear you're back! :D
Image

10/7/17- All my threads are marked [open] and as such are open to all. :)
User avatar
Karin
Ocean gazing
 
Posts: 588
Words: 390321
Joined roleplay: July 7th, 2015, 10:05 am
Location: Riverfall/Syka
Race: Human, Svefra
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Artist (1) Overlored (1)

[Ines' Scrapbook] Driving You Batty

Postby Tierra on October 14th, 2017, 2:14 am

hope everything is going okay with ya Ines/Sofia
Total Threads: 9/10|ThreadAny Threads that are not solos 6/8|Solos 3 of 2

Until I have some free slots available I will not be taking on any new threads.
Thank you for understanding.


Due to some changes in my family dynamics I will be as active as I can. Please bear with me.
Tierra
You have no secrets even in shadows.
 
Posts: 132
Words: 73512
Joined roleplay: September 15th, 2014, 5:13 pm
Race: Human
Character sheet
Storyteller secrets
Plotnotes

[Ines' Scrapbook] Driving You Batty

Postby Ines on June 29th, 2019, 9:03 am

my current writing playlist
User avatar
Ines
Ines & Adeliz, one season only!
 
Posts: 112
Words: 66942
Joined roleplay: May 2nd, 2017, 10:41 pm
Location: Syka
Race: Akalak
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Featured Thread (1) Mizahar Grader (1)

[Ines' Scrapbook] Driving You Batty

Postby Ines on July 6th, 2019, 10:37 pm

Image


A commission I did for Oresnya Cacao. I can take other commissions, too, just DM me. I may post in the artist forum eventually.
User avatar
Ines
Ines & Adeliz, one season only!
 
Posts: 112
Words: 66942
Joined roleplay: May 2nd, 2017, 10:41 pm
Location: Syka
Race: Akalak
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Featured Thread (1) Mizahar Grader (1)

[Ines' Scrapbook] Driving You Batty

Postby Ines on July 13th, 2019, 7:57 am

boxcode playground to do list:
  • [s]Migrate to aesthetics and design forum?[/s] link here
  • Play with the border-image CSS (as an alternative/more customizeable version of the [frameborder] code from Tarot, described here)
  • Individual boxes for images and using them to edit the appearance of the image
  • If you see this to do list and have a question or specific look you want, post or PM me here or on Discord!

boxcode playground: request from Calla!

Test One: Side-by-Side Style2 Codes :
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]
Last edited by Ines on July 13th, 2019, 12:12 pm, edited 3 times in total.
User avatar
Ines
Ines & Adeliz, one season only!
 
Posts: 112
Words: 66942
Joined roleplay: May 2nd, 2017, 10:41 pm
Location: Syka
Race: Akalak
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Featured Thread (1) Mizahar Grader (1)

[Ines' Scrapbook] Driving You Batty

Postby Ines on July 13th, 2019, 8:10 am

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.


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]


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!
User avatar
Ines
Ines & Adeliz, one season only!
 
Posts: 112
Words: 66942
Joined roleplay: May 2nd, 2017, 10:41 pm
Location: Syka
Race: Akalak
Character sheet
Storyteller secrets
Scrapbook
Plotnotes
Medals: 2
Featured Thread (1) Mizahar Grader (1)

Previous

Who is online

Users browsing this forum: No registered users and 1 guest