STORAGE TESTING divs under construction

C

castle

*cool aesthetic pfp*
Original poster
Invitation Status
  1. Look for groups
Posting Speed
  1. 1-3 posts per day
  2. One post per day
  3. Multiple posts per week
Online Availability
12pm – 9pm, generally, inconsistent
Writing Levels
  1. Elementary
  2. Intermediate
  3. Adaptable
Preferred Character Gender
  1. Male
  2. Female
  3. Nonbinary
  4. Primarily Prefer Female
Genres
Fantasy, Sci-fi, Modern, Historical-Fiction (rarely), Action, Adventure, Romance, Slice-of-Life
I'm just gonna try out some ideas, might even dump some characters here, idk.

Also, if you're being a li'l nosy, feel free to look around. Maybe even comment, especially if you can help out with something.
 
Last edited:
very simple template for me to get a grasp of how things work


Note: "margin: auto" to center template
 
Last edited:
what does hr do
Makes a nifty line, like I remember
 
this is a spoiler without a title
this is a spoiler with a title
 
Weird af man
Anyways

familiarize myself with this thing
 
is this that sneaky blur spoiler because I really like that
 
I can use fancy fonts with Google fonts, I'm so happy! Kinda pretty too. This is Moon Dance?
Sphinx of black quartz judge my vow
 
Now to make an actual fancypost the way I remember before I jump into new things
 
gonna put main text here

Okay so table is a bad idea because wtf is even happening here
 
Last edited:
Ashley F.
gonna put main text here and add a scroll I think

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

run to the castle
Find the Hidden scroll


