• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Nessy plays with BBCode (Occasional experiments~)

Public BBCode Thread

Necessity4Fun

I'll keep trying, even if I'm not good enough...
Roleplay Availability
Roleplay Type(s)
Need something altered but you don't know how to do it yourself? Leave a message below and I'll gladly help you out! >w<


It has become common of me to attempt and re-do all my post layouts and creations when the codings changed.
First I re-built ALL my BBCode into HTML layouts, this time, I picked ALL the HTML things and am slowly rebuilding them with BBCode~

Will I be using this thread a lot?
Maybe? (Just need to remember it exists >.>)
I do enjoy coding a lot and I've been trying all sorts of new functions with it~!

Enjoy?

PS: Older ones won't be mobile compatible, for the newer ones I've been trying to make this into a priority~
 
Last edited:
Embed Player Post Layout
This is something I had made in HTML, playing with a friend's slide box creation, for a Kemonomimi and idol RP
It's a simple Youtube player with an accordion attached and then columns inside, but damn, does it look cute!! >w<


Shizuka Etsuko

~~Song that Will be Played~~

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
aiaTitle of the Performance:
aaa"Audition Performance"
Band Members and Positions:
aaaShizuka Etsuko- Flautist
aLocation: Recruitment Stage
Choreography Plan:
Attires: N/A
Stage: simple

Effects and Props (up to four): N/A
Total Price: N/A



Feel free to use it, change it and whatever! OWO
Oohh! And maybe show me it? I'd love to see what people do with these!

Code:
[CENTER]
[SIZE=36px][FONT=Pacifico][COLOR=lightcoral]Shizuka Etsuko[/COLOR][/FONT][/SIZE]
[/CENTER]
[centerblock=50][bg=lightpink][border=2px dotted white]
[CENTER][SIZE=5][COLOR=rgb(255, 255, 255)]~~Song that Will be Played~~[/COLOR][/SIZE][/CENTER]