Code: 
[div=display: flex; margin: auto; width: 400px; flex-direction: row; justify-content: space-evenly; align-items: center;] [div=background-color: #MAINBG; border: none; width: 150px; height: 150px; padding: 0px 0px 0px 0px;][div=background-color: #fff; border: none; width: 85%; height: 40px; padding: 0px 0px 0px 0px; top: 53px; left: 11px;] [div=width: 75px; height: 75px; padding: 0px 0px 0px 0px; top: -17px; left: 26px; background:url(IMAGELINK); background-size: cover; background-position: top left; border-radius: 100%;][/div] [div=background-color: transparent; width: auto; height: 40px; padding: 0px 0px 0px 0px; bottom: 75px; line-height: 40px; font-family: dancing script; font-size: 24px; color: #000; text-transform: lowercase; text-align: center; text-shadow: 0.5px 0.5px 1px white; /*keep it SHORT bc idk how to get it to scroll horizontally yet*/] NAME NAME [/div] [/div][/div][div=background-color: #fff; border: none; width: 205px; height: 150px; padding: 0px 0px 0px 0px; margin-left: -3px; overflow: hidden;][div=width: 110%; height: 141px; top: 5px; left: 5px; padding: 0px 11px 0px 0px; overflow-y: scroll; font-family: georgia; font-size: 10px; color: black; text-align: justify;] text here

[/div][/div] [/div] [div=margin-top: 2px; font-family: georgia; font-size: 6px; line-height: 5.5px; color: auto; text-align: center; font-variant: small-caps; text-transform: lowercase;]run to the castle
Hidden scroll
[/div]



Notes:
Give the text box more padding
Figure out how to get the name part to scroll sideways (overflow-x isn't working soooo…)
 
Last edited:
Ngl I wish iwaku had a preview feature (unless I'm missing something) like xanje does, because trying to make a single fancypost and saving a hundred times is annoying af man

Edit I'm dumb it's the li'l button up in the top right corner!
 
Last edited:
Let's try with columns instead of flexbox

gonna put main text here and add a scroll I think

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.



Columns don't seem to work for what I like to do, maybe for pictures not for side-by-side templates.
 
Last edited:
Sphinx of black quartz, judge my vow.
"ABeeZee"

Sphinx of black quartz, judge my vow.
"Abel"

Sphinx of black quartz, judge my vow.
"Abhaya Libre"

Sphinx of black quartz, judge my vow.
"Aboreto"
Forced uppercase

Sphinx of black quartz, judge my vow.
"Abyssinica SIL"

Sphinx of black quartz, judge my vow.
"Bellota"

Sphinx of black quartz, judge my vow.
"Dancing Script"
(my fave)

Sphinx of black quartz, judge my vow.
"Oooh Baby"

Sphinx of black quartz, judge my vow.
"Petit Formal Script"
Foooorrrr some reason the fonts don't always load all at once so? Maybe don't use the all at once?
 
Last edited:
Jim Maddox
20 years old
Gemini
Barista
Musician
Dog lover
More random shit here
run to the castle
Find the Hidden scroll


Code: 
[div=width: auto; display: flex; align-items: center; flex-direction: column; top: 20px;] [div=width: 125px; height: 125px; background:url(LINKHERE); filter:sepia(100%); background-position: center; background-size: cover; outline: 12px solid ivory;] [/div] [div=background-color: ivory; filter:sepia(100%); width: 149px; height: 45px; overflow-y: hidden;][div=width: 110%; height: 37px; margin-top: 4px; padding: 0px 3px 3px 3px; overflow-y: scroll; line-height: 10px; font-family: arial; font-size: 10px; color: black; text-align: justify; text-transform: lowercase;]TEXT

 [/div][/div] [div=margin-top: 2px; font-family: aboreto; font-size: 6px; line-height: 5px; color: auto; text-align: right; font-variant: small-caps; text-transform: lowercase;]run to the castle
Find the Hidden scroll[/div]
[/div]
 
Last edited:
Notes:
  • make a character gallery template with smaller polaroids than the one above, longer text sheet below picture, columns, maybe rows of three? four?
  • unrelated, gather names n shit for fake placeholder characters
  • uhhh
  • make intro post template
  • play with the tabs code
  • play with every single filter
  • sit here for a thousand years coding and pretend like I'm not procrastinating participating the roleplay aspect of this site
 
Ideas I feel asleep on
  • a circle of circles using tabs to open up a page in the center of the circle. For what purpose I couldn't tell you. But a circle of circles. Probably a character gallery when the circles are pics.
  • scrap paper squares in the background, a transparent box with solid border in the center, tabs opening different pages into the same square (??? Idk this one is vague)
  • The Ledger - character gallery; looks like an open book with a list of character names followed by an arrow (or preceded by a check box) and when you click it, it "flips" to a page where you fill out you character's bio
 

text one
text two
text three

 
Last edited:

text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /
text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /

text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /



text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /


text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /

text here

name / first middle and last
nickname /
age /
gender /
sexuality /

traits /

 
Last edited:
gonna put main text here and add a scroll I think

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.


gonna put main text here and add a scroll I think

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.



Code: 
[div=display: block; top: -15px;][div=width: auto; display: flex; margin: auto; flex-direction: row; justify-content: space-evenly; align-items: center;] [div=background-color: #fff; border: none; width: 126px; height: 126px; padding: 0px 0px 0px 0px; left: 7px;] [div=width: 95px; height: 95px; padding: 0px 0px 0px 0px; top: 15px; left: 15px; background:url(IMAGELINK); background-size: cover; background-position: top left; border-radius: 0%;][/div] [/div][div=background-color: #fff; border: none; width: 205px; height: 126px; padding: 0px 0px 0px 0px; right: 7px; overflow: hidden;][div=width: 110%; height: 117px; top: 5px; left: 5px; right: 2px; padding: 0px 11px 0px 0px; overflow-y: scroll; font-family: abel; font-size: 10px; color: black; text-align: justify; letter-spacing: -0.5px; word-spacing: 0.5px; line-height: 11px;] text here

[/div][/div] [/div] [/div]
 
Last edited:
Learning tabs

- do not change the "tabs=widthxheight" height from 0

- added comments to help navigate code
- changed nav bar height from 50 to 20
- changed tabs titles font size and color
— used [color=color here]tab name here[/color] because using color in the div doesn't change the titles in the {slide}

- figure out if I can change the tabs position from horizontal to vertical

 
Last edited:
You must log in or register to reply here.
Top Bottom
Back