[CENTER][MEDIA=youtube]AowEa0BXtus[/MEDIA][/CENTER][/border][/bg][/centerblock][centerblock=50][bg=lightpink][border=2px dotted white][accordion=bcenter | 98%]{slide=center | [bg=lightpink][SIZE=5][COLOR=#ffffff]*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*[/COLOR][/SIZE][/bg]}[bg=lightpink][centerblock=90][div=padding-left: 1px;][Row][Column=span5][SIZE=5][COLOR=Transparent]aia[/COLOR][COLOR=#ffffff]Title of the Performance:
[COLOR=Transparent]aaa[/COLOR]"Audition Performance"
[COLOR=Transparent][/COLOR]Band Members and Positions:
[COLOR=Transparent]aaa[/COLOR]Shizuka Etsuko- Flautist
[COLOR=Transparent]a[/COLOR]Location: Recruitment Stage[/COLOR][/SIZE][/Column]
[Column=span3][CENTER][SIZE=5][COLOR=#ffffff]Choreography Plan:
Attires: N/A
Stage: simple[/COLOR]
[COLOR=rgb(255, 255, 255)]Effects and Props (up to four): N/A[/COLOR]
[COLOR=#ffffff]Total Price: N/A[/COLOR][/SIZE][/CENTER][/Column][/Row][/div][/centerblock]
[/bg]{/slide}[/accordion][/border][/bg][/centerblock]
 
Last edited:
EDIT: THIS REDIRECTION METHOD NO LONGER WORKS,
BUT I'M KEEPING THE POST HERE ANYWAY. FOR FUTURE REFERENCE, MAYBE?

To not dwell too much in the context (I would have to go really deep about this RP I'm at), a certain something happened that made me wonder 'Can I put tabs inside of tabs?'

Clearly, not in the conventional way, no. But then I recalled IctoraPost IctoraPost 's magical BBCode stuff (I love everything you do! It's AMAZING!!), including, you guessed right, some very cool tab placeholders! The rest is more changing it appearance wise, such as screenshooting and running the image in a color picker and such to have the EXACT color tones and spacings. (Which aren't that simple because damn, it was hours of trial and error!)
This was the result, very pleased with it! I had fun!

It's important to mention that to have the desired effect, we make portions one and two of the code (default look and tab 1) the exact same, so that when you cycle through them, you can always 'come back', just like normal tabs do.

  • This is a Tab.

    Hey there! I am a TAB-tab!!!

    Tab-inception! : O
    Hey there! I am a TAB-tab!!!

    Tab-inception! : O
    I'm also a TAB-tab, hello! o/

    Gotta write more because of size issues : P
    .


'What's with the gigantic space?' I don't know, maybe one of my changes triggered that, I'm not exactly willing to spend more hours just trying to figure that out XD
Maybe senpai-Ictora can help me? OWO (Also, thanks for the hacky dividers, I use these everywhere now <3)
EDIT: It was so simple I feel silly now >w<

Tho, I don't plan to use these or anything, It was more a challenge to see how far on this crazy idea I could get!
(Also, IDK anything about hovers, so I let them be~)
It surprisingly doesn't look terrible on mobile : O

Code:
[Tabs]
[Tab=Tab 1]This is a Tab.

[div=max-width: 100%; margin: 0;][div=margin-bottom: 10px; overflow: auto;][div=float: left; padding: 1px 10px 1px 10px; background-color: #AAAAAA; margin-right: 4px; margin-left: 40px; border: 1px solid #373737;][URL='https://www.rpnation.com/threads/nessy-plays-with-bbcode-simple-occasional-experiments.317219/#tab-tab1'][B][COLOR=rgb(255, 255, 255)][SIZE=3]TAB-tab 1[/SIZE][/COLOR][/B][/URL][/div][div=float: left; padding: 1px 10px 1px 10px; background-color: #AAAAAA; margin-right: 4px; border: 1px solid #373737;][URL='https://www.rpnation.com/threads/nessy-plays-with-bbcode-simple-occasional-experiments.317219/#tab-tab2'][B][COLOR=rgb(255, 255, 255)][SIZE=3]TAB-tab 2[/SIZE][/COLOR][/B][/URL][/div][/div][div=height: 90px; padding: 20px; box-sizing: border-box;][div=overflow: hidden; height: 200px; padding-top: 145px; margin-top: -170px;][div= height: 100%;][border=1.5px solid #535353; height:0; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/border][div=padding: 0px 0px 0px 10px;]Hey there! I am a TAB-tab!!!

Tab-inception! : O[/div][bg=#535353; height:1px; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/bg][div=font-size: 0;][fa]a[fa]id=tab-tab1[/fa][/fa][/div][div=height: 200px; margin-top: 155px; padding-right: 99px; width: 100%;][border=1.5px solid #535353; height:0; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/border][div=padding: 0px 0px 0px 10px;]Hey there! I am a TAB-tab!!!

Tab-inception! : O[/div][bg=#535353; height:1px; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/bg][div=font-size: 0;][fa]a[fa]id=tab-tab2[/fa][/fa][/div][div=height: 200px; margin-top: 155px; padding-right: 99px; width: 100%;][border=1.5px solid #535353; height:0; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/border][div=padding: 0px 0px 0px 10px;]I'm also a TAB-tab, hello! o/

Gotta write more because of size issues : P[/div][bg=#535353; height:1px; padding:0; margin-top:10px; margin-bottom:10px;][bg=transparent; display:none;].[/bg][/bg][/div][/div][div=height: 100vh; visibility: hidden;].[/div][/div][/div][/div][/div][/Tab]

[Tab=Tab 2]Heeeeey! I am also a tab![/Tab][/Tabs]
(Warning, it is pretty messy...)
 
Last edited:
Nested Tabs
As a follow up to my last post, I had used Ictora's tab substitution to make them more like the actual tabs, so we could get a double tab system! Which was very fun to do, but then somewhere in July they stopped working, which I guess it's because the codes suffered an update or something like that (the code in the first creation had broken as well).

Then, I'm stomped with how to fix this, when I go through this PM I have with a friend and then I gasp because HOLY MACARONI B Bag o Fruit managed to do the impossible! With just a column. I don't think he understands how amazing this FREAKING is!! : O
So yeah, all credit to him, I just had the audacity to go through it and remove all of the extra tags and make it into something a lot more simple because it was a CS before!! (actually multiple CS's)

Here we go! Someone could find this information useful:


  • This is a Tab.

    • Hey there! I am a TAB-tab!!!

      Tab-inception! : O

Code:
[row][column=span8]
[Tabs][Tab=Tab 1]This is a Tab.

[Tabs][Tab=Tab-Tab 1]Hey there! I am a TAB-tab!!!

Tab-inception! : O[/Tab]

[Tab=Tab-Tab 2]I'm also a TAB-tab, hello! o/
[/Tab][/Tabs][/Tab]

[tab=Tab 2]Heeeeey! I am also a tab![/Tab]

[/tabs][/column][/row]
Yeah, it's mostly just a 8 span column... CRAZY RIGHT?!
 
CLICK HERE FOR UPDATED VERSION

Okay, context.
I was asked to do a little card that we could use in AEGIS to display NPCs on posts. Simple as that. And I had been experimenting a lot with divs at the time and thus, that's what I played with to do these.

I made them for AEGIS so I didn't really saw the point on putting them anywhere else, until a fellow player asked to use it as a post layout for another RP, which made me think that maybe people would like to see these and maybe find them useful too, so here I am.
I wanted to have done this waaaaay before but hahaha, I'm lazy:

Header:
ffd377367e19eaf59d578f2d455862e3.jpg

--Spot 1--

Sub-Spot 1

--Spot 2--

Sub-Spot 2

So yeah, I made them to be small and compact, but feel free to make it bigger, take the rounded borders out, change colors and fonts, just go crazy with it! And if you need help, I'd love to assist! OWO7 (I know it's a rather complex code...)
DIVs are SOOO fun to play with! I love them!! ^D^

Some Usage Tips:
  • The more extensive the header text, the less pixels for the padding-right function and vice versa. For a centered header, just take the text out of the div. That div is only there to keep the header from being centered in the first place,
  • If you want a rounded border by the left, where the image goes, I suggest you actually cut the image there with a round border, otherwise, the border in the corners disappears behind the image,
  • Different images = Different border heights, for both inner divs with borders.
    One trick is making the inner borders color the same one as the image background so it kinda blends into it, in case the image height is too big. This saves the need to edit ONE of the border heights!! (Hurray to being lazy~)
  • Not mobile compatible, needs an update.
Code:
[CENTER][Div=Width: 600px; Height: 280px; background-color: lightblue; padding: 8px 12px 10px 10px; border-radius: 10px; border:2px solid navy; display: inline-block;][div=padding-right: 510px;][FONT=Comfortaa][SIZE=5]Header here[/SIZE][/FONT][/div][row][column=span3][div=border: 2px solid #454545; padding-bottom: 0px; height: 233px; margin-top: 10px;][IMG]https://s-media-cache-ak0.pinimg.com/564x/ff/d3/77/ffd377367e19eaf59d578f2d455862e3.jpg[/IMG][/div][/column][div=border: 2px solid #454545; border-radius: 10px; padding-top: 30px; height: 203px; margin-left: 15px; margin-right: 5px; margin-top: 10px;][column=span2]
[B][FONT=Comfortaa][SIZE=6]--Spot 1--[/SIZE][/FONT]

[FONT=Comfortaa][SIZE=5]Sub-Spot 1[/SIZE][/FONT]
[/column][column=span3]
[B][SIZE=6][FONT=Comfortaa]--Spot 2--[/FONT][/SIZE][/B]

[FONT=Comfortaa][SIZE=5]Sub-Spot 2[/SIZE][/FONT]
[/column][/div][/row][/div][/CENTER]
 
Last edited:
Hover Character Display
I did this one for the BBCode Game thread! It was inspired by game character-select screens and could be used for the intro of an RP or something like that, just some cool graphics I guess >w<
HERE is post in the thread if you want to know more about how this came to be~

All partitions have a hover and every info box has an auto overflow, so they scroll! +O+
Sadly you can't see it on mobile, maybe one day~ [class=wrapper] width:1000px; height:500px; margin:auto; background-color:#000000; border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; border: 10px solid #000000; [/class] [class=box1] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#baa989; border-right:10px solid #000000; border-top-left-radius: 13px; border-bottom-left-radius: 13px; padding:5px; [/class] [class=boxhover1] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:360px; transition: all 1.2s; margin: 106px -5px -5px -5px; background-color:#000; background-position: 80% 5%; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover1 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-image: url(https://orig00.deviantart.net/3eb8/f/2018/032/a/9/52711408_p0_master1200_by_necessity4fun-dc1uqv5.jpg); background-size: 450px 683px; background-size: no-repeat; border-right:10px solid #000000; border-top-left-radius: 13px; border-bottom-left-radius: 13px; padding:5px; [/class] [class=box2] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#eee0cb; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover2] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:360px; transition: all 1.2s; margin: 106px -5px -5px -5px; background-color:#000; background-position: 25% 5%; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover2 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-image: url(https://68.media.tumblr.com/tumblr_ldsymgvbIg1qfrzfao1_r1_540.jpg); background-size: 350px 575px; background-size: no-repeat; border-right:10px solid #000000; padding:5px; [/class] [class=box3] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#839788; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover3] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:360px; transition: all 1.2s; margin: 106px -5px -5px -5px; background-color:#000; background-position: 20% 0%; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover3 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-image: url(https://orig00.deviantart.net/3c0e/f/2018/032/d/5/shibuya_rin_full_1788396_by_necessity4fun-dc1uqu3.jpg); background-size: 362px 550px; background-size: no-repeat; border-right:10px solid #000000; padding:5px; [/class] [class=box4] display:inline-block; vertical-align:top; width:calc(25% - 10px); height:490px; background-color:#bfd7ea; border-top-right-radius: 13px; border-bottom-right-radius: 13px; padding:5px; [/class] [class=boxhover4] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:360px; transition: all 1.2s; margin: 106px -5px -5px -5px; background-color:#000; background-position: 60% 0%; padding:5px; [/class] [class name=boxhover4 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-image: url(https://i.pinimg.com/736x/30/fd/a2/30fda20858835355f833fb77b3ec9ab7--anime-guys-anime-manga.jpg); background-size: 285px 562px; background-size: no-repeat; border-top-right-radius: 13px; border-bottom-right-radius: 13px; padding:5px; [/class] [class=infobox] overflow: hidden; opacity:0.9; width: 200px; height: 122px; margin: 287px -5px -5px 6px; background-color: #baa989; border: 5px solid Chocolate; border-radius: 13px; padding: 5px; [/class] [class=info1] overflow-y: scroll; opacity:0.9; width: 225px; height: 122px; background-color: #baa989; padding: 0px; [/class] [class=infobox2] overflow: hidden; opacity:0.8; width: 200px; height: 122px; margin: 290px -5px -5px 6px; background-color: #eee0cb; border: 5px solid Grey; border-radius: 13px; padding: 5px; [/class] [class=info2] overflow-y: scroll; opacity:0.9; width: 225px; height: 122px; background-color: #eee0cb; padding:0px; [/class] [class=infobox3] overflow: hidden; opacity:0.8; width: 200px; height: 122px; margin: 285px -5px -5px 6px; background-color: #ffb3db; border: 5px solid #478559; border-radius: 13px; padding: 5px; [/class] [class=info3] overflow-y: scroll; opacity:0.9; width: 225px; height: 122px; background-color: #ffb3db; padding:0px; [/class] [class=infobox4] overflow: hidden; opacity:0.8; width: 200px; height: 122px; margin: 293px -5px -5px 6px; background-color: #bfd7ea; border: 5px solid Steelblue; border-radius: 13px; padding: 5px; [/class] [class=info4] overflow-y: scroll; opacity:0.9; width: 225px; height: 122px; background-color: #bfd7ea; padding:0px; [/class]

[div class=wrapper][div class=box1]asd[div class=boxhover1]
Aiden
[div class=infobox][div class=info1]Age: Fifteen
Nationality: American-Canadian
Rank: D
Power: Ink Manipulation
Codename: Jotter
[/div][/div][/div][/div][div class=box2]asd[div class=boxhover2]
Cecilia
[div class=infobox2][div class=info2]Age: Fifteen
Nationality: Italian
Rank: B
Power: Air Manipulation
Codename: Mistral
[/div][/div][/div][/div][div class=box3]asd[div class=boxhover3]
Juliana
[div class=infobox3][div class=info3]Age: Nineteen
Nationality: Polish-Brazilian
Rank: C
Power: Light Manipulation/Solid Light Blasters
Codename: Prism
[/div][/div][/div][/div][div class=box4]asd[div class=boxhover4]
Kendrick
[div class=infobox4][div class=info4]Age: Sixteen
Nationality: British
Rank: D
Power: Toy Manipulation
Codename: The Conductor
[/div][/div][/div][/div][/div]

Code:
[nobr]
[class=wrapper]
width:1000px;
height:500px;
margin:auto;
background-color:#000000;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 10px solid #000000;
[/class]

[class=box1]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#baa989;
border-right:10px solid #000000;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
padding:5px;
[/class]

[class=boxhover1]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:360px;
transition: all 1.2s;
margin: 106px -5px -5px -5px;
background-color:#000;
background-position: 80% 5%;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover1 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-image: url(https://orig00.deviantart.net/3eb8/f/2018/032/a/9/52711408_p0_master1200_by_necessity4fun-dc1uqv5.jpg);
background-size: 450px 683px;
background-size: no-repeat;
border-right:10px solid #000000;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
padding:5px;
[/class]

[class=box2]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#eee0cb;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover2]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:360px;
transition: all 1.2s;
margin: 106px -5px -5px -5px;
background-color:#000;
background-position: 25% 5%;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover2 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-image: url(https://68.media.tumblr.com/tumblr_ldsymgvbIg1qfrzfao1_r1_540.jpg);
background-size: 350px 575px;
background-size: no-repeat;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box3]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#839788;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover3]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:360px;
transition: all 1.2s;
margin: 106px -5px -5px -5px;
background-color:#000;
background-position: 20% 0%;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover3 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-image: url(https://orig00.deviantart.net/3c0e/f/2018/032/d/5/shibuya_rin_full_1788396_by_necessity4fun-dc1uqu3.jpg);
background-size: 362px 550px;
background-size: no-repeat;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box4]
display:inline-block;
vertical-align:top;
width:calc(25% - 10px);
height:490px;
background-color:#bfd7ea;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
padding:5px;
[/class]

[class=boxhover4]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:360px;
transition: all 1.2s;
margin: 106px -5px -5px -5px;
background-color:#000;
background-position: 60% 0%;
padding:5px;
[/class]

[class name=boxhover4 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-image: url(https://i.pinimg.com/736x/30/fd/a2/30fda20858835355f833fb77b3ec9ab7--anime-guys-anime-manga.jpg);
background-size: 285px 562px;
background-size: no-repeat;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
padding:5px;
[/class]

[class=infobox]
overflow: hidden;
opacity:0.9;
width: 200px;
height: 122px;
margin: 287px -5px -5px 6px;
background-color: #baa989;
border: 5px solid Chocolate;
border-radius: 13px;
padding: 5px;
[/class]

[class=info1]
overflow-y: scroll;
opacity:0.9;
width: 225px;
height: 122px;
background-color: #baa989;
padding: 0px;
[/class]

[class=infobox2]
overflow: hidden;
opacity:0.8;
width: 200px;
height: 122px;
margin: 290px -5px -5px 6px;
background-color: #eee0cb;
border: 5px solid Grey;
border-radius: 13px;
padding: 5px;
[/class]

[class=info2]
overflow-y: scroll;
opacity:0.9;
width: 225px;
height: 122px;
background-color: #eee0cb;
padding:0px;
[/class]

[class=infobox3]
overflow: hidden;
opacity:0.8;
width: 200px;
height: 122px;
margin: 285px -5px -5px 6px;
background-color: #ffb3db;
border: 5px solid #478559;
border-radius: 13px;
padding: 5px;
[/class]

[class=info3]
overflow-y: scroll;
opacity:0.9;
width: 225px;
height: 122px;
background-color: #ffb3db;
padding:0px;
[/class]

[class=infobox4]
overflow: hidden;
opacity:0.8;
width: 200px;
height: 122px;
margin: 293px -5px -5px 6px;
background-color: #bfd7ea;
border: 5px solid Steelblue;
border-radius: 13px;
padding: 5px;
[/class]

[class=info4]
overflow-y: scroll;
opacity:0.9;
width: 225px;
height: 122px;
background-color: #bfd7ea;
padding:0px;
[/class]
[/nobr]

[div class=wrapper][div class=box1][COLOR=Transparent]asd[/COLOR][div class=boxhover1][CENTER][FONT=Calligraffitti][COLOR=#c9641d][SIZE=32px][B]Aiden[/B][/SIZE][/COLOR][/FONT][/CENTER][div class=infobox][div class=info1][B]Age:[/B] Fifteen
[B]Nationality:[/B] American-Canadian
[B]Rank:[/B] D
[B]Power:[/B] Ink Manipulation
[B]Codename:[/B] Jotter
[CENTER][URL='https://www.rpnation.com/threads/fowler-a.345366/#post-8043513'][B][U]Full Bio[/U][/B][/URL][/CENTER][/div][/div][/div][/div][div class=box2][COLOR=Transparent]asd[/COLOR][div class=boxhover2][CENTER][FONT=Gloria Hallelujah][COLOR=#737373][SIZE=30px][B]Cecilia[/B][/SIZE][/COLOR][/FONT][/CENTER][div class=infobox2][div class=info2][B]Age:[/B] Fifteen
[B]Nationality:[/B] Italian
[B]Rank:[/B] B
[B]Power:[/B] Air Manipulation
[B]Codename:[/B] Mistral
[CENTER][URL='https://www.rpnation.com/threads/pellegrini-c.248729/#post-5010763'][B][U]Full Bio[/U][/B][/URL][/CENTER][/div][/div][/div][/div][div class=box3][COLOR=Transparent]asd[/COLOR][div class=boxhover3][CENTER][FONT=Clicker Script][COLOR=#e6007a][SIZE=34px][B]Juliana[/B][/SIZE][/COLOR][/FONT][/CENTER][div class=infobox3][div class=info3][B]Age:[/B] Nineteen
[B]Nationality:[/B] Polish-Brazilian
[B]Rank:[/B] C
[B]Power:[/B] Light Manipulation/Solid Light Blasters
[B]Codename:[/B] Prism
[CENTER][URL='https://www.rpnation.com/threads/alvarenga-j.285101/#post-7273729'][B][U]Full Bio[/U][/B][/URL][/CENTER][/div][/div][/div][/div][div class=box4][COLOR=Transparent]asd[/COLOR][div class=boxhover4][CENTER][FONT=Finger Paint][COLOR=#5a91bf][SIZE=26px][B]Kendrick[/B][/SIZE][/COLOR][/FONT][/CENTER][div class=infobox4][div class=info4][B]Age:[/B] Sixteen
[B]Nationality:[/B] British
[B]Rank:[/B] D
[B]Power:[/B] Toy Manipulation
[B]Codename:[/B] The Conductor
[CENTER][URL='https://www.rpnation.com/threads/haywood-k.248664/#post-6652009'][B][U]Full Bio[/U][/B][/URL][/CENTER][/div][/div][/div][/div][/div]
 
Last edited:
Dual Display Card
This one is a follow-up from the old NPC Cards two posts up. It was done around the same time with a similar idea and has been revamped recently to actually be readable on mobile to inspire a post layout I'll be posting shortly.
It's good for when you're playing two characters on a single post and by making the background and border transparent you can maintain the structure of it without a huge color block~!

And yes, this is where mobile compatibility and theme compatibility started becoming a concern for me (And takes about half of the coding time now XDD), in this one, the addition of the margin makes them not stay exactly under each other (might come back to it at a later date), but at least you can see and read it all >w<

Update Notes:
  • 05/20/19: Last Xenforo update seems to have tweaked the post dimension themselves, code had to be updated for the second name to align properly under the image again.


The Pellegrinis

tablita_by_necessity4fun-dbf3oax.png

Tablita
edmondo_by_necessity4fun-dbf3oba.png













iiEdmondo

Code:
[CENTER][Div=Width: 65.5%; Height: 100%; background-color: darkgrey; padding: 12px 20px 0px 22px; border-radius: 50px; border:2px solid grey; display: inline-block; overflow: hidden;][SIZE=32px][FONT=Inconsolata][COLOR=#00b300]The[/COLOR] [COLOR=#ffffff]Pelle[/COLOR][COLOR=rgb(255, 0, 0)]grinis[/COLOR][/FONT][/SIZE]

[row][column=span4][div=border: 2px solid darkcyan; display: inline-block; margin-bottom: 0px;][HEIGHTRESTRICT=305][IMG]http://orig04.deviantart.net/973f/f/2017/185/3/1/tablita_by_necessity4fun-dbf3oax.png[/IMG][/HEIGHTRESTRICT][/div]
[SIZE=28px][FONT=Marck Script][COLOR=Darkcyan][B]Tablita[/B][/COLOR][/FONT][/SIZE][/column][column=span4][div=border: 2px solid Forestgreen; display: inline-block; float: left; margin-left: 6.7%; margin-bottom: 8px;][HEIGHTRESTRICT=305][IMG]http://orig06.deviantart.net/2cbe/f/2017/185/a/d/edmondo_by_necessity4fun-dbf3oba.png[/IMG][/HEIGHTRESTRICT][/div]
[div=margin-top: -20px;][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][SIZE=24px][FONT=Schoolbell][COLOR=Forestgreen][COLOR=Transparent]ii[/COLOR][B]Edmondo[/B][/COLOR][/FONT][/SIZE][/div][/column][/row][/div][/CENTER]
 
Last edited:
Student Card Layout
From the one above, I made it onto a full post layout for a High School RP. Inspired by the school theme, I wanted to make a little Student ID card on the layout! It has been accomplished, yay!

It's 100% mobile and theme compatible, featuring a hidden scroller in the information paragraph for that very purpose. I think this is one of my favorite layouts thus far~

Nickolaus Morris Caeg

nickolausedited_by_necessity4fun-dcmj8cw.png
Age: 17

Horoscope: Aries

Birthday: April 17th

Class: 3-A

Club: Astronomy

Height: 5' 6'' (167cm)
Location: TBA
Text goes here.

Code:
[Div=Width: 70%; Height: 100%; background-color: #b3d9e6; padding: 10px 25px 20px 25px; border-radius: 25px 25px 0px 0px; border:2px solid Teal; overflow: hidden; margin: auto;][bg=Teal; height:1px; padding:0][bg=transparent; display:none;].[/bg][/bg][CENTER][SIZE=32px][FONT=Concert One][COLOR=#28292E]Nickolaus Morris Caeg[/COLOR][/FONT][/SIZE][/CENTER]
[bg=Teal; height:1px; padding:0][bg=transparent; display:none;].[/bg][/bg]
[row][column=span3][div=border: 2px solid Teal; border-radius: 10px; display: inline-block; margin-top: 5px; overflow: hidden; margin-left: 10px;][HEIGHTRESTRICT=320][IMG]https://orig00.deviantart.net/dc54/f/2018/253/e/8/nickolausedited_by_necessity4fun-dcmj8cw.png[/IMG][/HEIGHTRESTRICT][/div][/column][column=span5][div=border: 2px solid Teal; width: 95%; height: 320px; border-radius: 10px; display: inline-block; margin-left: 8px; margin-top: 5px; overflow: hidden;][div=width: 101%; height: 100%; overflow-y: scroll; padding-right: 16px;][div=margin-top: 12px;][CENTER][COLOR=#28292E][FONT=Concert One][SIZE=16px]Age:[/SIZE][/FONT] 17

[FONT=Concert One][SIZE=16px]Horoscope:[/SIZE][/FONT] Aries

[FONT=Concert One][SIZE=16px]Birthday:[/SIZE][/FONT] April 17th

[FONT=Concert One][SIZE=16px]Class:[/SIZE][/FONT] 3-A

[FONT=Concert One][SIZE=16px]Club:[/SIZE][/FONT] Astronomy

[FONT=Concert One][SIZE=16px]Height:[/SIZE][/FONT] 5' 6'' (167cm)[/COLOR][/CENTER][/div][CENTER][/CENTER]
[bg=Teal; height:1px; padding:0; margin-left: 12px;][bg=transparent; display:none;].[/bg][/bg][div=margin-top: 2px; margin-left: 11px;][CENTER][COLOR=#28292E][FONT=Concert One][SIZE=16px]Location:[/SIZE][/FONT] TBA[/COLOR][/CENTER][/div][/div][/div][/column][/row][/div][div=width: 73%; margin: auto; border-width: 0px 5px 5px 5px; border-style: double; border-color: Teal; border-radius: 0px 0px 25px 25px; padding: 15px 6px; 15px; 6px;][JUSTIFY]Text goes here.[/JUSTIFY][/div]
 
Last edited:
Flexbox CS Layout
And this is my first experiment with flexboxes! Not using the shrinking and expanding options yet, but more on the concern of moving elements here and there and still making everything readable. (wrapping property)

Percentage of success? 90%
Everything works on the first tab (though I cheated a little by using z-index to overlap text on the image), but on the second one I was forced to add the accordians for mobile readability. It looks a little bit squashed, but hey! You can read it! On the concern of theme compatibility, overlapping white text on a yellow background looks weird. Easy fix with a background there (just remember to set the text to a visible color), but doing that would ruin the aesthetic of the whole thing IMO.

Everything has hidden scrolls! (I love them soooo much +O+)

  • Name: Rosemarie Holtzer
    Age: 18
    Gender: Female
    Occupation: High School Student

    Personality: Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline.
    On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.


    History
    The day her father decided to try politics and won was Rosemarie's doomsday.

    Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened.
    Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

    Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

    That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

    To say that she was hooked would be an understatement.

    From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must!
    With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.
    065764eb40354818824ae03b1fcbc8c5.jpg

Code:
[TABS][TAB=Content to the Left][div=width: 100%; min-height: 435px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between;][div=border: 3px dashed #B87EE9; padding: 10px 10px 10px 15px; width: 612px;][B]Name:[/B] Rosemarie Holtzer
[B]Age:[/B] 18
[B]Gender:[/B] Female
[B]Occupation:[/B] High School Student[/div]
[div=border: 3px dashed #8DBCCE; padding: 10px 10px 10px 15px; width: 612px; margin-top: 28px; height: 289px; z-index: 1][div=width: 100%; height: 100%; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline. 
On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.

[border=1px solid hotpink; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[B]History[/B]
[div= margin-bottom: 13px;]The day her father decided to try politics and won was Rosemarie's doomsday.

Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened. 
Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

To say that she was hooked would be an understatement.

From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must! 
With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.[/div][/div][/div][/div][div=border: 3px dashed #EB8D31; padding: 10px 10px 6px 10px; width: 355px; height: 100%; margin-top: -10.9%; z-index: 0;][IMG]https://i.pinimg.com/564x/06/57/64/065764eb40354818824ae03b1fcbc8c5.jpg[/IMG][/div][/div][/TAB]

[TAB=Content to the Right][div=width: 100%; min-height: 460px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between; padding-left: 5px;][div=border: 5px double #6495ED; padding: 10px 10px 6px 10px; width: 379px;][IMG]http://orig05.deviantart.net/0ae9/f/2016/275/9/8/legs_black_gloves_dress_long_hair_green_hair_yello_by_necessity4fun-dajnito.jpg[/IMG][/div][div=bg-color: transparent;][div=border: 5px double #D6D5B8; padding: 10px 10px 10px 15px; width: 576px; margin-left: 5px;][B]Name:[/B] Brunhildr
[B]Apparent Age:[/B] Late 20s, Early 30s-ish
[B]Race:[/B] Undine 
[B]Gender:[/B] Female[/div]
[div=border: 5px double #F2D357; padding: 10px 10px 10px 15px; width: 576px; margin-top: -4px; margin-left: 1vh; position: relative;][div=width: 100%; height: 333px; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned. 
Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[div=margin-bottom: 16px;][B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual. 
Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div][/div][/div][/div]
[div=margin-top: -22px; margin-bottom: -20px; margin-left: -7px; width: 100%;][border=0px solid transparent][accordion=39%]
{slide=[bg=#6495ED][CENTER]Personality and Accolades [For Mobile][/CENTER][/bg]}[div=width: 100%; height: 220px; overflow: hidden;][div=overflow-y: scroll; height: 100%; width: 101%; padding-right: 20px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned. Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: -10px; margin-left: 5px;][bg=transparent; display:none;].[/bg][/border]
[B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual. Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div]{/slide}
[/accordion][/border][/div][div=margin-top: -64px; margin-bottom: -18px; margin-left: 421px; width: 100%;][border=0px solid transparent][accordion=99%]
{slide=[bg=#F2D357][COLOR=Transparent].[/COLOR][/bg]}{/slide}[/accordion][/border][/div][/div][/TAB][/TABS]
 
Last edited:
Minimalistic CS Layout
Inspired by another CS layout the GM was using. I tried making something that was a similar aesthetic, just better mobile compatible. (No offence though, it's really pretty! +O+)

I don't advise keeping all the text in the same scroll box though, this amount is fine, but a lot of text would make scrolling into a chore ^^' (Use tabs~~)

Image and text cut at the exact same place (everything is straight and nice~~), there's a hidden scroller and a stationary div for the color block header. That's it, very minimalistic >w<
100% mobile and theme compatibility FTW~!

Nickolaus.png

Nickolaus Caeg
17/Male
Full Name: Nickolaus Morris Caeg
Nicknames: Nic, Nick, Nicholas. (He doesn't really like these) Ca, Cae.
Horoscope: Aries
Birthday: April 17th
Age: 17
Class: 3-A
Club: Astronomy
Gender: Male
Sexuality: Homosexual
Height: 5' 6'' (167cm)
Blood Type: AB-
Likes: Reading, stargazing, science, tidiness, correcting people, being praised, peace and quiet.
Dislikes: Being questioned, being corrected, having to admit he's wrong, small talk, the truly dumb ones, chaos and disorder.

Personality: Nickolaus is the type of person that knows they’re smarter than most and doesn’t try to hide it, quite the opposite, it’s more like the teenager takes pride in showing off at every given opportunity. He will fix everyone’s typos and grammar on the go, yet not actually teach the other person about what they did wrong. That is unless they express confusion over it, then you can expect this guy to do so, nonchalantly, as if it was the most obvious and basic thing of the world. If they feel dumb, congratulations! Objective completed!
If correcting typos weren’t enough, Nickolaus is the perfect example of an annoying know-it-all, spouting trivia no one has asked for every other time, even about subjects he doesn’t quite understand all that much. If it turns out he’s wrong? Welp, forget admitting things! His ego just wouldn’t allow it, nah, the most you get is a half-made excuse and a change of subject… Oh, and if he’s ever put ‘against a wall’ for whatever might be the reason, he lashes out.

See, Cae likes to think that he’s got it all going for him, that he’s the center of the world and should be treated as such. To be suddenly pulled down from his delusional pedestal is an attack worse than death and so when it happens, Nickolaus feels personally threatened, cornered and things are blown irrationally out of proportion. That when harsh truths are usually said under scoffs. There’s not really a distinction between friend and enemy at this point, there’s just him and his wounded, aching ego. If it takes dragging someone else down to the mud to fix this, then so be it.

In contrast to the teen’s harsh, ice-cold core, the usual Nickolaus is at a first glance, just an annoying geek, who takes delight in correcting people and is a big suck-up for the rules. Oh yeah, don’t let this fellow see anyone break any type of moral code or school rules, he won’t hesitate to tattle on people either.

Trivia:
Of Phillipine descent;
Avoids talking about family;
Aims to study Astrophysics in college;
Part of the Academic Decathlon team;
Knows every single constellation by memory;
Slightly Narcisistic and Sociopathical in nature;
Has a knack for ‘hitting where it hurts’ in arguments;
His last name, Caeg, means 'a boastful person' in Ilocano (one of the many Phillipine dialects).

Code:
[centerblock=70][row][column=span3][IMG]Put an image here, mine is an attachment~[/IMG][/column][column=span5][div=width: 100%; height 200px; overflow: hidden; margin: auto;][div=width: 101%; height: 381px; overflow-y: scroll; padding-right: 12px;][div=background-color: Teal; position: relative; padding-bottom: 20px; margin-bottom: 10px;]
[CENTER][FONT=Concert One][SIZE=30px]Nickolaus Caeg[/SIZE]
[SIZE=22px]17/Male[/SIZE][/FONT][/CENTER][/div]
[B]Full Name:[/B] Nickolaus Morris Caeg
[B]Nicknames:[/B] Nic, Nick, Nicholas. [I](He doesn't really like these)[/I] Ca, Cae.
[B]Horoscope:[/B] Aries
[B]Birthday:[/B] April 17th
[B]Age:[/B] 17
[B]Class:[/B] 3-A
[B]Club:[/B] Astronomy
[B]Gender:[/B] Male
[B]Sexuality:[/B] Homosexual
[B]Height:[/B] 5' 6'' (167cm)
[B]Blood Type:[/B] AB-
[B]Likes:[/B] Reading, stargazing, science, tidiness, correcting people, being praised, peace and quiet.
[B]Dislikes:[/B] Being questioned, being corrected, having to admit he's wrong, small talk, the truly dumb ones, chaos and disorder.

[B]Personality:[/B] Nickolaus is the type of person that knows they’re smarter than most and doesn’t try to hide it, quite the opposite, it’s more like the teenager takes pride in showing off at every given opportunity. He will fix everyone’s typos and grammar on the go, yet not actually teach the other person about what they did wrong. That is unless they express confusion over it, then you can expect this guy to do so, nonchalantly, as if it was the most obvious and basic thing of the world. If they feel dumb, congratulations! Objective completed!
If correcting typos weren’t enough, Nickolaus is the perfect example of an annoying know-it-all, spouting trivia no one has asked for every other time, even about subjects he doesn’t quite understand all that much. If it turns out he’s wrong? Welp, forget admitting things! His ego just wouldn’t allow it, nah, the most you get is a half-made excuse and a change of subject… Oh, and if he’s ever put ‘against a wall’ for whatever might be the reason, he lashes out.

See, Cae likes to think that he’s got it all going for him, that he’s the center of the world and should be treated as such. To be suddenly pulled down from his delusional pedestal is an attack worse than death and so when it happens, Nickolaus feels personally threatened, cornered and things are blown irrationally out of proportion. That when harsh truths are usually said under scoffs. There’s not really a distinction between friend and enemy at this point, there’s just him and his wounded, aching ego. If it takes dragging someone else down to the mud to fix this, then so be it.

In contrast to the teen’s harsh, ice-cold core, the usual Nickolaus is at a first glance, just an annoying geek, who takes delight in correcting people and is a big suck-up for the rules. Oh yeah, don’t let this fellow see anyone break any type of moral code or school rules, he won’t hesitate to tattle on people either.

[B]Trivia:[/B]
[FA]fa-angle-double-right[/FA] Of Phillipine descent;
[FA]fa-angle-double-right[/FA] Avoids talking about family;
[FA]fa-angle-double-right[/FA] Aims to study Astrophysics in college;
[FA]fa-angle-double-right[/FA] Part of the Academic Decathlon team;
[FA]fa-angle-double-right[/FA] Knows every single constellation by memory;
[FA]fa-angle-double-right[/FA] Slightly Narcisistic and Sociopathical in nature;
[FA]fa-angle-double-right[/FA] Has a knack for ‘hitting where it hurts’ in arguments;
[FA]fa-angle-double-right[/FA] His last name, Caeg, means 'a boastful person' in Ilocano (one of the many Phillipine dialects).[/div][/div][/column][/row][/centerblock]
 
Last edited:
Image DIV Experiments
And now... For a returning contender! Hover effects! Also a new fun function, 8 value borders~

I don't have an explanation other than I was filling out a CS and kept making the code more complicated just for fun XD
So, welian showed me I could do these things with the borders (check their visual border tool too, it's useful~!) and I'm glad she did because they make divs a lot more cool. I was dying to try it out and one of the images I had for this one character was perfect for it!

That's how it started. And then I wanted to change images on hover, and later I wondered if I could ovelap them to make other shapes... Well, these are the results.

These are not mobile compatible, like, at all... (especially the last one >o<) Maybe if I make them smaller by using vh instead of px, but eh, that remains to be seem. Definitely coming back to these once I know more about responsive design (the art of making things device and browser compatible) >w<


--Change border-radius and Image Upon Hover--
Go on, put your mouse there and wait for a while~​

[class=Nolanhover] margin: auto; width: 40%; height: 48.5vh; border-radius: 10% 57% 14% 60% / 33% 38% 50% 58%; background-image:url(https://orig00.deviantart.net/f369/f/2018/292/1/0/_bright_sunshower__sora_harukawa_full_render_bloom_by_necessity4fun-dcptj0f.png); background-size: 95%; background-repeat: no-repeat; border: 8px outset #6C5497; [/class] [class name=Nolanhover state=hover] height: 48.5vh; border-radius: 43% 57% 51% 56% / 45% 42% 59% 58%; transition: border-color 1.5s ease-out 0.6s, border-radius 1s ease-in 0.3s, background-color 0.2s linear 0.02s; background-image: url(https://orig00.deviantart.net/221f/f/2018/292/7/0/sora_harukawa_switch_dialogue_render_by_necessity4fun-dcptiyr.png); background-size: no-repeat; background-size: 70%; background-position: 70% 0%; border-color: #95D743; background-color: #FFF1BA; [/class]
[div class=Nolanhover]
[/div]
Code:
[nobr][class=Nolanhover]
margin: auto;
width: 40%;
height: 48.5vh; 
border-radius: 10% 57% 14% 60% / 33% 38% 50% 58%; 
background-image:url(https://orig00.deviantart.net/f369/f/2018/292/1/0/_bright_sunshower__sora_harukawa_full_render_bloom_by_necessity4fun-dcptj0f.png); 
background-size: 95%; 
background-repeat: no-repeat; 
border: 8px outset #6C5497;
[/class]

[class name=Nolanhover state=hover]
height: 48.5vh; 
border-radius: 43% 57% 51% 56% / 45% 42% 59% 58%;
transition: border-color 1.5s ease-out 0.6s, border-radius 1s ease-in 0.3s, background-color 0.2s linear 0.02s;
background-image: url(https://orig00.deviantart.net/221f/f/2018/292/7/0/sora_harukawa_switch_dialogue_render_by_necessity4fun-dcptiyr.png);
background-size: no-repeat;
background-size: 70%;
background-position: 70% 0%;
border-color: #95D743;
background-color: #FFF1BA;
[/class]

[/nobr][div=position: relative;][div class=Nolanhover][/div][/div]


--Overlap with the Same Image--
Very very fickle, changing positions at all will make it so I need to overlap them nicely again...
Not advised for code newbies, it's sorta frustrating even ^^' (Just fit perfectly, dammit! XD)
Not even properly visible on mobile : V



Captura de tela 2018-10-21 15.09.22.png
Code:
[nobr][div=margin: auto; border-radius: 10% 50% 10% 50% / 30% 10% 30% 10%; border-width: 6px; border-style: dotted; border-color: #1BA6F1 Transparent #1BA6F1 #1BA6F1; width: 40%; height: 300px; background-image:url("https://orig00.deviantart.net/e6f3/f/2018/292/6/9/8f4225657647a28571ac3cc4a0241150_by_necessity4fun-dcptj03.jpg"); background-position: 100% 25%; background-size: cover; z-index: 0;][/div]

[div=position: relative; border-radius: 10% 50% 10% 50% / 30% 10% 30% 10%; width: 20%; height: 300px; background-image:url("https://orig00.deviantart.net/e6f3/f/2018/292/6/9/8f4225657647a28571ac3cc4a0241150_by_necessity4fun-dcptj03.jpg"); background-position: 107% 85%; background-size: 195%; background-repeat: no-repeat; margin-left: 51%; margin-top: -188px; z-index: 1;][/div]

[div=position: relative; border-radius: 10% 0% 10% 50% / 30% 10% 30% 10%; width: 20%; height: 288px; border-width: 6px; border-style: dotted; border-color: Transparent #1BA6F1 #1BA6F1 Transparent; margin-left: 49.5%; margin-top: -300px; z-index: 1;][/div][/nobr]
 
Last edited:
actually, now that I think about it, I do feel bad for having you track down those face-claims only for me to not need em' so I guess its only fair to make a lovely oc out of it! though I do have one little request, since you were the one who originally used the fc, could you perhaps code it up and make it nice? im still extremely new to bb-code so I can't exactly yet...I can merely tamper slightly with codes...nothing more really. I can PM you the details if you would be so kind and agree to help, if not, that's totally fine! I completely understand!
 
actually, now that I think about it, I do feel bad for having you track down those face-claims only for me to not need em' so I guess its only fair to make a lovely oc out of it! though I do have one little request, since you were the one who originally used the fc, could you perhaps code it up and make it nice? im still extremely new to bb-code so I can't exactly yet...I can merely tamper slightly with codes...nothing more really. I can PM you the details if you would be so kind and agree to help, if not, that's totally fine! I completely understand!
I don't think that's something to feel bad for (After all, I'm the one who wanted to respond to a deleted comment lol), but sure! I'd be glad to do it >w<
 
really? thank you so much! I have been tampering around with bb code some! how do put it into a spoiler so others can use it tho????
 
really? thank you so much! I have been tampering around with bb code some! how do put it into a spoiler so others can use it tho????
You're welcome~ And here's how to do it:
[SPOILER=Title here][CODE]Copy your code here[/CODE][/SPOILER]
 
And this is my first experiment with flexboxes! Not using the shrinking and expanding options yet, but more on the concern of moving elements here and there and still making everything readable. (wrapping property)

Percentage of success? 90%
Everything works on the first tab (though I cheated a little by using z-index to overlap text on the image), but on the second one I was forced to add the accordians for mobile readability. It looks a little bit squashed, but hey! You can read it! On the concern of theme compatibility, overlapping white text on a yellow background looks weird. Easy fix with a background there (just remember to set the text to a visible color), but doing that would ruin the aesthetic of the whole thing IMO.

Everything has hidden scrolls! (I love them soooo much +O+)

  • Name: Rosemarie Holtzer
    Age: 18
    Gender: Female
    Occupation: High School Student

    Personality: Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline.
    On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.


    History
    The day her father decided to try politics and won was Rosemarie's doomsday.

    Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened.
    Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

    Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

    That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

    To say that she was hooked would be an understatement.

    From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must!
    With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.
    065764eb40354818824ae03b1fcbc8c5.jpg

Code:
[TABS][TAB=Content to the Left][div=width: 100%; min-height: 435px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between;][div=border: 3px dashed #B87EE9; padding: 10px 10px 10px 15px; width: 612px;][B]Name:[/B] Rosemarie Holtzer
[B]Age:[/B] 18
[B]Gender:[/B] Female
[B]Occupation:[/B] High School Student[/div]
[div=border: 3px dashed #8DBCCE; padding: 10px 10px 10px 15px; width: 612px; margin-top: 28px; height: 289px; z-index: 1][div=width: 100%; height: 100%; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline.
On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.

[border=1px solid hotpink; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[B]History[/B]
[div= margin-bottom: 13px;]The day her father decided to try politics and won was Rosemarie's doomsday.

Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened.
Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

To say that she was hooked would be an understatement.

From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must!
With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.[/div][/div][/div][/div][div=border: 3px dashed #EB8D31; padding: 10px 10px 6px 10px; width: 355px; height: 100%; margin-top: -10.9%; z-index: 0;][IMG]https://i.pinimg.com/564x/06/57/64/065764eb40354818824ae03b1fcbc8c5.jpg[/IMG][/div][/div][/TAB]

[TAB=Content to the Right][div=width: 100%; min-height: 460px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between; padding-left: 5px;][div=border: 5px double #6495ED; padding: 10px 10px 6px 10px; width: 379px;][IMG]http://orig05.deviantart.net/0ae9/f/2016/275/9/8/legs_black_gloves_dress_long_hair_green_hair_yello_by_necessity4fun-dajnito.jpg[/IMG][/div][div=bg-color: transparent;][div=border: 5px double #D6D5B8; padding: 10px 10px 10px 15px; width: 576px; margin-left: 5px;][B]Name:[/B] Brunhildr
[B]Apparent Age:[/B] Late 20s, Early 30s-ish
[B]Race:[/B] Undine
[B]Gender:[/B] Female[/div]
[div=border: 5px double #F2D357; padding: 10px 10px 10px 15px; width: 576px; margin-top: -4px; margin-left: 1vh; position: relative;][div=width: 100%; height: 333px; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned.
Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[div=margin-bottom: 16px;][B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual.
Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div][/div][/div][/div]
[div=margin-top: -22px; margin-bottom: -20px; margin-left: -7px; width: 100%;][border=0px solid transparent][accordion=39%]
{slide=[bg=#6495ED][CENTER]Personality and Accolades [For Mobile][/CENTER][/bg]}[div=width: 100%; height: 220px; overflow: hidden;][div=overflow-y: scroll; height: 100%; width: 101%; padding-right: 20px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned. Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: -10px; margin-left: 5px;][bg=transparent; display:none;].[/bg][/border]
[B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual. Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div]{/slide}
[/accordion][/border][/div][div=margin-top: -64px; margin-bottom: -18px; margin-left: 421px; width: 100%;][border=0px solid transparent][accordion=99%]
{slide=[bg=#F2D357][COLOR=Transparent].[/COLOR][/bg]}{/slide}[/accordion][/border][/div][/div][/TAB][/TABS]
If you don't mind me asking what part do I place the images in?
 
If you don't mind me asking what part do I place the images in?
Ohh oops! I should start making my code a bit less messy, or add filler text to it, but In the first tab it is the very last div in the code and in the second tab the second one

In this code, I used the usual [IMG] tags to put them in so just locate those and you're set!

And I don't mind, I like helping~! Feel free to come back with other questions if you need to >w<
 
Ohh oops! I should start making my code a bit less messy, or add filler text to it, but In the first tab it is the very last div in the code and in the second tab the second one

In this code, I used the usual [IMG] tags to put them in so just locate those and you're set!

And I don't mind, I like helping~! Feel free to come back with other questions if you need to >w<
Thank you <3
 
NPC ID Card

Remember these? Well, they've finally been updated for mobile compatibility! And also to better accommodate most picture sizes, which makes them a lot easier to personalize and such... >w<

I dedicate this post to B Bag o Fruit the only human being that still uses these things for posts. Please stop, they're terrible and make me super self-conscious about my old coding...THEY'RE NOT EVEN PROPERLY CENTERED AAAA XDD
I've updated them just for you~

Update Notes:
  • 02/10/19: Generalized labels. Added overflow auto to the info box on the account of text cutting in smaller devices, oops! My bad! ^^'

iCard:
--Spot 1--

Spot 1 Info
--Spot 2--

Spot 2 Info

Code:
[DIV=width: 55%; height: 100%; background-color: lightblue; padding: 8px 12px 10px 10px; border-radius: 10px; border:2px solid navy; margin: auto;][div=padding-right: 490px; display: inline;][FONT=Comfortaa][SIZE=5][COLOR=Transparent]i[/COLOR][COLOR=#333333]Card:[/COLOR][/SIZE][/FONT][/div][row][column=span3][div=border: 2px solid #454545; margin-top: 10px;][div=width: 100%; height: 232px; padding-bottom: 0px; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ff/d3/77/ffd377367e19eaf59d578f2d455862e3.jpg); background-size: cover; background-position: center; z-index: 2;][/div][/div][/column][div=border: 2px solid #454545; border-radius: 10px; padding-top: 30px; height: 202px; margin-left: 15px; margin-right: 5px; margin-top: 10px; text-align: center; z-index: 1;][div=overflow: auto;][div=display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 160px;][div=width: 150px; margin-bottom: 20px; margin-top: 20px;][B][FONT=Comfortaa][SIZE=6][COLOR=#333333]--Spot 1--[/COLOR][/SIZE][/FONT][/B]

[FONT=Comfortaa][SIZE=5][COLOR=#333333]Spot 1 Info[/COLOR][/SIZE][/FONT]
[/div][div=width: 200px; margin-top: -3px;][B][SIZE=6][FONT=Comfortaa][COLOR=#333333]--Spot 2--[/COLOR][/FONT][/SIZE][/B]

[FONT=Comfortaa][SIZE=5][COLOR=#333333]Spot 2 Info[/COLOR][/SIZE][/FONT]
[/div][/div][/div][/div][/row][/DIV]
 
Last edited:
And this is my first experiment with flexboxes! Not using the shrinking and expanding options yet, but more on the concern of moving elements here and there and still making everything readable. (wrapping property)

Percentage of success? 90%
Everything works on the first tab (though I cheated a little by using z-index to overlap text on the image), but on the second one I was forced to add the accordians for mobile readability. It looks a little bit squashed, but hey! You can read it! On the concern of theme compatibility, overlapping white text on a yellow background looks weird. Easy fix with a background there (just remember to set the text to a visible color), but doing that would ruin the aesthetic of the whole thing IMO.

Everything has hidden scrolls! (I love them soooo much +O+)

  • Name: Rosemarie Holtzer
    Age: 18
    Gender: Female
    Occupation: High School Student

    Personality: Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline.
    On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.


    History
    The day her father decided to try politics and won was Rosemarie's doomsday.

    Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened.
    Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

    Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

    That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

    To say that she was hooked would be an understatement.

    From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must!
    With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.
    065764eb40354818824ae03b1fcbc8c5.jpg

Code:
[TABS][TAB=Content to the Left][div=width: 100%; min-height: 435px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between;][div=border: 3px dashed #B87EE9; padding: 10px 10px 10px 15px; width: 612px;][B]Name:[/B] Rosemarie Holtzer
[B]Age:[/B] 18
[B]Gender:[/B] Female
[B]Occupation:[/B] High School Student[/div]
[div=border: 3px dashed #8DBCCE; padding: 10px 10px 10px 15px; width: 612px; margin-top: 28px; height: 289px; z-index: 1][div=width: 100%; height: 100%; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Rosemarie is overly confident, stubborn and sounds like she's always bored or annoyed by something. To say that she acts spoiled like a princess would not be wrong, actually. With her high standards and efforts to be the best, most responsible and organized at everything she does, Rosemarie's demeanor is incredibly nobility-like despite not being from a noble family at all. It also infuriates her when her efforts aren't acknowledged and the girl dislikes any displays of lack of discipline.
On social events, the Holtzer's daughter knows exactly how to carry herself with grace and manners, doing her best to be the most pleasant guest ever, paying the utmost attention to whatever is being said. Internally, Rosemarie really doesn't want to be there at all and wants no more than to go back home and finally play some games. These kind of events are boring.

[border=1px solid hotpink; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[B]History[/B]
[div= margin-bottom: 13px;]The day her father decided to try politics and won was Rosemarie's doomsday.

Robbed of her privacy at an early age, the young Holtzer was quickly thrown into the life of image keeping and paparazzi, coming to learn that once her cuteness factor of being a toddler was gone, the opposition would use her behavior to paint her father in a bad light. The daughter of the mayor couldn't be brash, the daughter of the mayor couldn't be mean or the news people would talk. On her accord and no one else's, Rosemarie took it upon herself to be an exemplary human being, a true princess out of fairytales. Gentle, helpful, the possessor of impeccable manners and grace. She had hoped that the act wouldn't last long, that the bad rumors would stop and everything could go back to normality soon, but that wasn't what happened.
Guilbert Holtzer was re-elected, kept climbing the political hierarchy and even when he wasn't actively a part of politics, had clearly become quite the influential man.

Now stuck on a cage of her own making, Rosemarie was forced to play along, acting on the role for long enough that her original personality started fading away, blending with this character she had constructed. The tomboyish toddler that had once been was overwritten into a charismatic, feminine and properly educated lady. The kind of queen bee that ruled the school by being the epitome of perfection and responsibility. Eventually said 'title' had begun going over her head, the new Rosemarie had high standards, was incredibly demanding and way too confident. But at the same time, nurtured big amounts of frustration and regret, giving birth to a volatile, explosive temper that was becoming harder and harder to keep in check.

That's when she met MMO RPGs. Not having tried a game yet for deeming it too barbaric and a waste of time, Rosemarie had bought a PC game in curiosity. The ad for the game, claiming the experience to be like living as a different person had caught her interest. It was love at first sight and exactly what she needed. In the world of the game, the girl had been free to act as she wanted, using the experience to unwind and release all of the pent-up destructive energy she had been building up! Killing things was fun! Completing quests gave her a sense of accomplishment that her life had long been drained of.

To say that she was hooked would be an understatement.

From there on, Rosemarie would go on to try all sorts of similar games, hopping from a title to the next one the moment the experience got any dull to her. The thrill and the excitement were a must!
With her father now taking the role of Senator, Rosemarie is more than never living a double life: The perfect example of a daughter to the outside world and an unstopable, insatiable, impulsive player in the gaming world.[/div][/div][/div][/div][div=border: 3px dashed #EB8D31; padding: 10px 10px 6px 10px; width: 355px; height: 100%; margin-top: -10.9%; z-index: 0;][IMG]https://i.pinimg.com/564x/06/57/64/065764eb40354818824ae03b1fcbc8c5.jpg[/IMG][/div][/div][/TAB]

[TAB=Content to the Right][div=width: 100%; min-height: 460px; margin-top: 5px; display: flex; flex-flow: row wrap; justify-content: space-between; padding-left: 5px;][div=border: 5px double #6495ED; padding: 10px 10px 6px 10px; width: 379px;][IMG]http://orig05.deviantart.net/0ae9/f/2016/275/9/8/legs_black_gloves_dress_long_hair_green_hair_yello_by_necessity4fun-dajnito.jpg[/IMG][/div][div=bg-color: transparent;][div=border: 5px double #D6D5B8; padding: 10px 10px 10px 15px; width: 576px; margin-left: 5px;][B]Name:[/B] Brunhildr
[B]Apparent Age:[/B] Late 20s, Early 30s-ish
[B]Race:[/B] Undine
[B]Gender:[/B] Female[/div]
[div=border: 5px double #F2D357; padding: 10px 10px 10px 15px; width: 576px; margin-top: -4px; margin-left: 1vh; position: relative;][div=width: 100%; height: 333px; overflow: hidden;][div=overflow-y: scroll; height: 105%; width: 101%; padding-right: 20px; padding-bottom: 5px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned.
Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: 5px; margin-left: 10px;][bg=transparent; display:none;].[/bg][/border]
[div=margin-bottom: 16px;][B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual.
Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div][/div][/div][/div]
[div=margin-top: -22px; margin-bottom: -20px; margin-left: -7px; width: 100%;][border=0px solid transparent][accordion=39%]
{slide=[bg=#6495ED][CENTER]Personality and Accolades [For Mobile][/CENTER][/bg]}[div=width: 100%; height: 220px; overflow: hidden;][div=overflow-y: scroll; height: 100%; width: 101%; padding-right: 20px;][B]Personality:[/B] Free from her real-world responsibilities and observers, Brunhildr is a brute, harsh, impulsive and violent player. The constant annoyed and boredom now comes straight, with no layer of filter and she'll have absolutely no regard over teamwork if it means spoiling her fun. Quite the opposite, her impulsive 'act first, plan later' attitude might make her bark orders at the entire party as if she was the leader, which usually, she's not.

Having to repeat instructions twice is incredibly irritating and be prepared to listen to her scoff and dimish other's accomplishments just for the hell of it. Brunhildr is not nice and doesn't see the point of acting as such in a fake game world. All she wants is to kill things and complete quests to her heart's content and nothing will get in the way of that. In a way, Brunhildr has a bit of a sadistic edge showing, taking great delight in every attack that hits and every kill she gains. You could say she's insanely driven, yet extremely tunnel-sighted and selfish. Her goals are her goals and the rest be damned. Pleasantries are to be left by the door as she's completely sick of them. Go play the gentleman somewhere else, far away from her sight.

[border=1px solid #A3CBC7; height:0; padding:0; margin-right: -10px; margin-left: 5px;][bg=transparent; display:none;].[/bg][/border]
[B]Accolades:[/B] Against her own wishes and due to her lone wolf playstyle, Brunhildr has become a bit of an urban legend in Fields of Aiso community. Her username had started [B]showing up on the top ten rankings[/B] once in a while, but [B]only for solo events and quests.[/B] Having this mysterious player that no one knew [I]anything[/I] about making their way into the first page of the rankings out of nowhere was unusual. Even more unusual was the fact that this somewhat skilled player had one of the most irregular play times ever, disappearing for weeks to months on end only to pop back in action at the next solo event of the game.

She's aware that part of the game's content shall remain locked to her until she joins a guild and start interacting with people but honestly, she doesn't quite care enough to change her ways.

Brunhildr also prides herself in [B]beating the basic, starter solo missions of the game in near record time[/B] when she first started playing, having breezed through them [B]in a matter of two days[/B] during a holiday period. (Her family and friends still believe that she had been studying in her room instead)[/div][/div]{/slide}
[/accordion][/border][/div][div=margin-top: -64px; margin-bottom: -18px; margin-left: 421px; width: 100%;][border=0px solid transparent][accordion=99%]
{slide=[bg=#F2D357][COLOR=Transparent].[/COLOR][/bg]}{/slide}[/accordion][/border][/div][/div][/TAB][/TABS]

I have taken this layout and credited your work. Thank you in advance.
 

Users who are viewing this thread

Back
Top