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

Resource Fyurious Codes 2.0

Should I do BBCode Collections? Basically a design for an interest check, lore, cs, and so on?

  • Yes

  • No


Results are only viewable after voting.

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Introduction

Welcome to my pathetic BBCode thread.

Most of the codes you'll find in here are fairly minimalistic in style. This is for a variety of reasons, my personal BBCode skill level, my style preference, and it's easier to create more mobile friendly codes.

Not all the codes here are mobile friendly, but I do try my best to offer them when I can and if they work well with a design I have in mind.

I also like to experiment quite a bit and my coding is a bit messy when you look at it. I am completely self-taught, taking my knowledge of CSS/HTML and applying it my BBCodes as best as I can. I am far from a professional and would not suggest using my codes to learn from. X3

Usage

I use this thread as a code/design showcase.

Some of the codes/designs displayed here are free-to-use with credit. There will also be codes/designs I share that I intended for personal use only, such as for my roleplay projects.

While all BBCode falls under Creative Commons (Attribution/NonCommerical) here on RpNation, I would appreciate the consideration to not use codes I do not provide the raw code for.

If you use a free-to-use code and alter the code which results in the code breaking, please do not come to me to fix it. You accept the risk of code breaking should you tamper with it. Also, please do not come to me to customize the codes for you. I try to break down the classes so you can modify them yourself.

Please do not steal, re-color and re-post as your own, or remove/edit the credit.

Changelog

If I update a code or the content in this thread, I will log that information here.

6/1/2019
Updated Fantasy-esque CS/IC information box to emphasize importance to leave the white background.
Finished updating all the info boxes for my codes. No more mismatch!
Updating codes over time with minor changes to the credit as I've noticed it seems when people edit things it goes out of whack and into the design itself. So credit will be after the nobr tag within my codes to prevent it from wandering around due to accidents when people edit it.​

5/22/2019
I'm slowly updating the information boxes at the top of the posts for my codes so they no longer as mismatched and contain better display of information regarding where certain sections of codes are for your personal customization.

Additionally I've updated a small part of Misc #1 so that should someone use a smaller image it should center it instead of just defaulting to the left.​

5/13/2019 - There were some changes to the style classes of the themes for both dark and light which has resulted in my original first post introduction code to be wonky live (worked fine in preview). So I've updated my first post with a new code.

4/9/2019 - With the new FA version I've updated the FA tags for Faux Vertical Tabs and Faux Horizontal Tabs.

6/17/2018 - Minor update to all codes linking back to the original. I saw one popular code of mine getting broken from improper code sharing and a link back to the original is meant to help direct others to my resource. Now all code credit links back to my originals.

5/13/2018 - Minor update to Faux Tabs (Horizontal) to work in Dark Theme.

2/4/2018 - Minor update to fyuriheader2 in Character Sheet Remake.

2/3/2018 - Updated Faux Tabs (Vertical) to stop hover issue when hovering below the tabs.

2/2/2018 - Updated Hidden Content Hover code to resolve header issue.

To-Do

  • Dark phone version.
  • Alt phone option
  • New CS
  • Finish DnD CS

Requests

I am currently not taking any requests for custom codes.

I am on a steep learning curve regarding the new BBCode+ scripts and adapting to the new BBCode+ language. Not to mention I don't really have the time to do them.

Specs

As codes may appear or function differently depending on the browser or device, here is what I use:

When something is listed as mobile friendly it has been tested on my personal phone (not tablet) in vertical mode. The reason for this is in landscape mode the RpN header/menu bar takes up a ridiculous amount of space.

Code Directory

Here is a quick directory to the codes within this thread. Please be sure to note the symbol key to help you determine if you want to use the code!

Code Keys

Desktop Only
Mobile Friendly
Fyuri's Personal Codes

Free-to-Use


Free-to-Use Sets

There are BBCodes created as a set, meaning at least two or more are matched together in theme and style.


code/design by @Fyuri

.
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Well, I finally got around to playing with the new BBCode+. Now, this only uses the new CLASS ability, no scripts were harmed used in the making of this code.

Weather, News, & Comments Boxes
[div=weatherinfo][b]Current Weather[/b]
YOUR CONTENT HERE[/div]

[div=newsinfo][b]Current Events[/b]
YOUR CONTENT HERE[/div]

[div=otherinfo][b]Recent Comments[/b]
YOUR CONTENT HERE[/div]

Text Messages
[div class=leftchat]LEFT TEXT CONTENT HERE[/div]

[div class=rightchat]RIGHT TEXT CONTENT HERE[/div]
mobile friendly
hidden scroll
phone
light theme best

Current Weather
Cloudy
80°F
City, Country
Current Events
2017 Dead Memes
Cat Facts
BBCode+ Is Awesome
Recent Comments
I love ratings!
Cookies!
Hearts too?!

I'm bored.

Then go do something.

Thank you Captain Obvious. I want to know if you want to go do something with me.

Depends on what this 'something' is.

Mini golf?

Hell. Yes.

I am on my way to your place now!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.

Vivamus mattis ante ut est facilisis, et suscipit nunc auctor. Ut nisi ante, eleifend eget mauris nec, tempor ultricies enim. Morbi ornare interdum orci, fringilla venenatis risus vehicula sit amet. Ut at ornare leo. Quisque ac ipsum at ligula tempus tincidunt. Nullam at lectus facilisis, pretium risus in, suscipit eros. Sed sodales, arcu ut rhoncus ultricies, diam sapien tristique felis, ut mollis tortor ipsum faucibus lacus. Sed at neque sit amet orci aliquet auctor. Nunc sed velit et magna imperdiet finibus. Mauris cursus fermentum dolor aliquam porta. Donec malesuada aliquam nunc, nec tristique purus. Proin sit amet mi tincidunt neque porttitor mollis a et metus. Morbi vel dapibus magna, et ornare ante. Nunc ultricies in justo vitae tempor.

Code:
[nobr]
[font=Open Sans][/font]
[class=credit]
width:300px;
margin:auto;
font-size:10px;
opacity:0.3;
[/class]
[class=box]
width:300px;
height:500px;
margin:auto;
-webkit-box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-style: solid;
border-width: 40px 10px 80px 10px;
border-color: rgba(229,229,229, 0.8);
[/class]
[class=screenbox]
width:100%;
height:500px;
overflow:hidden;
[/class]
[class=screenboxchild]
width:100%;
height:500px;
padding-right:17px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]
[class=screen]
margin-top:-20px;
background-color:#fff;
padding:5px;
[/class]
[class=topcontain]
width:300px;
margin:auto;
[/class]
[class=camera]
position:relative;
top:-20px;
left:80px;
width:8px;
height:8px;
border-radius:50%;
background-color: #000000;
[/class]
[class=top]
position:relative;
left:10px;
top:-27px;
background-color:rgba(229,229,229, 1.0);
width:40%;
height:8px;
margin:auto;
box-shadow: 0 0 1px #000 inset;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
[/class]
[class=buttonbottom]
position:relative;
top:-70px;
width:35px;
height:35px;
margin:auto;
background-color:rgba(229,229,229, 1.0);
border:3px solid rgba(114,114,114, 0.2);
border-radius:50%;
box-shadow: 0 0 1px #000 inset;
[/class]
[class=weather]
width:270px;
background-color:#D3F1F4;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=weathericon]
float:left;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=weatherinfo]
width:100px;
height:30px;
[/class]
[class=news]
width:270px;
background-color:#E0F5F7;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=newsicon]
float:right;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=newsrinfo]
width:100px;
height:30px;
[/class]
[class=other]
width:270px;
background-color:#ECF9FA;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=othericon]
float:left;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#e6e6e6;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=otherinfo]
width:100px;
height:30px;
[/class]
[class=textarea]
width:270px;
background-color:#ECF9FA;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=leftchat]
float:left;
width:70%;
margin:2px;
background-color:#2E86AB;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding:3px;
[/class]
[class=rightchat]
float:right;
width:70%;
margin:2px;
background-color:#92DCE5;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding:3px;
[/class]
[/nobr]
[div=background-color:#fff;padding-top:50px;padding-bottom:50px;][div class=box][div=topcontain][div class=camera][/div][div class=top][/div][/div][div class=screen][div class=screenbox][div class=screenboxchild][div class=weather][div class=weathericon][fa]fa-cloud[/fa][/div][div=weatherinfo][b]Current Weather[/b]
Cloudy
80°F
City, Country [/div][/div][div class=news][div class=newsicon][fa]fa-newspaper-o[/fa][/div][div=newsinfo][b]Current Events[/b]
2017 Dead Memes
Cat Facts
BBCode+ Is Awesome[/div][/div][div class=other][div class=othericon][fa]fa-comments-o[/fa][/div][div=otherinfo][b]Recent Comments[/b]
I love ratings!
Cookies!
Hearts too?![/div][/div]

[div=width:270px;padding:10px;][div class=leftchat]I'm bored.[/div]
[div class=rightchat]Then go do something.[/div]
[div class=leftchat]Thank you Captain Obvious.  I want to know if you want to go do something with me.[/div]
[div class=rightchat]Depends on what this 'something' is.[/div]
[div class=leftchat]Mini golf?[/div]
[div class=rightchat]Hell.  Yes.[/div]
[div class=rightchat]I am on my way to your place now![/div][div=clear:both;][/div][/div]
[div class=textarea]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.

Vivamus mattis ante ut est facilisis, et suscipit nunc auctor. Ut nisi ante, eleifend eget mauris nec, tempor ultricies enim. Morbi ornare interdum orci, fringilla venenatis risus vehicula sit amet. Ut at ornare leo. Quisque ac ipsum at ligula tempus tincidunt. Nullam at lectus facilisis, pretium risus in, suscipit eros. Sed sodales, arcu ut rhoncus ultricies, diam sapien tristique felis, ut mollis tortor ipsum faucibus lacus. Sed at neque sit amet orci aliquet auctor. Nunc sed velit et magna imperdiet finibus. Mauris cursus fermentum dolor aliquam porta. Donec malesuada aliquam nunc, nec tristique purus. Proin sit amet mi tincidunt neque porttitor mollis a et metus. Morbi vel dapibus magna, et ornare ante. Nunc ultricies in justo vitae tempor.[/div] [/div][/div][/div][/div][div class=credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8650235]code[/url] by [USER=39545]@Fyuri[/USER][/div][div class=buttonbottom][/div][/div]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Another minimal design.

Your FC or Image
[div class=fyurir04imagebox][img]URL HERE[/img][/div]


Headers
[div class=fyuri04headerleft]LEFT HEADER[/div]

[div class=fyuri04headerright]RIGHT HEADER[/div]


Side Border Boxes
[div class=fyuri04boxleft]LEFT BORDER[/div]

[div class=fyuri04boxright]RIGHT BORDER[/div]
mobile friendly
no scroll
light theme best

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id consequat erat, quis lacinia quam. Aenean turpis odio, mattis malesuada consequat sed, hendrerit et quam. Aenean eu pharetra metus. In id augue in neque tincidunt vestibulum. Phasellus a venenatis dolor. Maecenas et nibh ac quam iaculis dictum. Fusce eleifend lacus non felis semper fermentum. Cras congue et justo nec venenatis. Donec ac neque id arcu finibus fermentum. Fusce a velit rhoncus, aliquam libero sit amet, accumsan mauris. Duis congue ex commodo mi consectetur, vitae imperdiet nunc tincidunt. Ut consectetur tortor in urna gravida eleifend. Morbi bibendum scelerisque sollicitudin.

Header Left

Aenean ullamcorper ante sit amet lacus pretium tincidunt. In nec placerat nulla, ut dictum leo. Suspendisse aliquam ex nisl. Maecenas non purus nisl. Nulla nisl est, fringilla nec vulputate sit amet, euismod eu sapien. Proin eget sagittis nulla, ac vulputate arcu. Mauris mauris metus, tincidunt lacinia neque ut, lobortis ornare diam. Quisque sit amet arcu neque. Vestibulum lacinia diam ut egestas varius. Praesent ultrices facilisis fringilla. Morbi vestibulum dui egestas tempus fermentum. Nullam hendrerit faucibus neque non vulputate. Aenean sed urna at orci molestie consectetur vel sed magna.


Header Right

Praesent imperdiet ex nec erat gravida, et hendrerit arcu congue. Cras vestibulum mi non leo congue fermentum. Phasellus est eros, viverra non mauris luctus, commodo consectetur felis. Nam sit amet ligula tristique, facilisis nibh sit amet, semper lorem. Phasellus non massa varius, sollicitudin erat eget, tristique diam. Suspendisse facilisis vulputate euismod. Suspendisse dolor augue, ornare vitae consectetur non, bibendum non lorem. Fusce ac maximus eros. Etiam iaculis commodo elit, in aliquam ante tempus non. Quisque eu dapibus diam, eu fringilla ante. Nunc sit amet condimentum lectus.

Maecenas vitae egestas libero. Sed convallis ut nibh id faucibus. Donec porta posuere odio. Quisque sit amet tempus dolor, sed malesuada leo. Nunc placerat arcu augue, eget interdum tortor euismod nec. Nullam tincidunt ornare nibh et lobortis. Nulla tincidunt iaculis maximus. Sed posuere porta erat, ut facilisis mi scelerisque at. Phasellus ultricies vitae mauris eget lacinia. Integer sapien quam, euismod at fringilla non, mollis id sapien. Duis orci neque, congue ac mattis at, interdum at felis. In tempor, ipsum quis iaculis consequat, odio nulla rutrum neque, eget rutrum ligula mauris ut purus.
.
Code:
[div class=fyuri04wrapper][div class=fyuri04mid][div class=fyuri04parent][div class=fyurir04imagebox][img]http://via.placeholder.com/450x150[/img][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id consequat erat, quis lacinia quam. Aenean turpis odio, mattis malesuada consequat sed, hendrerit et quam. Aenean eu pharetra metus. In id augue in neque tincidunt vestibulum. Phasellus a venenatis dolor. Maecenas et nibh ac quam iaculis dictum. Fusce eleifend lacus non felis semper fermentum. Cras congue et justo nec venenatis. Donec ac neque id arcu finibus fermentum. Fusce a velit rhoncus, aliquam libero sit amet, accumsan mauris. Duis congue ex commodo mi consectetur, vitae imperdiet nunc tincidunt. Ut consectetur tortor in urna gravida eleifend. Morbi bibendum scelerisque sollicitudin.

[div class=fyuri04headerleft]Header Left[/div]
[div class=fyuri04boxleft]Aenean ullamcorper ante sit amet lacus pretium tincidunt. In nec placerat nulla, ut dictum leo. Suspendisse aliquam ex nisl. Maecenas non purus nisl. Nulla nisl est, fringilla nec vulputate sit amet, euismod eu sapien. Proin eget sagittis nulla, ac vulputate arcu. Mauris mauris metus, tincidunt lacinia neque ut, lobortis ornare diam. Quisque sit amet arcu neque. Vestibulum lacinia diam ut egestas varius. Praesent ultrices facilisis fringilla. Morbi vestibulum dui egestas tempus fermentum. Nullam hendrerit faucibus neque non vulputate. Aenean sed urna at orci molestie consectetur vel sed magna.[/div]

[div class=fyuri04headerright]Header Right[/div]
[div class=fyuri04boxright]Praesent imperdiet ex nec erat gravida, et hendrerit arcu congue. Cras vestibulum mi non leo congue fermentum. Phasellus est eros, viverra non mauris luctus, commodo consectetur felis. Nam sit amet ligula tristique, facilisis nibh sit amet, semper lorem. Phasellus non massa varius, sollicitudin erat eget, tristique diam. Suspendisse facilisis vulputate euismod. Suspendisse dolor augue, ornare vitae consectetur non, bibendum non lorem. Fusce ac maximus eros. Etiam iaculis commodo elit, in aliquam ante tempus non. Quisque eu dapibus diam, eu fringilla ante. Nunc sit amet condimentum lectus.[/div]
Maecenas vitae egestas libero. Sed convallis ut nibh id faucibus. Donec porta posuere odio. Quisque sit amet tempus dolor, sed malesuada leo. Nunc placerat arcu augue, eget interdum tortor euismod nec. Nullam tincidunt ornare nibh et lobortis. Nulla tincidunt iaculis maximus. Sed posuere porta erat, ut facilisis mi scelerisque at. Phasellus ultricies vitae mauris eget lacinia. Integer sapien quam, euismod at fringilla non, mollis id sapien. Duis orci neque, congue ac mattis at, interdum at felis. In tempor, ipsum quis iaculis consequat, odio nulla rutrum neque, eget rutrum ligula mauris ut purus.[/div][/div][/div][nobr][div class=fyuri04credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8653989]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by [USER=39545]@Fyuri[/USER][/comment]
[font=Open Sans Condensed][div=display: none;].[/div][/font]
[class=fyuri04wrapper]
max-width:450px;
min-height:600px;
margin:30px auto;
background: #272e38;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow:hidden;
-webkit-box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
-moz-box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
padding:115px 0px 35px 0px;
[/class]

[class=fyuri04mid]
position:relative;
width:100%;
min-height:600px;
background-color:#efefef;
padding-bottom:10px;
[/class]

[class=fyuri04parent]
display: block;
position:relative;
top:-60px;
z-index:5;
width:90%;
min-height:500px;
margin:0px auto -60px auto;
background-color:#fff;
padding:10px;
text-align:justify;
color:#313131;
font-size:13px;
[/class]

[class=fyuri04headerleft]
text-align:left;
margin:-10px 0px -15px 0px;
font-family: 'Open Sans Condensed', Arial, Verdana;
font-size:30px;
color:#313131;
padding-left:10px;
[/class]

[class=fyuri04headerright]
padding-right:10px;
margin:-10px 0px -15px 0px;
text-align:right;
font-family: 'Open Sans Condensed', Arial, Verdana;
font-size:30px;
color:#313131;
[/class]

[class=fyurir04imagebox]
width:100%;
display:inline-block;
text-align:center;
pointer-events:none;
[/class]

[class=fyuri04boxleft]
border-left:10px solid #272e38;
padding:5px 10px 5px 5px;
[/class]

[class=fyuri04boxright]
border-right:10px solid #272e38;
padding:5px 5px 5px 10px;
[/class]

[class=fyuri04credit]
position:relative;
top:-30px;
max-width:450px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
I present... faux hover accordions! No scripts were used, this is pure hover effect. So, when you hover over a boxed section, it will expand to reveal a text area. No hidden scrolls here, figured with the hover it'd make it a bit less confusing. That isn't to say it isn't possible to hide the scrollbars, I just chose not to.
As this isn't a real accordion, if you scroll and stop hovering, the content will not reset back to the "header" and you'll see the content text.

Images
Optimal image size is 300px x 150px. Anything outside of this size may not display how you intend.
[div class=fyuri07wrapper][img]TOP IMG URL HERE[/img]

[div=fyuri07imagebox][img]BOTTOM IMG URL HERE[/img][/div]

Headers
Only a max of five headers/text boxes work in this code.
[div class=fyuri07header]HEADER ONE-FIVE[/div]
mobile friendly
hovers
gradient

Header One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
.
Code:
[div class=fyuri07wrapper][img]http://via.placeholder.com/300x150[/img][div class=fyuri07infohover][div class=fyuri07header]Header One[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
[/div][div class=fyuri07infohover2][div class=fyuri07header]Header Two[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div class=fyuri07infohover3][div class=fyuri07header]Header Three[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div class=fyuri07infohover4][div class=fyuri07header]Header Four[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
[/div][div class=fyuri07infohover5][div class=fyuri07header]Header Five[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div=fyuri07imagebox][img]http://via.placeholder.com/300x150[/img][/div][/div][nobr]
[div class=fyuri07credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8656755]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]please do not remove/alter credit. code by [USER=39545]@Fyuri[/USER][/comment]
[font=Exo][div=display: none;].[/div][/font]
[class=fyuri07wrapper]
position:relative;
width:300px;
height:479px;
margin:auto;
background: #531cb3; 
background: -moz-linear-gradient(top, #531cb3 0%, #944bbb 25%, #aa7bc3 50%, #cc92c2 75%, #dba8ac 100%); 
background: -webkit-linear-gradient(top, #531cb3 0%,#944bbb 25%,#aa7bc3 50%,#cc92c2 75%,#dba8ac 100%); 
background: linear-gradient(to bottom, #531cb3 0%,#944bbb 25%,#aa7bc3 50%,#cc92c2 75%,#dba8ac 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#531cb3', endColorstr='#dba8ac',GradientType=0 ); 
overflow:hidden;
[/class]

[class=fyuri07imagebox]
display:inline;
text-align:center;
pointer-events:none;
[/class]

[class=fyuri07infohover]
width:calc (100%-10px);
height:25px;
margin-top:-6px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover state=hover]
width:calc (100%-10px);
height:320px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover2]
position:relative;
z-index:3;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover2 state=hover]
position:relative;
z-index:3;
width:calc (100%-10px);
height:321px;
margin-top:-37px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover3]
position:relative;
z-index:4;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover3 state=hover]
position:relative;
z-index:4;
width:calc (100%-10px);
height:321px;
margin-top:-73px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover4]
position:relative;
z-index:5;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover4 state=hover]
position:relative;
z-index:5;
width:calc (100%-10px);
height:321px;
margin-top:-109px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover5]
position:relative;
z-index:6;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover5 state=hover]
position:relative;
z-index:6;
width:calc (100%-10px);
height:321px;
margin-top:-145px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07header]
font-size:30px;
color:#fff;
font-family: 'Exo';
line-height:30px;
text-align:left;
[/class]

[class=fyuri07credit]
width:300px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
More experimenting! Remember when we were all amazed with invisible accordions and those cool hacked accordions used to hide and reveal content? Well, here's my hover experiment for hiding/showing content. ;3 The raw code has a place holder image which you can replace with an image of your choice.

Don't get too crazy with any massive headers!

Image
Optimal image size is 400px x 500px.
[class=fyuri11imagebox]
width:100%;
height:500px;
background:url('YOUR IMAGE URL HERE') no-repeat;
[/class]

Header
[div class=fyuri11header]Header
[div=font-size:10px;]-hover-[/div][/div]
mobile friendly
visible scroll
hover

Header
-hover-


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra urna non tristique semper. In luctus ante eros. Curabitur iaculis sed augue eget vestibulum. In a bibendum nulla. Vestibulum et erat rutrum neque vulputate tempus. Praesent aliquam volutpat luctus. Nam consequat egestas rhoncus. Duis eleifend massa orci, id efficitur justo aliquet quis. Proin id iaculis est, quis maximus velit. Vestibulum id orci vitae velit tincidunt ultricies. Donec fermentum elit et luctus tempus. Mauris varius finibus mi, vel luctus leo.

Vestibulum non arcu risus. Ut id urna orci. Cras non imperdiet nisl. Vestibulum ultricies cursus ipsum a varius. Nulla aliquam lorem ut placerat tristique. Vestibulum massa tellus, semper a lacus in, dignissim convallis lectus. Integer egestas ex sapien, ut mollis lorem faucibus ut. Fusce in varius massa. Phasellus sed purus quis nisl vehicula faucibus tristique sit amet lorem. Aenean vel nunc laoreet, dignissim nisi vel, fringilla nisl. Suspendisse iaculis, lacus nec pulvinar volutpat, est velit suscipit enim, sed interdum felis nisl non metus. Duis et nunc quam. Vivamus quam eros, ornare non auctor quis, varius quis ligula. Proin condimentum eros vel nulla posuere, eu maximus tortor luctus. Nullam rhoncus risus et risus ornare pretium.
.
Code:
[div class=fyuri11wrapper][div class=fyuri11imagebox][div class=fyuri11overlayparent][div class=fyuri11overlay][div class=fyuri11header]Header
[div=font-size:10px;]-hover-[/div][/div]

[/div][/div][/div][div class=fyuri11parent][div class=fyuri11content]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra urna non tristique semper. In luctus ante eros. Curabitur iaculis sed augue eget vestibulum. In a bibendum nulla. Vestibulum et erat rutrum neque vulputate tempus. Praesent aliquam volutpat luctus. Nam consequat egestas rhoncus. Duis eleifend massa orci, id efficitur justo aliquet quis. Proin id iaculis est, quis maximus velit. Vestibulum id orci vitae velit tincidunt ultricies. Donec fermentum elit et luctus tempus. Mauris varius finibus mi, vel luctus leo.

Vestibulum non arcu risus. Ut id urna orci. Cras non imperdiet nisl. Vestibulum ultricies cursus ipsum a varius. Nulla aliquam lorem ut placerat tristique. Vestibulum massa tellus, semper a lacus in, dignissim convallis lectus. Integer egestas ex sapien, ut mollis lorem faucibus ut. Fusce in varius massa. Phasellus sed purus quis nisl vehicula faucibus tristique sit amet lorem. Aenean vel nunc laoreet, dignissim nisi vel, fringilla nisl. Suspendisse iaculis, lacus nec pulvinar volutpat, est velit suscipit enim, sed interdum felis nisl non metus. Duis et nunc quam. Vivamus quam eros, ornare non auctor quis, varius quis ligula. Proin condimentum eros vel nulla posuere, eu maximus tortor luctus. Nullam rhoncus risus et risus ornare pretium.
[/div][/div][/div][nobr]
[div class=fyuri11credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8660926]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by [USER=39545]@Fyuri[/USER][/comment]
[font=Sigmar One][div=display:none;].[/div][/font][div=display:none;][/div]
[class=fyuri11wrapper]
max-width:400px;
height:500px;
margin:auto;
[/class]

[class=fyuri11imagebox]
width:100%;
height:500px;
background:url('https://i.imgur.com/bI6GSjG.jpg') no-repeat;
[/class]

[class=fyuri11overlayparent]
display: flex;
align-items: center;
justify-content: center;
max-width:400px;
height:500px;
[/class]

[class=fyuri11overlay]
display: flex;
width:200px;
height:200px;
margin:auto;
background-color:rgba(0,0,0, 0.8);
color:#fff;
[/class]

[class=fyuri11header]
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
text-align:center;
width:100%;
font-family: 'Sigmar One', Impact;
font-size:30px;
color:#fff;
[/class]

[class=fyuri11parent]
opacity:0.0;
position:relative;
margin-top:-500px;
width:100%;
height:500px;
background:#000;
transition: all 0.5s ease;
[/class]

[class name=fyuri11parent state=hover]
opacity:1.0;
width:calc(100% - 20px);
height:480px;
background:rgba(218,20,69, 0.8);
padding:10px;
[/class]

[class=fyuri11content]
width:calc (100% - 20px);
height:460px;
background-color:#fff;
overflow:auto;
padding:10px;
text-align:justify;
color:#313131;
[/class]

[class=fyuri11credit]
max-width:400px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
I decided to re-do one of my first attempts with BBCode when the site returned to xF. You can find the original here.

Your FC
[div class=fyuriimagebox][img]IMG URL HERE[/img][/div]


Headers
[div class=fyuriheader2]CHARACTER NAME HEADER[div]

[div class=fyuriheader]DARK GREY HEADER[div]
mobile friendly
no scroll
monochrome

Identification
Name:
Rank:
Stats

Attribute:
Attribute:
Attribute:
Attribute:
Attribute:
Attribute:

Skills

Skill:
Skill:
Skill:
Skill:
Skill:
Skill:

Character Name
General

Age:

Gender:

Race:

Sexual Orientation:

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, justo at ultrices finibus, nulla enim lacinia dui, at finibus mi erat eu nulla. Nullam sagittis aliquam diam at condimentum. Quisque interdum dolor semper metus porttitor, dapibus viverra tellus cursus. Sed pulvinar urna in metus pharetra finibus. Nulla facilisi. Suspendisse sed magna et leo fringilla commodo. Etiam convallis magna id ante faucibus, vitae posuere ligula fringilla. Vestibulum ornare finibus finibus.

Header

Sed aliquet venenatis pharetra. Mauris sodales dignissim purus, et hendrerit odio rutrum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac justo arcu. Morbi at dapibus metus. Ut at facilisis orci. Pellentesque ut pulvinar dui. Aliquam consequat dapibus laoreet. Integer porta venenatis cursus. Nunc cursus quis ante at sagittis. Quisque non tincidunt elit, non efficitur odio.

Header

Aliquam velit nisl, iaculis sit amet dolor in, dictum viverra purus. Quisque quis dapibus tortor, et imperdiet tellus. In nec dapibus metus, vel varius erat. Ut in nisi turpis. Sed in porta arcu. Donec venenatis eu lectus non congue. Nunc at cursus dolor. Nulla pretium velit id enim condimentum elementum. Vivamus pulvinar orci at magna posuere faucibus a vel velit.

Header

Sed sit amet pharetra eros. Etiam erat turpis, pulvinar et dictum quis, vehicula elementum nibh. Aliquam quis vestibulum sapien. Duis ac eros ipsum. Nullam tristique nisi nec tortor efficitur molestie. Pellentesque odio lectus, facilisis id quam quis, eleifend bibendum erat. Cras pharetra turpis eget odio imperdiet lobortis. Aenean at lorem magna. Integer quis auctor mauris, non elementum lectus. Duis facilisis aliquet turpis, id tincidunt urna rhoncus id. Aliquam quis tellus purus.

.
.
Code:
[div class=fyuriwrapper][div class=fyuribox1][div class=fyuriimagebox][img]http://via.placeholder.com/300x300[/img][/div][div class=fyuriheader][fa]fa-id-card-o[/fa] Identification[/div][div=padding:5px;][b]Name[/b]:
[b]Rank[/b]: [/div][div class=fyuriheader][fa]fa-tasks[/fa] Stats[/div]
[div=padding:5px;][row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row][/div]

[div class=fyuriheader][fa]fa-tasks[/fa] Skills[/div]
[div=padding:5px;][row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row][/div]

[/div][div class=fyuribox2][div=padding:5px;][div class=fyuriheader2][fa]fa-user-circle[/fa] Character Name[/div][/div][div class=fyuriheader][fa]fa-info-circle[/fa] General[/div]
[div=padding:5px;][b]Age[/b]: 

[b]Gender[/b]:

[b]Race[/b]: 

[b]Sexual Orientation[/b]:
[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, justo at ultrices finibus, nulla enim lacinia dui, at finibus mi erat eu nulla. Nullam sagittis aliquam diam at condimentum. Quisque interdum dolor semper metus porttitor, dapibus viverra tellus cursus. Sed pulvinar urna in metus pharetra finibus. Nulla facilisi. Suspendisse sed magna et leo fringilla commodo. Etiam convallis magna id ante faucibus, vitae posuere ligula fringilla. Vestibulum ornare finibus finibus.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Sed aliquet venenatis pharetra. Mauris sodales dignissim purus, et hendrerit odio rutrum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac justo arcu. Morbi at dapibus metus. Ut at facilisis orci. Pellentesque ut pulvinar dui. Aliquam consequat dapibus laoreet. Integer porta venenatis cursus. Nunc cursus quis ante at sagittis. Quisque non tincidunt elit, non efficitur odio.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Aliquam velit nisl, iaculis sit amet dolor in, dictum viverra purus. Quisque quis dapibus tortor, et imperdiet tellus. In nec dapibus metus, vel varius erat. Ut in nisi turpis. Sed in porta arcu. Donec venenatis eu lectus non congue. Nunc at cursus dolor. Nulla pretium velit id enim condimentum elementum. Vivamus pulvinar orci at magna posuere faucibus a vel velit.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Sed sit amet pharetra eros. Etiam erat turpis, pulvinar et dictum quis, vehicula elementum nibh. Aliquam quis vestibulum sapien. Duis ac eros ipsum. Nullam tristique nisi nec tortor efficitur molestie. Pellentesque odio lectus, facilisis id quam quis, eleifend bibendum erat. Cras pharetra turpis eget odio imperdiet lobortis. Aenean at lorem magna. Integer quis auctor mauris, non elementum lectus. Duis facilisis aliquet turpis, id tincidunt urna rhoncus id. Aliquam quis tellus purus.[/div]
[/div][/div][nobr]
[div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8665183]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by [USER=39545]@Fyuri[/USER][/comment]
[font=Rubik Mono One][div=display:none;].[/div][/font]
[font=Oswald][div=display:none;].[/div][/font]
[class=fyuriwrapper]
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:850px;
margin:auto;
border:1px solid rgba(0,0,0, 0.1);
[/class]

[class=fyuribox1]
 width: 300px;
 margin: 10px 5px 10px 10px;
border:1px solid black;
[/class]

[class=fyuribox2]
flex: 1;
margin: 10px 10px 10px 5px;
border:1px solid black;
[/class]

[class=fyuriimagebox]
width:100%;
pointer-events:none;
padding-bottom:5px;
[/class]

[class=fyuriheader]
width:calc(100% - 20px);
height:35px;
background:#313131;
padding:10px;
font-family: 'Oswald', Impact, Verdana;
font-size:25px;
color:#fff
[/class]

[class=fyuriheader2]
width:calc(100% - 20px);
height:35px;
padding:0px 10px 10px 0px;
font-family: 'Oswald', Impact, Verdana;
font-size:30px;
[/class]

[class=fyuricredit]
max-width:850px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Another fun experiment using hovers to create faux affects, this time, faux tabs! Hover over an icon on the left and see 'tabbed' content. Thanks to @Alteras for assistance~

Default Content
[div class=main]Main Content[div]


'Tab' Hover Content
[div class=tab1]Content for Tab 1[div]

[div class=tab2]Content for Tab 2[div]

[div class=tab3]Content for Tab 3[div]


FA 'Tab' Icon
[div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;]FA ICON[/div]
desktop only
not mobile friendly
visible scroll
hovers
gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.

Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Nunc ut felis tellus. Fusce non diam faucibus, congue enim tincidunt, tincidunt mauris. Nulla dignissim nec ipsum at sagittis. Sed auctor ornare erat ac tristique. Pellentesque sagittis congue urna et iaculis. Aliquam nisi quam, luctus vitae neque id, tempus gravida ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam leo turpis, tempus ac viverra vel, cursus in nunc. Aliquam est magna, consectetur vitae lectus sit amet, ultricies sodales augue. Nam mattis massa vel urna blandit faucibus. Sed bibendum lacus vel faucibus venenatis. Maecenas at rhoncus sapien, eu venenatis ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempus pulvinar nibh, ac pretium justo vehicula non. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis condimentum arcu. Vivamus congue, felis eget fringilla cursus, justo erat posuere augue, vel egestas lorem lacus non est. Donec accumsan neque leo, in pharetra turpis aliquet in. Mauris sed laoreet arcu. Sed odio quam, semper a aliquam ac, pulvinar vel felis. Vestibulum eros odio, accumsan vel tellus vel, dignissim commodo velit. Nullam fermentum odio quis ipsum fermentum dignissim. Aenean sit amet dolor mollis, posuere metus in, hendrerit est. Aenean ac ultrices neque. Suspendisse eget molestie urna, nec pretium libero. Donec purus magna, porttitor lobortis suscipit sit amet, tincidunt vitae velit. Praesent metus libero, pellentesque ac pretium nec, ornare sed eros. Nulla dui massa, dapibus quis urna ac, mattis sodales ante. Quisque eu sem eu est molestie porta.

Aenean ullamcorper consectetur elit, at dignissim turpis ornare ac. Sed lorem libero, volutpat non ex eu, porttitor finibus risus. Duis lorem leo, porta at lorem molestie, feugiat consectetur quam. Nullam molestie dui ut sapien rhoncus egestas. Etiam non ornare lacus. Nam sollicitudin orci vitae pellentesque laoreet. Cras id congue orci. Sed eu eleifend turpis. Vestibulum mauris quam, vehicula non vulputate ac, aliquam sit amet libero. Cras nec dapibus lacus, nec aliquet lacus. Curabitur ac neque nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique eros, at egestas magna. Vestibulum ante magna, lacinia sit amet nibh sit amet, pretium varius nibh.

Aliquam finibus ante cursus, suscipit eros in, tincidunt mauris. Sed lacinia, diam ac interdum ornare, est nulla lacinia arcu, ut commodo erat libero aliquam nulla. Mauris at sem dui. Phasellus viverra urna vestibulum purus vehicula ultrices. Sed ut nulla consectetur, bibendum dolor eget, cursus est. Nunc porta fringilla volutpat. Nullam eu arcu erat. Mauris posuere nunc fringilla lacus vehicula aliquet. Nulla rhoncus condimentum arcu. Aenean auctor neque vel diam feugiat, ac semper mi porta. Sed dictum felis non odio dignissim suscipit. Donec dignissim nulla ante, ac pulvinar est finibus vel.

Ut id felis arcu. Etiam eu mattis elit. Aenean suscipit lectus sit amet commodo vehicula. Aenean ultricies orci id nisi tincidunt, sodales pretium sem interdum. Morbi vulputate tellus mi. Quisque nec placerat magna, ut tincidunt diam. Quisque dapibus lectus sapien, eget condimentum velit consectetur eget. Ut vulputate arcu ac lorem sodales scelerisque. Duis imperdiet velit quis lacinia feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta euismod mauris et lacinia. Nunc finibus sed lectus non mattis. Donec id justo vitae turpis viverra auctor id at sem. Curabitur rhoncus neque vitae ligula dictum hendrerit. Praesent scelerisque interdum orci, eu sodales massa elementum non. Sed ac metus a lectus lobortis imperdiet convallis vel enim.
Code:
[div class=fyuriwrapper][div class=tabs][div class=tab1][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-user-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div]
[div class=tab2][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-info-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div]
[div class=tab3][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fab fa-telegram[/fa][/div]Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Nunc ut felis tellus. Fusce non diam faucibus, congue enim tincidunt, tincidunt mauris. Nulla dignissim nec ipsum at sagittis. Sed auctor ornare erat ac tristique. Pellentesque sagittis congue urna et iaculis. Aliquam nisi quam, luctus vitae neque id, tempus gravida ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam leo turpis, tempus ac viverra vel, cursus in nunc. Aliquam est magna, consectetur vitae lectus sit amet, ultricies sodales augue. Nam mattis massa vel urna blandit faucibus. Sed bibendum lacus vel faucibus venenatis. Maecenas at rhoncus sapien, eu venenatis ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempus pulvinar nibh, ac pretium justo vehicula non. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/div][/div]
[div class=main]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis condimentum arcu. Vivamus congue, felis eget fringilla cursus, justo erat posuere augue, vel egestas lorem lacus non est. Donec accumsan neque leo, in pharetra turpis aliquet in. Mauris sed laoreet arcu. Sed odio quam, semper a aliquam ac, pulvinar vel felis. Vestibulum eros odio, accumsan vel tellus vel, dignissim commodo velit. Nullam fermentum odio quis ipsum fermentum dignissim. Aenean sit amet dolor mollis, posuere metus in, hendrerit est. Aenean ac ultrices neque. Suspendisse eget molestie urna, nec pretium libero. Donec purus magna, porttitor lobortis suscipit sit amet, tincidunt vitae velit. Praesent metus libero, pellentesque ac pretium nec, ornare sed eros. Nulla dui massa, dapibus quis urna ac, mattis sodales ante. Quisque eu sem eu est molestie porta.

Aenean ullamcorper consectetur elit, at dignissim turpis ornare ac. Sed lorem libero, volutpat non ex eu, porttitor finibus risus. Duis lorem leo, porta at lorem molestie, feugiat consectetur quam. Nullam molestie dui ut sapien rhoncus egestas. Etiam non ornare lacus. Nam sollicitudin orci vitae pellentesque laoreet. Cras id congue orci. Sed eu eleifend turpis. Vestibulum mauris quam, vehicula non vulputate ac, aliquam sit amet libero. Cras nec dapibus lacus, nec aliquet lacus. Curabitur ac neque nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique eros, at egestas magna. Vestibulum ante magna, lacinia sit amet nibh sit amet, pretium varius nibh.

Aliquam finibus ante cursus, suscipit eros in, tincidunt mauris. Sed lacinia, diam ac interdum ornare, est nulla lacinia arcu, ut commodo erat libero aliquam nulla. Mauris at sem dui. Phasellus viverra urna vestibulum purus vehicula ultrices. Sed ut nulla consectetur, bibendum dolor eget, cursus est. Nunc porta fringilla volutpat. Nullam eu arcu erat. Mauris posuere nunc fringilla lacus vehicula aliquet. Nulla rhoncus condimentum arcu. Aenean auctor neque vel diam feugiat, ac semper mi porta. Sed dictum felis non odio dignissim suscipit. Donec dignissim nulla ante, ac pulvinar est finibus vel.

Ut id felis arcu. Etiam eu mattis elit. Aenean suscipit lectus sit amet commodo vehicula. Aenean ultricies orci id nisi tincidunt, sodales pretium sem interdum. Morbi vulputate tellus mi. Quisque nec placerat magna, ut tincidunt diam. Quisque dapibus lectus sapien, eget condimentum velit consectetur eget. Ut vulputate arcu ac lorem sodales scelerisque. Duis imperdiet velit quis lacinia feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta euismod mauris et lacinia. Nunc finibus sed lectus non mattis. Donec id justo vitae turpis viverra auctor id at sem. Curabitur rhoncus neque vitae ligula dictum hendrerit. Praesent scelerisque interdum orci, eu sodales massa elementum non. Sed ac metus a lectus lobortis imperdiet convallis vel enim.[/div][/div][nobr]
[div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8668997]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by [USER=39545]@Fyuri[/USER][/comment]
[class=fyuriwrapper]
position:relative;
z-index:0;
display: flex;
flex-wrap: wrap;
max-width:600px;
height:600px;
margin:10px auto;
background:transparent;
overflow:hidden;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
[/class]

[class=tabs]
position:absolute;
z-index:2;
width:75px;
height:600px;
background: #4dfff3; 
background: -moz-linear-gradient(top, #4dfff3 56%, #52ffb8 100%); 
background: -webkit-linear-gradient(top, #4dfff3 56%,#52ffb8 100%);
background: linear-gradient(to bottom, #4dfff3 56%,#52ffb8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfff3', endColorstr='#52ffb8',GradientType=0 ); 
[/class]

[class=tab1]
position:absolute;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab1 state=hover]
position:absolute;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab2]
position:absolute;
top:54px;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1s, height 1.5s 1s, color 0s 0s, top 1.5s 1s linear;
padding:10px;
overflow:hidden;
[/class]

[class name=tab2 state=hover]
position:absolute;
top:0px;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#000;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab3]
position:absolute;
top:108px;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1s, height 1.5s 1s, color 0s 0s, top 1.5s 1s linear;
padding:10px;
overflow:hidden;
[/class]

[class name=tab3 state=hover]
position:absolute;
top:0px;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#000;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=main]
position:relative;
height:580px;
margin-left:75px;
z-index:1;
flex: 1;
background:#fff;
padding:10px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]

[class=fyuricredit]
max-width:600px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Here is the faux tab sister to my previous version; horizontal faux tabs. Of course, @Alteras helped me with my overthinking again. X3

Default Content
[div class=main]Main Content[div]


'Tab' Hover Content
[div class=tab1]Content for Tab 1[div]

[div class=tab2]Content for Tab 2[div]

[div class=tab3]Content for Tab 3[div]


FA 'Tab' Icon
[div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;]FA ICON[/div]
desktop only
not mobile friendly
visible scroll
hovers
gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.
Sed a ex eu lorem mattis consequat at eget felis. Sed a tempor enim, sit amet volutpat arcu. Aenean iaculis est sit amet diam lacinia, sit amet ullamcorper sem tristique. Cras vestibulum lorem lacinia dictum sagittis. Phasellus id nunc ipsum. Mauris non felis suscipit metus pellentesque luctus. In ultricies quam libero, sit amet commodo nisi fringilla pulvinar. Curabitur feugiat, diam sed faucibus facilisis, odio justo rutrum diam, et maximus erat sem sed nunc. Aenean lobortis tellus id hendrerit tincidunt. Curabitur eget turpis congue, pharetra velit vel, faucibus leo. Ut at erat non magna sodales sollicitudin. Morbi blandit odio a turpis congue aliquam. Nullam interdum erat quis libero sagittis, id vestibulum justo ultricies. Sed ligula velit, tincidunt vel augue vitae, auctor tristique purus. Proin pretium tincidunt dolor. Nunc lobortis porttitor turpis quis posuere.

Aliquam volutpat pellentesque efficitur. Morbi imperdiet ante non felis accumsan pulvinar. Suspendisse massa erat, sodales malesuada lorem non, congue accumsan lacus. In ac lorem sapien. Curabitur rhoncus ipsum nec scelerisque tempor. Etiam quis magna quis augue semper placerat. Pellentesque malesuada condimentum elit, ac vulputate erat. Etiam quis dignissim risus. Quisque dictum pharetra lorem ut elementum. Vivamus posuere ligula a malesuada convallis. Donec lacinia mi eros, sed tincidunt mauris lobortis vel. Morbi dapibus, tellus at luctus sodales, massa odio eleifend nulla, vehicula venenatis leo nibh ut mi. Quisque porta augue magna, ac consectetur nibh dapibus sagittis. Integer sed est ligula.

Praesent vestibulum risus ut lobortis semper. In consequat ante in neque blandit tempor. Phasellus sodales ante vel consectetur hendrerit. Suspendisse sed erat quis mauris scelerisque porttitor nec quis lacus. Integer in ligula urna. Ut sodales tempor nisi ullamcorper feugiat. In eget nibh pharetra, sagittis neque eu, porttitor felis. Nullam pellentesque viverra risus sit amet mollis. Duis commodo ac velit nec efficitur. Curabitur sed condimentum ipsum. Donec ac justo at dolor condimentum convallis sit amet eu mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam mauris odio, sollicitudin ut orci sed, ultricies bibendum velit.
Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ante sit amet posuere iaculis. Phasellus viverra id nisi in pellentesque. Vestibulum leo eros, elementum a dolor vel, bibendum fermentum justo. Aliquam ullamcorper feugiat tristique. Quisque aliquam nisl non ligula rhoncus pulvinar. Sed ullamcorper, nulla in congue egestas, ex odio venenatis orci, finibus sagittis sapien quam in tortor. Curabitur vel magna elementum nisl interdum lobortis. Donec a vulputate nibh. Integer rhoncus commodo ante quis iaculis.

Praesent vestibulum vehicula ipsum id molestie. Nulla suscipit diam dapibus viverra dapibus. Morbi at facilisis dolor. Nullam vitae lacinia erat. Integer sed ex sem. Mauris convallis a ligula sed maximus. Duis faucibus leo id metus tincidunt fringilla. Nullam eget libero tincidunt sem sagittis malesuada non eget mi. Phasellus sit amet diam sodales, scelerisque arcu et, interdum est. Curabitur venenatis lacus a vestibulum lacinia. Sed ac consectetur orci. Praesent scelerisque pharetra facilisis. Vestibulum interdum blandit ultricies. Nunc ornare risus sodales, hendrerit dui vitae, consectetur mi.

Sed finibus vitae risus ut placerat. Sed nec quam sit amet nisl eleifend luctus et in lectus. Mauris posuere ligula ac metus iaculis commodo. Aenean faucibus, eros ac vulputate pharetra, neque massa ultricies ex, quis vestibulum magna magna posuere sem. Fusce a nisi vulputate, sollicitudin sem at, scelerisque turpis. Donec et suscipit erat. Curabitur ante turpis, elementum et ligula ac, accumsan finibus purus. Cras sit amet mi id nisi pharetra imperdiet. Etiam quam magna, volutpat quis ex non, semper rhoncus dui. Fusce eget consequat metus. Morbi elementum erat nunc, at condimentum risus blandit maximus. Nunc erat felis, porta a fermentum id, porttitor nec ex. Sed consequat massa id massa finibus, a vulputate magna pellentesque. Nullam vehicula vulputate lacus, ac facilisis mi tincidunt in.

Nam egestas eget lacus at lacinia. Pellentesque at nunc a velit laoreet varius. In hac habitasse platea dictumst. Proin condimentum orci accumsan nibh tristique lacinia. Quisque non aliquet odio. Duis blandit purus sagittis vulputate sollicitudin. Proin id ornare mi, vel pellentesque dolor.

Vivamus blandit orci sem. Cras scelerisque lectus placerat lacinia ullamcorper. Quisque viverra ligula id enim egestas imperdiet. Nulla ac tellus nec nibh aliquet commodo et vel ex. Sed pharetra id libero id rhoncus. Cras vel purus nec neque gravida lobortis. Nullam odio nisi, sodales in nibh eu, egestas tincidunt lorem. Mauris vitae cursus erat, et sodales purus. Aliquam porttitor nibh vitae velit euismod interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Code:
[div class=fyuriwrapper][div class=tabscontainer][div class=tab1][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-user-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div][div class=tab2][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-info-circle[/fa][/div]Sed a ex eu lorem mattis consequat at eget felis. Sed a tempor enim, sit amet volutpat arcu. Aenean iaculis est sit amet diam lacinia, sit amet ullamcorper sem tristique. Cras vestibulum lorem lacinia dictum sagittis. Phasellus id nunc ipsum. Mauris non felis suscipit metus pellentesque luctus. In ultricies quam libero, sit amet commodo nisi fringilla pulvinar. Curabitur feugiat, diam sed faucibus facilisis, odio justo rutrum diam, et maximus erat sem sed nunc. Aenean lobortis tellus id hendrerit tincidunt. Curabitur eget turpis congue, pharetra velit vel, faucibus leo. Ut at erat non magna sodales sollicitudin. Morbi blandit odio a turpis congue aliquam. Nullam interdum erat quis libero sagittis, id vestibulum justo ultricies. Sed ligula velit, tincidunt vel augue vitae, auctor tristique purus. Proin pretium tincidunt dolor. Nunc lobortis porttitor turpis quis posuere.

Aliquam volutpat pellentesque efficitur. Morbi imperdiet ante non felis accumsan pulvinar. Suspendisse massa erat, sodales malesuada lorem non, congue accumsan lacus. In ac lorem sapien. Curabitur rhoncus ipsum nec scelerisque tempor. Etiam quis magna quis augue semper placerat. Pellentesque malesuada condimentum elit, ac vulputate erat. Etiam quis dignissim risus. Quisque dictum pharetra lorem ut elementum. Vivamus posuere ligula a malesuada convallis. Donec lacinia mi eros, sed tincidunt mauris lobortis vel. Morbi dapibus, tellus at luctus sodales, massa odio eleifend nulla, vehicula venenatis leo nibh ut mi. Quisque porta augue magna, ac consectetur nibh dapibus sagittis. Integer sed est ligula.

Praesent vestibulum risus ut lobortis semper. In consequat ante in neque blandit tempor. Phasellus sodales ante vel consectetur hendrerit. Suspendisse sed erat quis mauris scelerisque porttitor nec quis lacus. Integer in ligula urna. Ut sodales tempor nisi ullamcorper feugiat. In eget nibh pharetra, sagittis neque eu, porttitor felis. Nullam pellentesque viverra risus sit amet mollis. Duis commodo ac velit nec efficitur. Curabitur sed condimentum ipsum. Donec ac justo at dolor condimentum convallis sit amet eu mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam mauris odio, sollicitudin ut orci sed, ultricies bibendum velit.[/div][div class=tab3][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fab fa-telegram[/fa][/div]Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.[/div][/div]
[div class=main]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ante sit amet posuere iaculis. Phasellus viverra id nisi in pellentesque. Vestibulum leo eros, elementum a dolor vel, bibendum fermentum justo. Aliquam ullamcorper feugiat tristique. Quisque aliquam nisl non ligula rhoncus pulvinar. Sed ullamcorper, nulla in congue egestas, ex odio venenatis orci, finibus sagittis sapien quam in tortor. Curabitur vel magna elementum nisl interdum lobortis. Donec a vulputate nibh. Integer rhoncus commodo ante quis iaculis.

Praesent vestibulum vehicula ipsum id molestie. Nulla suscipit diam dapibus viverra dapibus. Morbi at facilisis dolor. Nullam vitae lacinia erat. Integer sed ex sem. Mauris convallis a ligula sed maximus. Duis faucibus leo id metus tincidunt fringilla. Nullam eget libero tincidunt sem sagittis malesuada non eget mi. Phasellus sit amet diam sodales, scelerisque arcu et, interdum est. Curabitur venenatis lacus a vestibulum lacinia. Sed ac consectetur orci. Praesent scelerisque pharetra facilisis. Vestibulum interdum blandit ultricies. Nunc ornare risus sodales, hendrerit dui vitae, consectetur mi.

Sed finibus vitae risus ut placerat. Sed nec quam sit amet nisl eleifend luctus et in lectus. Mauris posuere ligula ac metus iaculis commodo. Aenean faucibus, eros ac vulputate pharetra, neque massa ultricies ex, quis vestibulum magna magna posuere sem. Fusce a nisi vulputate, sollicitudin sem at, scelerisque turpis. Donec et suscipit erat. Curabitur ante turpis, elementum et ligula ac, accumsan finibus purus. Cras sit amet mi id nisi pharetra imperdiet. Etiam quam magna, volutpat quis ex non, semper rhoncus dui. Fusce eget consequat metus. Morbi elementum erat nunc, at condimentum risus blandit maximus. Nunc erat felis, porta a fermentum id, porttitor nec ex. Sed consequat massa id massa finibus, a vulputate magna pellentesque. Nullam vehicula vulputate lacus, ac facilisis mi tincidunt in.

Nam egestas eget lacus at lacinia. Pellentesque at nunc a velit laoreet varius. In hac habitasse platea dictumst. Proin condimentum orci accumsan nibh tristique lacinia. Quisque non aliquet odio. Duis blandit purus sagittis vulputate sollicitudin. Proin id ornare mi, vel pellentesque dolor.

Vivamus blandit orci sem. Cras scelerisque lectus placerat lacinia ullamcorper. Quisque viverra ligula id enim egestas imperdiet. Nulla ac tellus nec nibh aliquet commodo et vel ex. Sed pharetra id libero id rhoncus. Cras vel purus nec neque gravida lobortis. Nullam odio nisi, sodales in nibh eu, egestas tincidunt lorem. Mauris vitae cursus erat, et sodales purus. Aliquam porttitor nibh vitae velit euismod interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/div][/div][nobr]
[div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8673174]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by [USER=39545]@Fyuri[/USER][/comment]
[class=fyuriwrapper]
position:relative;
z-index:0;
display: flex;
flex-wrap: wrap;
max-width:600px;
height:600px;
margin:10px auto;
background:transparent;
overflow:hidden;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
background:#fff;
[/class]

[class=tabscontainer]
position:absolute;
z-index:1;
width:100%;
height:50px;
background: #494949; 
background: -moz-linear-gradient(left, #494949 0%, #7c7a7a 100%); 
background: -webkit-linear-gradient(left, #494949 0%,#7c7a7a 100%);
background: linear-gradient(to right, #494949 0%,#7c7a7a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#7c7a7a',GradientType=1 ); 
[/class]

[class=tab1]
position:absolute;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, z-index 1.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab1 state=hover]
position:absolute;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, z-index 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab2]
position:absolute;
margin-left:56px;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, margin-left 0.5s linear, z-index 1.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab2 state=hover]
position:absolute;
margin-left:0px;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, margin-left 0.5s linear, z-index 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab3]
position:absolute;
margin-left:112px;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, margin-left 0.5s linear;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab3 state=hover]
position:absolute;
margin-left:0px;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, margin-left 0.5s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=main]
position:relative;
z-index:0;
margin-top:50px;
width:100%;
height:550px;
box-sizing: border-box;
padding:10px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]

[class=fyuricredit]
max-width:600px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Another simple design with a bit of experimentation of better overlays. Unfortunately, this isn't mobile friendly and it probably too minimal to interest others in using it. >_>;;

Your FC
Optimal size is 150px x 150px. Replace the following URL with you image:
http://via.placeholder.com/150x150


Header
[div class=fyuri10textarea]HEADER[/div]


Purple Content Box
[div class=fyuri10purplebox]CONTENT HERE[/div]
not mobile friendly
hidden scroll
purple
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis est quis leo euismod rutrum. Vivamus vitae sagittis turpis. Praesent tristique augue sit amet augue suscipit, id volutpat lectus tristique. Etiam nec ex lorem. Integer bibendum lacus ut lorem tempor, at viverra erat venenatis. Aenean ornare libero massa, sed commodo lorem blandit et. In hac habitasse platea dictumst. Vivamus scelerisque eros ac purus ornare interdum. Sed ut consectetur sem. Sed ac tincidunt quam. Proin felis massa, elementum et ligula eget, congue faucibus urna. Integer pellentesque malesuada leo dignissim pharetra. Fusce fringilla, nunc vel euismod vestibulum, ex quam vulputate mi, a venenatis mauris urna a purus. Pellentesque cursus tempor orci sed auctor. Donec viverra at ante vel dapibus.

Header

Pellentesque luctus dictum nisl, et vulputate lacus egestas vulputate. Suspendisse potenti. In consectetur suscipit turpis, nec fermentum augue pulvinar et. Sed tempor, massa et semper finibus, sapien lectus condimentum diam, sit amet commodo ligula arcu vel lacus. Proin in interdum magna, ac fermentum quam. Maecenas vel sagittis urna, id iaculis leo. Cras gravida interdum turpis. Donec arcu odio, feugiat sit amet tortor id, vehicula semper ex. Donec tincidunt metus id augue tempor, vel auctor ex tincidunt. Praesent tincidunt, nisi vitae interdum porta, velit ante facilisis urna, sit amet venenatis metus sem in lectus. Aenean ut ligula sit amet urna maximus hendrerit vel pulvinar mi. Vestibulum quis urna diam. Nulla nibh leo, lobortis at nisl et, mollis convallis nisi. Maecenas quis eleifend tellus.


Nulla eu interdum leo. Pellentesque venenatis ornare lacus, a tempor nisl eleifend non. Vestibulum sit amet porttitor massa. Donec eu aliquet lorem. Curabitur bibendum congue ultricies. Donec feugiat luctus lacus, a venenatis erat aliquet ac. Sed a auctor nisl. Phasellus venenatis eu nisi ac consectetur. Donec sed dolor nec mi aliquet faucibus sed at metus. Suspendisse potenti. Aenean quis fringilla odio. Pellentesque interdum diam vel neque vestibulum, vel dignissim eros rutrum.

Ut convallis fermentum accumsan. Integer tempor viverra massa, eget dapibus sapien pharetra in. Sed eu aliquet felis. Mauris mattis, felis et sodales blandit, arcu mauris vestibulum nibh, et lobortis metus lectus non enim. Mauris lorem orci, ornare consectetur leo sed, convallis malesuada metus. Donec ligula libero, vehicula id lacus a, tempor cursus ipsum. Praesent mattis turpis elit, elementum volutpat ante ornare sit amet. Suspendisse quam leo, egestas vitae luctus et, convallis sed risus. Integer et scelerisque est, vitae dignissim sapien. Vestibulum fringilla, mi et laoreet feugiat, nisl nunc tincidunt sem, sit amet dictum metus turpis venenatis purus. Nunc bibendum convallis odio sed tincidunt. Praesent nisi purus, tincidunt non metus non, dapibus sollicitudin turpis. Ut congue non ex a aliquam. Cras sit amet diam ut ante venenatis blandit suscipit sed tortor
.
Code:
[div=padding:10px 0px 10px 0px;][div class=fyuri10wrapper][div class=fyuri10whitecircle][div class=fyuri10purplecircle][div class=fyuri10imagecircle][/div][/div][/div][div class=fyuri10text][div class=fyuri10parent][div class=fyuri10child][div class=fyuri10textarea][div class=fyuri10header]Header[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis est quis leo euismod rutrum. Vivamus vitae sagittis turpis. Praesent tristique augue sit amet augue suscipit, id volutpat lectus tristique. Etiam nec ex lorem. Integer bibendum lacus ut lorem tempor, at viverra erat venenatis. Aenean ornare libero massa, sed commodo lorem blandit et. In hac habitasse platea dictumst. Vivamus scelerisque eros ac purus ornare interdum. Sed ut consectetur sem. Sed ac tincidunt quam. Proin felis massa, elementum et ligula eget, congue faucibus urna. Integer pellentesque malesuada leo dignissim pharetra. Fusce fringilla, nunc vel euismod vestibulum, ex quam vulputate mi, a venenatis mauris urna a purus. Pellentesque cursus tempor orci sed auctor. Donec viverra at ante vel dapibus.

[div class=fyuri10header]Header[/div]
[div class=fyuri10purplebox]Pellentesque luctus dictum nisl, et vulputate lacus egestas vulputate. Suspendisse potenti. In consectetur suscipit turpis, nec fermentum augue pulvinar et. Sed tempor, massa et semper finibus, sapien lectus condimentum diam, sit amet commodo ligula arcu vel lacus. Proin in interdum magna, ac fermentum quam. Maecenas vel sagittis urna, id iaculis leo. Cras gravida interdum turpis. Donec arcu odio, feugiat sit amet tortor id, vehicula semper ex. Donec tincidunt metus id augue tempor, vel auctor ex tincidunt. Praesent tincidunt, nisi vitae interdum porta, velit ante facilisis urna, sit amet venenatis metus sem in lectus. Aenean ut ligula sit amet urna maximus hendrerit vel pulvinar mi. Vestibulum quis urna diam. Nulla nibh leo, lobortis at nisl et, mollis convallis nisi. Maecenas quis eleifend tellus.[/div]

Nulla eu interdum leo. Pellentesque venenatis ornare lacus, a tempor nisl eleifend non. Vestibulum sit amet porttitor massa. Donec eu aliquet lorem. Curabitur bibendum congue ultricies. Donec feugiat luctus lacus, a venenatis erat aliquet ac. Sed a auctor nisl. Phasellus venenatis eu nisi ac consectetur. Donec sed dolor nec mi aliquet faucibus sed at metus. Suspendisse potenti. Aenean quis fringilla odio. Pellentesque interdum diam vel neque vestibulum, vel dignissim eros rutrum.

Ut convallis fermentum accumsan. Integer tempor viverra massa, eget dapibus sapien pharetra in. Sed eu aliquet felis. Mauris mattis, felis et sodales blandit, arcu mauris vestibulum nibh, et lobortis metus lectus non enim. Mauris lorem orci, ornare consectetur leo sed, convallis malesuada metus. Donec ligula libero, vehicula id lacus a, tempor cursus ipsum. Praesent mattis turpis elit, elementum volutpat ante ornare sit amet. Suspendisse quam leo, egestas vitae luctus et, convallis sed risus. Integer et scelerisque est, vitae dignissim sapien. Vestibulum fringilla, mi et laoreet feugiat, nisl nunc tincidunt sem, sit amet dictum metus turpis venenatis purus. Nunc bibendum convallis odio sed tincidunt. Praesent nisi purus, tincidunt non metus non, dapibus sollicitudin turpis. Ut congue non ex a aliquam. Cras sit amet diam ut ante venenatis blandit suscipit sed tortor[/div][/div][/div][/div][/div][/div][nobr]
[div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8684848]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by [USER=39545]@Fyuri[/USER][/comment]
[font=Archivo Black][div=display:none;].[/div][/font]
[class=fyuri10wrapper]
width:400px;
height:600px;
margin:auto;
background-color:#fff;
overflow:hidden;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
[/class]

[class=fyuri10whitecircle]
position:relative;
z-index:1;
width:550px;
height:550px;
top:-350px;
left:-75px;
background-color:#ad6af3;

border-radius:50%;
[/class]

[class=fyuri10purplecircle]
position:absolute;
z-index:2;
top:130px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
width:400px;
height:400px;
background-color:#fff;
border-radius:50%;
[/class]

[class=fyuri10imagecircle]
position:relative;
top:235px;
width:150px;
height:150px;
background: url('http://via.placeholder.com/150x150') no-repeat center center;
margin:auto;
border-radius:50%;
color:transparent;
-webkit-box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
-moz-box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
[/class]

[class=fyuri10text]
position:relative;
z-index:0;
top:-435px;
width:400px;
height:485px;
margin:auto;
color:#313131;
[/class]

[class=fyuri10parent]
width:100%;
height:485px;

background-color:#ccc;
overflow:hidden;
[/class]

[class=fyuri10child]
width:100%;
height:390px;
padding:90px 17px 5px 5px;
background-color:#fff;
overflow:auto;
text-align:justify;
[/class]

[class=fyuri10header]
display:inline;
font-family:'Archivo Black', Verdana, Arial;
font-size:30px;
color:#ad6af3;
[/class]

[class=fyuri10textarea]
width:390px;
margin:auto;
color:#313131;
[/class]

[class=fyuri10purplebox]
width:380px;
margin:auto;
background-color:#ad6af3;
padding:5px;
color:#fff;
[/class]

[class=fyuricredit]
width:400px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
I decided to make a more modern version of the Mail BBCode found in the BBCode Guide. You can easily change the colors of the code to what you want, just change the background, border, and font colors. :3 The send button has a simple hover effect.

Message Subject
[div class=subject]Message Subject[/div]


Recipient Name
[div class=recipient]Recipient Name[/div]


Sender Name
[div class=sender]Sender Name[/div]


Mail message
[div class=message]Mail message[div]
mobile friendly
no scroll
mail

Message Subject
Recipient Name
Sender Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ullamcorper metus vitae dapibus. Sed consectetur lectus posuere tellus aliquam dictum. Aenean id lorem at justo vehicula porttitor id a magna. Donec ornare lorem elit, quis vulputate elit mollis sed. Aenean accumsan mollis vehicula. Etiam ac ultrices libero. Donec consectetur nibh et ipsum dapibus, eu dapibus nisl imperdiet. Nulla in est nec massa mattis tristique. Suspendisse in interdum arcu. Nullam ipsum magna, pharetra ac leo malesuada, ultrices interdum felis.

Mauris sed placerat urna. Sed eget lectus quis turpis vehicula gravida. Suspendisse nec eros ac enim accumsan commodo sed quis orci. Phasellus posuere fringilla mauris. Nunc eu augue nec tellus vestibulum volutpat. Phasellus at varius velit. Pellentesque iaculis massa orci, ut ornare dolor posuere non. Donec condimentum, velit luctus lacinia aliquam, erat lectus viverra nulla, vitae elementum nisl odio vel ligula. Pellentesque sodales vitae purus at fringilla.

Fusce in urna elementum, pretium magna at, laoreet quam. Nam nec erat ultrices, vehicula magna eget, euismod nisi. Aliquam sit amet massa id lorem pharetra consectetur. Curabitur vulputate urna quam, eu laoreet purus fermentum nec. Etiam consequat feugiat sapien, nec interdum sem dignissim at. Suspendisse iaculis mollis est, porttitor malesuada felis. Donec posuere mauris at tortor congue varius. Proin imperdiet purus blandit erat lacinia molestie. Mauris sed enim non eros tempor pretium quis at dui.
send

Code:
[div class=fyuriwrapper][div class=windowtop][fa]fa-window-minimize[/fa] [fa]fa-window-maximize[/fa] [fa]fa-window-close-o[/fa][/div][div class=subject]Message Subject[/div][div class=recipient]Recipient Name[/div][div class=sender]Sender Name[/div][div class=message]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ullamcorper metus vitae dapibus. Sed consectetur lectus posuere tellus aliquam dictum. Aenean id lorem at justo vehicula porttitor id a magna. Donec ornare lorem elit, quis vulputate elit mollis sed. Aenean accumsan mollis vehicula. Etiam ac ultrices libero. Donec consectetur nibh et ipsum dapibus, eu dapibus nisl imperdiet. Nulla in est nec massa mattis tristique. Suspendisse in interdum arcu. Nullam ipsum magna, pharetra ac leo malesuada, ultrices interdum felis.

Mauris sed placerat urna. Sed eget lectus quis turpis vehicula gravida. Suspendisse nec eros ac enim accumsan commodo sed quis orci. Phasellus posuere fringilla mauris. Nunc eu augue nec tellus vestibulum volutpat. Phasellus at varius velit. Pellentesque iaculis massa orci, ut ornare dolor posuere non. Donec condimentum, velit luctus lacinia aliquam, erat lectus viverra nulla, vitae elementum nisl odio vel ligula. Pellentesque sodales vitae purus at fringilla.

Fusce in urna elementum, pretium magna at, laoreet quam. Nam nec erat ultrices, vehicula magna eget, euismod nisi. Aliquam sit amet massa id lorem pharetra consectetur. Curabitur vulputate urna quam, eu laoreet purus fermentum nec. Etiam consequat feugiat sapien, nec interdum sem dignissim at. Suspendisse iaculis mollis est, porttitor malesuada felis. Donec posuere mauris at tortor congue varius. Proin imperdiet purus blandit erat lacinia molestie. Mauris sed enim non eros tempor pretium quis at dui.[/div][div class=bottom][div class=sendbutton]send[/div][/div][/div][nobr]
[div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8721026]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by [USER=39545]@Fyuri[/USER][/div][/comment]
[class=fyuriwrapper]
max-width:85%;
min-height:400px;
margin:10px auto;
background:#fff;
border:1px solid rgba(2,110,130, 0.4);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:hidden;
color:#313131;
[/class]

[class=windowtop]
width:100%;
height:35px;
box-sizing:border-box;
background:#026E82;
text-align:right;
color:#fff;
padding:5px;
font-size:18px;
[/class]

[class=subject]
width:100%;
box-sizing:border-box;
background:#36D1ED;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=recipient]
width:100%;
box-sizing:border-box;
background:#51E5FF;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=sender]
width:100%;
box-sizing:border-box;
background:#A5F1FF;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=message]
width:100%;
box-sizing:border-box;
background:#fff;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=bottom]
padding:15px 0px 15px 0px;
[/class]

[class name=sendbutton]
display:inline;
box-sizing:border-box;
background:#026E82;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
margin:5px;
padding:5px 7px 5px 7px;
color:#fff;
[/class]

[class name=sendbutton state=hover]
background:#36D1ED;
-webkit-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
cursor: pointer;
[/class]

[class=fyuricredit]
max-width:85%;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Another old code with small changes for a re-release. This was made to add a small menu bar at the top to be used for roleplay tabs before they returned; now it can be used in addition to give your RP a few more "tabs." Users can also use it as a spot for other things, like tagged players and such. The preview here doesn't do it justice, but the "banner menu" will rest right at the top of your post.

Content
All content goes within:
[div class=fyurifauxtabs]Header[/div]
mobile friendly
post header
simple

Text | Menu | Text | Option | Text | Tagged | Text | Menu | Text | Option | Text | Tagged | Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare diam at vehicula tempus. Proin auctor est at metus ornare, eget varius felis viverra. Quisque leo lectus, iaculis nec libero vitae, consectetur mattis ipsum. Nulla maximus mauris lectus, ut rutrum magna ornare ac. Duis id imperdiet elit, sit amet scelerisque felis. Aenean lobortis pulvinar arcu quis pharetra. Donec suscipit tincidunt lobortis. Morbi interdum odio ac sem euismod, eu sodales velit tristique. Sed lacus ipsum, egestas eget tempus non, fringilla sed erat.

Morbi porta gravida aliquam. Morbi justo nisi, egestas ut semper congue, viverra a diam. Donec fringilla efficitur tristique. Suspendisse potenti. Etiam maximus erat nec lorem mattis, quis ornare ante condimentum. Duis metus ligula, iaculis eu mauris ultricies, mollis bibendum purus. In tempus turpis sit amet diam laoreet, nec tempus velit congue. Cras ut purus fringilla, dictum sem eget, porttitor magna. Nunc bibendum scelerisque malesuada. Curabitur eleifend feugiat posuere. Integer condimentum dolor at fermentum molestie.

In sed gravida augue. Praesent vel nunc vitae ipsum viverra faucibus. Praesent vel nisl id arcu dignissim condimentum et id nunc. Nulla non nisi vel odio luctus varius. Donec vulputate congue urna a ullamcorper. Sed vehicula arcu ut tristique rhoncus. Integer commodo libero vel elementum aliquam. In ut lacus ac ex blandit accumsan vel egestas mi. Nullam fermentum, mi non vehicula condimentum, arcu mauris semper augue, id semper nunc purus malesuada est. Nulla enim diam, venenatis nec tortor a, semper tempus ipsum. Vivamus aliquet volutpat massa nec ullamcorper. Ut et sem nec orci rutrum facilisis et vel eros. Nunc bibendum interdum quam eu gravida. Ut accumsan consequat lacus id tempor. Mauris interdum diam est, ut luctus nisi egestas id.

Aliquam erat volutpat. Ut ullamcorper rutrum tincidunt. Duis id purus luctus, aliquet lectus eget, placerat nulla. Donec eget scelerisque ex, a feugiat dui. Sed lorem metus, fringilla ac tempor non, fermentum ac orci. Suspendisse ut massa augue. Integer nec dolor condimentum, venenatis nunc et, faucibus mauris. Sed condimentum ultricies interdum. Phasellus turpis mi, congue non accumsan in, dapibus id dui. Phasellus et turpis vel felis rhoncus egestas ut eget sem. Proin auctor elementum nunc egestas iaculis. Fusce ornare a leo pulvinar vehicula.

Nunc ullamcorper nec turpis eget pretium. Cras ullamcorper rhoncus felis sit amet faucibus. Donec volutpat venenatis felis at elementum. Curabitur vitae auctor quam, quis pulvinar massa. Mauris in mollis magna. Nunc fermentum, ligula condimentum vulputate iaculis, augue ex feugiat est, ut mattis lectus odio ullamcorper augue. Sed sodales quam vitae maximus sollicitudin. Ut lacinia orci eros, in posuere nisl iaculis quis. Nam a quam auctor, dictum enim vitae, porttitor orci.


Code:
[div class=fyurifauxtabs][font=PT Sans]Text | Menu | Text | Option | Text | Tagged | Text | Menu | Text | Option | Text | Tagged | Text[/font][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare diam at vehicula tempus. Proin auctor est at metus ornare, eget varius felis viverra. Quisque leo lectus, iaculis nec libero vitae, consectetur mattis ipsum. Nulla maximus mauris lectus, ut rutrum magna ornare ac. Duis id imperdiet elit, sit amet scelerisque felis. Aenean lobortis pulvinar arcu quis pharetra. Donec suscipit tincidunt lobortis. Morbi interdum odio ac sem euismod, eu sodales velit tristique. Sed lacus ipsum, egestas eget tempus non, fringilla sed erat.

Morbi porta gravida aliquam. Morbi justo nisi, egestas ut semper congue, viverra a diam. Donec fringilla efficitur tristique. Suspendisse potenti. Etiam maximus erat nec lorem mattis, quis ornare ante condimentum. Duis metus ligula, iaculis eu mauris ultricies, mollis bibendum purus. In tempus turpis sit amet diam laoreet, nec tempus velit congue. Cras ut purus fringilla, dictum sem eget, porttitor magna. Nunc bibendum scelerisque malesuada. Curabitur eleifend feugiat posuere. Integer condimentum dolor at fermentum molestie.

In sed gravida augue. Praesent vel nunc vitae ipsum viverra faucibus. Praesent vel nisl id arcu dignissim condimentum et id nunc. Nulla non nisi vel odio luctus varius. Donec vulputate congue urna a ullamcorper. Sed vehicula arcu ut tristique rhoncus. Integer commodo libero vel elementum aliquam. In ut lacus ac ex blandit accumsan vel egestas mi. Nullam fermentum, mi non vehicula condimentum, arcu mauris semper augue, id semper nunc purus malesuada est. Nulla enim diam, venenatis nec tortor a, semper tempus ipsum. Vivamus aliquet volutpat massa nec ullamcorper. Ut et sem nec orci rutrum facilisis et vel eros. Nunc bibendum interdum quam eu gravida. Ut accumsan consequat lacus id tempor. Mauris interdum diam est, ut luctus nisi egestas id.

Aliquam erat volutpat. Ut ullamcorper rutrum tincidunt. Duis id purus luctus, aliquet lectus eget, placerat nulla. Donec eget scelerisque ex, a feugiat dui. Sed lorem metus, fringilla ac tempor non, fermentum ac orci. Suspendisse ut massa augue. Integer nec dolor condimentum, venenatis nunc et, faucibus mauris. Sed condimentum ultricies interdum. Phasellus turpis mi, congue non accumsan in, dapibus id dui. Phasellus et turpis vel felis rhoncus egestas ut eget sem. Proin auctor elementum nunc egestas iaculis. Fusce ornare a leo pulvinar vehicula.

Nunc ullamcorper nec turpis eget pretium. Cras ullamcorper rhoncus felis sit amet faucibus. Donec volutpat venenatis felis at elementum. Curabitur vitae auctor quam, quis pulvinar massa. Mauris in mollis magna. Nunc fermentum, ligula condimentum vulputate iaculis, augue ex feugiat est, ut mattis lectus odio ullamcorper augue. Sed sodales quam vitae maximus sollicitudin. Ut lacinia orci eros, in posuere nisl iaculis quis. Nam a quam auctor, dictum enim vitae, porttitor orci.
[nobr]
[class=fyurifauxtabs]
width:100%;
text-align:center;
background:none;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
border-bottom:1px solid #fff;
[/class]
[/nobr]
[comment]code by [USER=39545]@Fyuri[/USER] .  Do not remove or alter this credit.[/comment]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
A dark themed code based on a dark UI I found on Pinterest. You can look into changing the gradient color yourself if you want.

Main Header
[div class=headermain]MAIN HEADER[/div]


Sub-Header
[div class=txtheader]SUB-HEADER[/div]


Gradient
The gradient for the background can be found in these two classes:
[class=gradient]GRADIENT FOUND IN HERE[/class]
mobile friendly
no scroll
gradient
browser best


Header Here

header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non nulla nisi. Donec gravida suscipit sapien vel ullamcorper. Nulla hendrerit lacus non pulvinar egestas. Phasellus porttitor massa sit amet erat semper, et molestie nisl rhoncus. Duis feugiat ullamcorper eros, eget molestie sem rhoncus id. Suspendisse lobortis eu urna sit amet mollis. Pellentesque placerat, ipsum lacinia venenatis laoreet, urna nulla volutpat justo, vel dignissim arcu elit id eros. Duis viverra ultrices ultricies. Nam ut auctor tellus. Cras id eros nec orci euismod tincidunt ornare a odio. Suspendisse imperdiet metus quis nulla gravida mollis. Mauris eget justo euismod, dapibus dui id, aliquam nulla. Etiam faucibus convallis turpis nec venenatis. Proin id sollicitudin nulla. Etiam urna ligula, commodo vitae dolor id, suscipit tempor urna.

Aliquam id gravida nisi. Ut in sem vitae sem fermentum consequat. Vestibulum id erat in ipsum feugiat faucibus ac quis magna. Vestibulum dignissim porttitor dui, id ultrices leo tempus a. Donec malesuada euismod sagittis. Aliquam ac faucibus ex, a mollis quam. Nullam ligula nisi, gravida a nisl non, imperdiet interdum metus.

Suspendisse et odio neque. Donec id ornare enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec sem id est tristique lobortis. Donec lacus turpis, auctor non finibus in, finibus at augue. Aenean at lacinia ex. Nunc augue lectus, elementum vel laoreet ac, facilisis id eros.

Donec eu enim maximus, imperdiet purus non, congue purus. Aenean consequat, nisl eget suscipit pulvinar, lacus est dictum leo, eu facilisis neque felis ut tellus. Pellentesque non turpis non risus congue fringilla. Etiam iaculis, mauris eget ullamcorper tempor, lacus odio mollis dolor, non faucibus ligula velit quis arcu. Praesent fermentum blandit massa ac aliquam. Integer fringilla mauris arcu, in iaculis libero pretium vel. Fusce rutrum finibus erat, et efficitur ante lacinia vel. Etiam porttitor rutrum nisl. Vivamus vitae nunc in purus facilisis efficitur. Nulla nec varius lorem, eget cursus ante. Etiam hendrerit, orci ut auctor pulvinar, urna tortor aliquet tellus, quis molestie lectus nisl ac turpis. Suspendisse id gravida ipsum, in sollicitudin nibh.

Vivamus vel lobortis tellus. Sed porttitor at neque vitae consectetur. Morbi convallis maximus lorem, a placerat mi euismod quis. Proin ullamcorper dui ut lorem luctus, a auctor odio mattis. Morbi id condimentum ipsum, nec ultrices metus. Duis vestibulum elit eget faucibus sagittis. Aenean facilisis lorem leo, vel auctor sem aliquet at. Morbi vel tortor in justo sollicitudin dignissim. Sed libero velit, dignissim a feugiat quis, consequat non est. Suspendisse semper diam non est euismod ultricies.


.

Code:
[div class=fyurimain][div class=gradient][/div]
[div class=headermain]Header Here[/div]
[div class=text][div class=txtheader]header[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non nulla nisi. Donec gravida suscipit sapien vel ullamcorper. Nulla hendrerit lacus non pulvinar egestas. Phasellus porttitor massa sit amet erat semper, et molestie nisl rhoncus. Duis feugiat ullamcorper eros, eget molestie sem rhoncus id. Suspendisse lobortis eu urna sit amet mollis. Pellentesque placerat, ipsum lacinia venenatis laoreet, urna nulla volutpat justo, vel dignissim arcu elit id eros. Duis viverra ultrices ultricies. Nam ut auctor tellus. Cras id eros nec orci euismod tincidunt ornare a odio. Suspendisse imperdiet metus quis nulla gravida mollis. Mauris eget justo euismod, dapibus dui id, aliquam nulla. Etiam faucibus convallis turpis nec venenatis. Proin id sollicitudin nulla. Etiam urna ligula, commodo vitae dolor id, suscipit tempor urna.

Aliquam id gravida nisi. Ut in sem vitae sem fermentum consequat. Vestibulum id erat in ipsum feugiat faucibus ac quis magna. Vestibulum dignissim porttitor dui, id ultrices leo tempus a. Donec malesuada euismod sagittis. Aliquam ac faucibus ex, a mollis quam. Nullam ligula nisi, gravida a nisl non, imperdiet interdum metus.

Suspendisse et odio neque. Donec id ornare enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec sem id est tristique lobortis. Donec lacus turpis, auctor non finibus in, finibus at augue. Aenean at lacinia ex. Nunc augue lectus, elementum vel laoreet ac, facilisis id eros.

Donec eu enim maximus, imperdiet purus non, congue purus. Aenean consequat, nisl eget suscipit pulvinar, lacus est dictum leo, eu facilisis neque felis ut tellus. Pellentesque non turpis non risus congue fringilla. Etiam iaculis, mauris eget ullamcorper tempor, lacus odio mollis dolor, non faucibus ligula velit quis arcu. Praesent fermentum blandit massa ac aliquam. Integer fringilla mauris arcu, in iaculis libero pretium vel. Fusce rutrum finibus erat, et efficitur ante lacinia vel. Etiam porttitor rutrum nisl. Vivamus vitae nunc in purus facilisis efficitur. Nulla nec varius lorem, eget cursus ante. Etiam hendrerit, orci ut auctor pulvinar, urna tortor aliquet tellus, quis molestie lectus nisl ac turpis. Suspendisse id gravida ipsum, in sollicitudin nibh.

Vivamus vel lobortis tellus. Sed porttitor at neque vitae consectetur. Morbi convallis maximus lorem, a placerat mi euismod quis. Proin ullamcorper dui ut lorem luctus, a auctor odio mattis. Morbi id condimentum ipsum, nec ultrices metus. Duis vestibulum elit eget faucibus sagittis. Aenean facilisis lorem leo, vel auctor sem aliquet at. Morbi vel tortor in justo sollicitudin dignissim. Sed libero velit, dignissim a feugiat quis, consequat non est. Suspendisse semper diam non est euismod ultricies.[/div]
[/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8866162]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by @fyuri[/comment]
[font=Bungee][div=display:none;].[/div][/font]
[nobr]
[class=fyurimain]
position: relative;
width:100%;
background:#252525;
box-sizing:border-box;
padding:0px 50px 0px 50px;
[/class]

[class=gradient]
position:absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
z-index:5;
height: auto;
min-height: 100% !important;
width:200px;
background: rgb(135,224,253); 
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(81,186,172,1) 100%); 
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(81,186,172,1) 100%); 
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(81,186,172,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#51baac',GradientType=0 );
[/class]

[class=headermain]
position:relative;
z-index:10;
top:100px;
font-family:'Bungee', Impact;
text-align:center;
font-size: 2.5rem;
text-shadow: 2px 2px 5px #000000;
color:#fff;
[/class]

[class=text] 
position:relative;
z-index:10;
width:100%;
box-sizing:border-box;
margin-top:100px;
margin-bottom:100px;
background:rgba(0,0,0, 0.5);
color:#fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:justify;
padding:5px;
[/class]

[class=txtheader]
width: calc(100% + 10px);
margin:-5px;
box-sizing:border-box;
background:#000;
font-size:20px;
font-family:'Bungee', Impact;
padding:5px;
[/class]

[class=fyuricredit]
opacity:0.3;
font-size:11px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Another character hover post. Remember to be careful with the dimensions of your image and you always can change the colors to fit your theme better.

Character Image
Optimal size is 330px x 500px.
[div class=img][img]http://via.placeholder.com/330x500[/img]


Character Name
[div class=name]Character Name[/div]


Colors
To change the color for the character name/hover bar change this color:
background:#da1445

To change the color for the text background:
background:rgba(155,155,161, 1.0);
mobile friendly
hidden scroll
hover

.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, justo a blandit placerat, libero ligula laoreet nulla, vel laoreet elit dolor ac nibh. Donec vel justo eu ipsum porttitor faucibus sed at dolor. Integer congue cursus nulla, in convallis nisi tincidunt eget. Nullam hendrerit ornare nisi, id ultrices odio luctus ac. Ut varius sagittis magna, non tincidunt orci dignissim et. Integer malesuada libero et neque commodo commodo. Nam at urna quam. Nulla et volutpat nisl. Pellentesque sed fermentum massa. Quisque tempus maximus metus, vitae varius purus varius id. Vivamus et quam euismod, fermentum tellus a, pharetra lectus.

Nam egestas mi a quam varius fermentum. Fusce sit amet metus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci nunc. Aliquam erat volutpat. Fusce consequat hendrerit mauris. In sem massa, suscipit eu ullamcorper ut, vehicula quis eros. Mauris quam tortor, elementum vitae lorem quis, aliquet cursus velit. Integer gravida quis nisi sit amet mattis. Fusce ex metus, pretium eget libero ut, vulputate lobortis augue.
Character Name
[/img]
HOVER FOR MORE

Code:
[div=display:none;][font=Roboto Condensed].[/font][/div]
[nobr]
[class=fyuriwrapper]
position:relative;
[/class]

[class=card]
position:relative;
z-index:0;
width:300px;
height:500px;
margin:auto;
background:#9b9ba1;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
text-align:center;
overflow:hidden;
[/class]

[class=img]
pointer-events:none;
[/class]

[class=name]
position:absolute;
top:20px;
left:0;
z-index:1;
width:100%;
box-sizing:border-box;
background:#da1445;
padding:5px;
color:#fff;
font-family:'Roboto Condensed';
[/class]

[class=hver]
position: absolute;
bottom: 20px;
left: 0;
z-index:1;
width:100%;
box-sizing:border-box;
background:#da1445;
padding:5px;
color:#fff;
font-family:'Roboto Condensed';
font-size:10px;
[/class]

[class name=cardinfo]
position:absolute;
top:0;
left:0;
z-index:2;
width:300px;
height:495px;
margin:auto;
box-sixing:border-box;
background:rgba(155,155,161, 0.0);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:auto;
text-align:justify;
transition: all 1s ease-out;
color:transparent;
padding:5px 10px; 5px 5px;
font-family:'Roboto Condensed';
[/class]

[class name=cardinfo state=hover]
position:absolute;
top:0;
left:0;
z-index:2;
width:300px;
height:495px;
margin:auto;
box-sixing:border-box;
background:rgba(155,155,161, 1.0);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:auto;
text-align:justify;
transition: all 1s ease-out;
color:#fff;
padding:5px 10px; 5px 5px;
font-family:'Roboto Condensed';
[/class]

[class=textparent]
width:280px;
height:495px;
[/class]

[class=textchild]
width:280px;
margin:auto;
padding-bottom:5px;
[/class]

[class=fyuricredit]
width:300px;
margin:auto;
opacity:0.3;
font-size:11px;
[/class]
[/nobr]
[div class=card][div class=cardinfo][div class=textparent][div class=textchild]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, justo a blandit placerat, libero ligula laoreet nulla, vel laoreet elit dolor ac nibh. Donec vel justo eu ipsum porttitor faucibus sed at dolor. Integer congue cursus nulla, in convallis nisi tincidunt eget. Nullam hendrerit ornare nisi, id ultrices odio luctus ac. Ut varius sagittis magna, non tincidunt orci dignissim et. Integer malesuada libero et neque commodo commodo. Nam at urna quam. Nulla et volutpat nisl. Pellentesque sed fermentum massa. Quisque tempus maximus metus, vitae varius purus varius id. Vivamus et quam euismod, fermentum tellus a, pharetra lectus.

Nam egestas mi a quam varius fermentum. Fusce sit amet metus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci nunc. Aliquam erat volutpat. Fusce consequat hendrerit mauris. In sem massa, suscipit eu ullamcorper ut, vehicula quis eros. Mauris quam tortor, elementum vitae lorem quis, aliquet cursus velit. Integer gravida quis nisi sit amet mattis. Fusce ex metus, pretium eget libero ut, vulputate lobortis augue.[/div][/div][/div][div class=name]Character Name[/div][div class=img][img]http://via.placeholder.com/330x500[/img][/img][/div][div class=hver]HOVER FOR MORE[/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8899447]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not  alter/remove credit. code by @fyuri[/comment]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
A simple cyberpunk-themed code. Nothing super special and it's just been sitting around in my PWS unused. You can change the image and font colors to change it to fit other settings.

Header
[div class=header]HEADER[/div]


Header Color
You can change the header colors here:
[class=header]CONTENT IN THIS CLASS[/class]


Image
Optimal size: 700px x 175px. Change the image within this class at this part:
[class=imageheader]background:url('https://i.imgur.com/SWccAsx.jpg') no-repeat center center;[/class]
mobile friendly
no scroll
columns
simple

.
Cyberpunk Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum tortor vitae tempus vestibulum. Aenean luctus est et arcu blandit condimentum. Curabitur blandit at quam ac consequat. Fusce ligula purus, dignissim vitae facilisis sit amet, volutpat rutrum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis, quam ac cursus varius, ante lectus tempus nulla, fringilla lacinia quam nulla quis lacus. Integer aliquam ex nisl, eu maximus ex porta a. Proin egestas quam ut leo porta lobortis.

Curabitur a purus nisi. Etiam ullamcorper faucibus pellentesque. Etiam iaculis justo sem, a facilisis metus lacinia in. Praesent vulputate justo vel sapien mattis, imperdiet ornare urna iaculis. Sed lacinia magna massa. Fusce nec magna in urna tempor tristique. Mauris non risus eros. Nam tellus lacus, pretium eu placerat sed, rhoncus vitae libero. Cras tincidunt commodo elementum. Maecenas et felis id lacus efficitur euismod ut laoreet enim. In hac habitasse platea dictumst. Sed enim lacus, feugiat ut massa eget, sodales ultrices nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum tellus eget nisi condimentum dignissim. Vivamus ac arcu ac velit volutpat commodo.
Sed suscipit sem nibh, et congue tellus accumsan quis. Nam egestas lectus in ex rhoncus sagittis. Nulla erat lorem, elementum eget neque dictum, aliquet accumsan nulla. Proin ante eros, euismod consectetur dapibus in, scelerisque sed metus. Sed vulputate metus eget tortor commodo volutpat at ut ligula. Morbi nec enim accumsan, finibus turpis feugiat, suscipit elit. Fusce ante lectus, pulvinar nec posuere ac, ultrices sit amet enim. Pellentesque tempor est sit amet libero luctus malesuada.

Phasellus tempor purus non ultricies lacinia. Integer ornare, nibh quis lobortis porttitor, massa quam eleifend dui, non euismod nisl mauris sit amet sapien. Nullam massa lacus, consectetur non sem nec, tincidunt egestas neque. Morbi a enim sem. Donec bibendum ac urna sit amet sollicitudin. Donec ultrices non nisi dapibus condimentum. Nunc varius a ex in convallis. Donec sit amet gravida tortor, non sodales nisl. Duis luctus vulputate lorem et fringilla. Duis at pulvinar massa. Nunc tincidunt pulvinar dolor, id placerat nulla posuere a. Cras orci augue, vehicula id erat ac, aliquam sagittis eros. Mauris vel tempus nulla. Maecenas ut nunc ipsum. Nam porta nulla vel mi mollis lobortis. In vel egestas nibh.


Code:
[nobr]
[font=Lilita One][div=display:none].[/div][/font]
[class=fyuriwrapper]
max-width:700px;
min-height:500px;
margin:auto;
background:transparent;
[/class]

[class=imageheader]
height:175px;
overflow:hidden;
background:url('https://i.imgur.com/SWccAsx.jpg') no-repeat center center;
background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
[/class]

[class=header]
font-family:'Lilita One', Impact, Verdana;
font-size:50px;
color:#ba1782;
text-shadow: 1px 1px 0px #FF55DD;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(255,255,255, 0.3);
[/class]

[class=box1]
display:inline-block;
vertical-align:top;
max-width:345px;
min-width:300px;
box-sizing: border-box;
margin-right:5px;
padding:5px;
text-align:justify;
font-size:13px;
[/class]

[class=box2]
display:inline-block;
vertical-align:top;
max-width:345px;
min-width:300px;
box-sizing: border-box;
margin-left:5px;
padding:5px;
text-align:justify;
font-size:13px;
[/class]

[class=fyuricredit]
max-width:700px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
[div class=fyuriwrapper][div class=imageheader][div class=header]Cyberpunk Title[/div][/div][div class=box1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum tortor vitae tempus vestibulum. Aenean luctus est et arcu blandit condimentum. Curabitur blandit at quam ac consequat. Fusce ligula purus, dignissim vitae facilisis sit amet, volutpat rutrum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis, quam ac cursus varius, ante lectus tempus nulla, fringilla lacinia quam nulla quis lacus. Integer aliquam ex nisl, eu maximus ex porta a. Proin egestas quam ut leo porta lobortis.

Curabitur a purus nisi. Etiam ullamcorper faucibus pellentesque. Etiam iaculis justo sem, a facilisis metus lacinia in. Praesent vulputate justo vel sapien mattis, imperdiet ornare urna iaculis. Sed lacinia magna massa. Fusce nec magna in urna tempor tristique. Mauris non risus eros. Nam tellus lacus, pretium eu placerat sed, rhoncus vitae libero. Cras tincidunt commodo elementum. Maecenas et felis id lacus efficitur euismod ut laoreet enim. In hac habitasse platea dictumst. Sed enim lacus, feugiat ut massa eget, sodales ultrices nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum tellus eget nisi condimentum dignissim. Vivamus ac arcu ac velit volutpat commodo.[/div][div class=box2]Sed suscipit sem nibh, et congue tellus accumsan quis. Nam egestas lectus in ex rhoncus sagittis. Nulla erat lorem, elementum eget neque dictum, aliquet accumsan nulla. Proin ante eros, euismod consectetur dapibus in, scelerisque sed metus. Sed vulputate metus eget tortor commodo volutpat at ut ligula. Morbi nec enim accumsan, finibus turpis feugiat, suscipit elit. Fusce ante lectus, pulvinar nec posuere ac, ultrices sit amet enim. Pellentesque tempor est sit amet libero luctus malesuada.

Phasellus tempor purus non ultricies lacinia. Integer ornare, nibh quis lobortis porttitor, massa quam eleifend dui, non euismod nisl mauris sit amet sapien. Nullam massa lacus, consectetur non sem nec, tincidunt egestas neque. Morbi a enim sem. Donec bibendum ac urna sit amet sollicitudin. Donec ultrices non nisi dapibus condimentum. Nunc varius a ex in convallis. Donec sit amet gravida tortor, non sodales nisl. Duis luctus vulputate lorem et fringilla. Duis at pulvinar massa. Nunc tincidunt pulvinar dolor, id placerat nulla posuere a. Cras orci augue, vehicula id erat ac, aliquam sagittis eros. Mauris vel tempus nulla. Maecenas ut nunc ipsum. Nam porta nulla vel mi mollis lobortis. In vel egestas nibh.[/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9236250]code/design[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit[/comment]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
This is just a fun generator I created based off @Lyro's name generator code, so most of the code was really his and I just had some fun. This is an O-mikuji Fortune Generator which will give you a random fortune. You also cannot spam click it. ;3

I'm not providing the code because you can get it here from the original source.
mobile friendly
no scroll
random generator


O-mikuji Fortune Lottery





.
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Okay there is seriously nothing special about this code. I took the basic accordion bbcode and stylized it a bit and put in a YT in each accordion 'tab' for different songs. Currently this version of this faux playlist doesn't have a hidden scroll. I'll be working on that version on a later date.

Bonus; you can still listen to the music even if you close the accordion if the video is still playing. Best to not play all the songs at once though!

Gradient Color
You can change up the gradient if you want per slide:
background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
mobile friendly
no scroll
gradient
music

Sayuri - Mikazuki
ONE OK ROCK - The Beginning
Nothing More - Still in Love
code by @Fyuri
.


Code:
[div=visibility: hidden;max-width:600px;margin:auto;][border=0px][accordion=100%]
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] Sayuri - Mikazuki[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center][MEDIA=youtube]65BAeDpwzGY[/MEDIA][/center]
 [/div]{/slide}
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] ONE OK ROCK - The Beginning[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center]https://www.youtube.com/watch?v=Hh9yZWeTmVM[/center]
 [/div]{/slide}
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] Nothing More - Still in Love[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center]https://www.youtube.com/watch?v=CqbaKnUQvqA[/center]
 [/div]{/slide}[/accordion][/div][nobr]
[div=display:none;]code by @fyuri[/div]
[div=display:none;][font=Karla].[/font][/div]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
This is an old unused BBCode from from Private Workshop circa Feb 2018. I don't even remember where I was going with this one. It's a bit restrictive and unforgiving in the information boxes so please be careful with how much information you put there.

It is readable on mobile, but it looks best on desktop.

Rather and put all the small information div boxes you can just find the corresponding text to a box within the code and replace it with what you want.

FC
[div class=charaimg][img]IMG URL HERE[/img][/div]
mobile friendly
no scroll
browser best

Character Name
Text or Tags
Age:
Gender:
Race:
Text
Text
Text

Skills:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan mollis ante, sit amet luctus enim sollicitudin vitae. Suspendisse faucibus ullamcorper ex at vestibulum. Integer laoreet dolor tellus, a sodales justo dapibus vel. Donec eget risus ante. In hac habitasse platea dictumst. Suspendisse aliquam massa id lectus feugiat, nec dignissim massa semper. Nulla rutrum id risus nec dignissim. Vivamus molestie neque vel lacus ullamcorper, et consequat est tempor. Vestibulum elementum nibh nibh, vitae pellentesque dolor ullamcorper ac. Praesent in tortor a massa porta ornare ac vitae mauris. Nulla facilisi.

Sed tincidunt tellus sapien, nec congue urna luctus vitae. Mauris fringilla ac nisl at tincidunt. Ut faucibus magna sit amet arcu imperdiet maximus. Integer varius luctus volutpat. Nunc in convallis turpis. Aliquam ac mi non augue gravida dapibus eget vitae arcu. Nulla lorem nunc, eleifend vel rutrum sed, facilisis ac dolor. Donec sit amet enim tempus, venenatis tortor vel, pulvinar tortor. Quisque tempor justo orci, vel dictum metus cursus eu. Duis enim lacus, molestie vitae interdum in, volutpat at ipsum. Sed non tellus dapibus, eleifend ex vel, eleifend tortor. Morbi suscipit, massa vel posuere pellentesque, magna massa maximus justo, eu dictum ligula est at orci. Vestibulum quis dolor arcu. Vivamus maximus, magna at faucibus placerat, eros magna euismod ex, quis ultrices diam arcu sed ex.


Code:
[nobr]
[class=fyuriwrapper]
max-width:536px;
margin:auto;
[/class]

[class=charabox]
max-width:100%;
background:#ccc;
[/class]

[class=charaimg]
display:inline-block;
vertical-align:top;
width:200px;
height:200px;
pointer-events:none;
overflow:hidden;
[/class]

[class=charactertxt]
display:inline-block;
vertical-align:top;
box-sizing: border-box;
max-width:350px;
height:200px;
overflow:hidden;
text-align:justify;
font-size:13px;
padding:3px 5px 5px 5px;
[/class]

[class=charabox1]
width:100%;
box-sizing: border-box;
background:#313131;
color:#fff;
padding:2px;
margin:2px 0px 2px 0px;
[/class]

[class=charabox2]
width:100%;
box-sizing: border-box;
background:#313131;
color:#fff;
padding:2px;
margin:2px 0px 2px 0px;
[/class]

[class=charabox3]
display:inline-block;
vertical-align:top;
box-sizing: border-box;
width:169px;
margin-right:1px;
[/class]

[class=charabox4]
display:inline-block;
vertical-align:top;
box-sizing: border-box;
width:155px;
min-height:145px;
background:#313131;
color:#fff;
padding:2px;
margin-left:1px;
[/class]

[class=charabox5]
width:100%;
box-sizing: border-box;
background:#313131;
color:#fff;
padding:2px;
margin-bottom:2px;
[/class]

[class=text]
width:100%;
box-sizing: border-box;
padding:5px;
text-align:justify;
color:#313131;
[/class]
[/nobr]
[div class=fyuriwrapper][div class=charabox][div class=charaimg][img]https://via.placeholder.com/200x200[/img][/div][div class=charactertxt][div class=charabox1]Character Name[/div][div class=charabox2]Text or Tags[/div][div class=charabox3][div class=charabox5]Age:[/div][div class=charabox5]Gender:[/div][div class=charabox5]Race:[/div][div class=charabox5]Text[/div][div class=charabox5]Text[/div][div class=charabox5]Text[/div]
[/div][div class=charabox4]Skills:[/div] [/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan mollis ante, sit amet luctus enim sollicitudin vitae. Suspendisse faucibus ullamcorper ex at vestibulum. Integer laoreet dolor tellus, a sodales justo dapibus vel. Donec eget risus ante. In hac habitasse platea dictumst. Suspendisse aliquam massa id lectus feugiat, nec dignissim massa semper. Nulla rutrum id risus nec dignissim. Vivamus molestie neque vel lacus ullamcorper, et consequat est tempor. Vestibulum elementum nibh nibh, vitae pellentesque dolor ullamcorper ac. Praesent in tortor a massa porta ornare ac vitae mauris. Nulla facilisi.

Sed tincidunt tellus sapien, nec congue urna luctus vitae. Mauris fringilla ac nisl at tincidunt. Ut faucibus magna sit amet arcu imperdiet maximus. Integer varius luctus volutpat. Nunc in convallis turpis. Aliquam ac mi non augue gravida dapibus eget vitae arcu. Nulla lorem nunc, eleifend vel rutrum sed, facilisis ac dolor. Donec sit amet enim tempus, venenatis tortor vel, pulvinar tortor. Quisque tempor justo orci, vel dictum metus cursus eu. Duis enim lacus, molestie vitae interdum in, volutpat at ipsum. Sed non tellus dapibus, eleifend ex vel, eleifend tortor. Morbi suscipit, massa vel posuere pellentesque, magna massa maximus justo, eu dictum ligula est at orci. Vestibulum quis dolor arcu. Vivamus maximus, magna at faucibus placerat, eros magna euismod ex, quis ultrices diam arcu sed ex.[/div][/div][/div][div=max-width:536px;margin:auto;opacity:0.3;font-size:10px;][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9528053]code[/url] by @Fyuri [/div][comment]do not remove/alter this credit[/comment]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
With the closure of Charahub I figured I would try and make something Charahub inspired. I also had a CS code on my to-list so here it is.

Image Gallery
You can use this code within the images tab to add more:
[div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]URL HERE[/IMG][/HEIGHTRESTRICT][/div]


Main Image/FC
Change the url here. Optimal size is 600px x 600px.
[img]https://via.placeholder.com/600x600[/img]


Quote
You can remove this line if desired):
[div=text-align: center;][fa]fa-quote-left[/fa][div class=quote]Optional Quote[/div][fa]fa-quote-right[/fa][/div]
mobile friendly
visible scroll
gradient
character sheet
tabs
light theme best



Name Here

Quote goes here.

Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags
Information
Images
Extra
Basics

Name
Lorem

Age
Lorem

Race
Lorem

Gender
Lorem

Sexuality
Lorem

Nickname(s)
Lorem

Aliases
Lorem

Title(s)
Lorem

Birthday
Lorem

Zodiac
Lorem

Occupation
Lorem

Physical

Height
Lorem

Weight
Lorem

Blood Type
Lorem

Complexion
Lorem

Hair Color
Lorem

Scars
Lorem

Tattoos
Lorem

Piercings
Lorem

Mental

Personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.

Alignment
Lorem

Temperament
Lorem

Quirks
Lorem

Likes
Lorem

Dislikes
Lorem

Other

Hobbies
Lorem

Guilty Pleasures
Lorem

Afflictions
Lorem

History

Backstory
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.

Family
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.



Code:
[div=display: flex;  flex-wrap: wrap;]
[div class=fyuribox01][div=margin:-15px -15px -20px -15px;][img]https://via.placeholder.com/600x600[/img][/div]
[div class=charactername][font=Sniglet]Name Here[/font][/div]
[div=text-align: center;][fa]fa-quote-left[/fa][div class=quote]Quote goes here.[/div][fa]fa-quote-right[/fa][/div]
[fa]fa-tags[/fa][div class=tags] Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags, Tags[/div][/div] [div class=textarea][div class=tabs][div class=tab]Information[/div][div class=tab]Images[/div][div class=tab]Extra[/div][/div][div class=tabtext][div class="tabsContent tabsContentInformation"][div class=infohdr][fa]fa-chevron-circle-right [/fa] Basics[/div]
[row][column=span1][div class=info][b]Name[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Age[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Race[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Gender[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Sexuality[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Nickname(s)[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Aliases[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Title(s)[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Birthday[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Zodiac[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Occupation[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[div class=infohdr][fa]fa-chevron-circle-right [/fa] Physical[/div]
[row][column=span1][div class=info][b]Height[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Weight[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Blood Type[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Complexion[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Hair Color[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Scars[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Tattoos[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Piercings[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[div class=infohdr][fa]fa-chevron-circle-right [/fa] Mental[/div]
[row][column=span1][div class=info][b]Personality[/b][/div][/column][column=span7]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.[/column][/row]

[row][column=span1][div class=info][b]Alignment[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Temperament[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Quirks[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Likes[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Dislikes[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[div class=infohdr][fa]fa-chevron-circle-right [/fa] Other[/div]
[row][column=span1][div class=info][b]Hobbies[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Guilty Pleasures[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[row][column=span1][div class=info][b]Afflictions[/b][/div][/column][column=span7][div class=sminfo]Lorem[/div][/column][/row]

[div class=infohdr][fa]fa-chevron-circle-right [/fa] History[/div]
[row][column=span1][div class=info][b]Backstory[/b][/div][/column][column=span7]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.[/column][/row]

[row][column=span1][div class=info][b]Family[/b][/div][/column][column=span7]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec suscipit sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc finibus nisl eu gravida vulputate. Aliquam malesuada mattis magna, vitae posuere metus pellentesque a. Maecenas et tortor tristique, malesuada libero et, euismod ipsum. Sed sed aliquam mi. Cras sodales augue id nibh mollis, at mattis felis molestie. Aliquam erat volutpat. Nullam leo orci, hendrerit at nulla ut, viverra eleifend velit. Ut arcu ligula, tincidunt et odio sed, luctus auctor arcu.[/column][/row]
[/div][div class="tabsContent tabsContentImages" style="display: none;"]
[center][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]https://via.placeholder.com/400x400[/IMG][/HEIGHTRESTRICT][/div][/center]

[/div][div class="tabsContent tabsContentExtra" style="display: none;"]You can put whatever extra things you want in this tab.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9676567]code/design[/url] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[nobr]
[class=fyuribox01]
max-width:350px;
box-shadow: 2px 2px 4px 0 #ccc;
padding:15px;
box-sizing:border-box;
margin-right:10px;
margin-bottom:5px;
 margin-left:10px;
[/class]

[class=charactername]
  font-size: 35px;
background-image: linear-gradient(to right, #4db8c4 0%, #3dd3ad 100%, #05abe0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
text-align:center;
[/class]

[class=quote]
display:inline;
font-family: 'Sniglet', Verdana;
font-size:15px;
padding:0px 10px 0px 10px;
[/class]

[class=tags]
display:inline;
color:#4db8c4;
[/class]

[class=textarea] 
height:600px;
flex: 1;
text-align: justify;
margin-bottom:5px;
[/class]

[class=tabtext]
box-sizing:border-box;
height:560px;
overflow:auto;
padding:10px;
[/class]

[class=infohdr]
font-family: 'Sniglet', Verdana;
        font-size: 25px;
        font-weight: bold;
letter-spacing:2px;
[/class]

[class=info]
text-transform:uppercase;
font-size:14px;
[/class]

[class=sminfo]
text-decoration:underline;
text-decoration-style: dotted;
  text-underline-position: under; 
[/class]

[class=tabs]
background-image: linear-gradient(to right, #4db8c4 0%, #3dd3ad 100%, #05abe0 100%);
        box-sizing: border-box;
font-family: 'Sniglet', Verdana;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin:auto;
        text-align: center;
        width: 100%;
    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
margin:0px 5px 0px 5px;
        width: 150px;
    [/class]

    [class name=tab state=hover]
        background-color: rgba(255,255,255, 0.4);
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Information) (show tabsContentInformation)
        if (eq ${currentTab} Images) (show tabsContentImages)
        if (eq ${currentTab} Extra) (show tabsContentExtra)
    [/script]

[class=fyuricredit]
display:inline;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
This is third version of my most popular BBCode CS. It's a bit more complicated than the previous version so you should pay attention to the information in this little box to assist you in customizing it.

Your FC
[div class=charaimg][img]IMG URL HERE[/img][/div]


Headers
You can use this site to match the header background to your own FC image (it's what I did). It will spit out a code you can just copy and paste to replace the current gradient in the code in the following classes:
[class=header]For LEFT HEADER. Just replace the background section with your own within this tag.[/class]

[class=header2]For RIGHT HEADER. Just replace the background section with your own within this tag.[/class]


Skills/Stats
This is the area where I foresee most having problems. In order to move the circle on the bar you need to change the positioning of the element. To do this change the percentage value of left: #%; in the code for each stat/skill! Change the # to a number value between 1-100 only.
[b]Skill/Stat[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:16%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
mobile friendly
no scroll
gradient
character sheet

Identification
Code Name:
Rank:
Stats

Strength

Dexterity

Constitution

Intelligence

Wisdom

Charisma

Skills

Skill

Skill

Skill

Skill

Skill

Skill

Theme Music
Character Name
Age:

Gender:

Sexuality:

Psychological Profile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.

Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.

Backstory
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.

.
.

Code:
[div class=fyuriwrapper][div=display: flex;  flex-wrap: wrap;][div class=left][div class=charaimg][img]https://via.placeholder.com/400x500[/img][/div][div class=header][fa]as fa-id-badge[/fa] Identification[/div][div class=text][b]Code Name:[/b] 
[b]Rank:[/b]
[/div][div class=header][fa]fas fa-list-ul[/fa] Stats[/div]
[center][b]Strength[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:16%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Dexterity[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:32%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Constitution[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:48%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Intelligence[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:64%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Wisdom[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:80%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Charisma[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:100%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[/center]
[div class=header][fa]fas fa-list-ul[/fa] Skills[/div]
[center][b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:16%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:32%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:48%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:64%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:80%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[b]Skill[/b][div=position:relative;width:200px;margin:auto;margin-bottom:-15px;margin-top:3px;][div=height:3px;width:100%;background:#000;][div=position:absolute;top:-5px;left:100%;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;width:13px;height:13px;background:#000;][/div][/div][/div]
[/center]
[div class=header]Theme Music[/div][MEDIA=Youtube]p1U4gkcp_40[/MEDIA][/div][div=background-color: #fff;
flex: 1;][div class=header2][fa]fas fa-user-circle[/fa] Character Name[/div][div class=text][b]Age:[/b] 

[b]Gender:[/b]

[b]Sexuality:[/b]
[/div]
[div class=header2][fa]fas fa-brain[/fa] Psychological Profile[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div]
[div class=header2][fa]fas fa-info-circle[/fa] Header[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div]
[div class=header2][fa]fas fa-folder-open[/fa] Backstory[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9682043]code/design[/url] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[nobr]
[div=display:none;][font=Prompt].[/font][/div]
[div=display:none;][font=Raleway].[/font][/div]
[class=fyuriwrapper]
max-width:950px;
margin:auto;
color:#000;
font-family:'Raleway', Verdana;
[/class]

[class=left]
background:#fff;
max-width: 350px;
margin-right: 10px;
[/class]


[class=charaimg]
text-align:center;
font-size: 0;
[/class]

[class=header]
width:100%;
background: -webkit-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -o-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -ms-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -moz-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: linear-gradient(to right, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
font-family:'Prompt', Verdana;
font-size:30px;
color:#fff;
text-align:center;
padding:0px 10px 0px 10px;
box-sizing:border-box;
[/class]

[class=header2]
width:100%;
background: -webkit-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -o-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -ms-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: -moz-linear-gradient(left, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
background: linear-gradient(to right, rgb(12, 18, 42) 0%, rgb(136, 103, 122) 100%);
font-family:'Prompt', Verdana;
font-size:30px;
color:#fff;
padding:0px 10px 0px 10px;
box-sizing:border-box;
[/class]

[class=text]
padding:10px;
box-sizing:border-box;
text-align:justify;
[/class]

[class=fyuricredit]
max-width:950px;
margin:auto;
opacity:0.5;
font-size:10px;
[/class]

[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Here is something a little more fantasy-esque. It can be used as a character sheet or even an in character post. There is a subtle gradient for the text area (shows best on dark theme). Do be careful with your FC images, they should at least be 358px in height if you want it to display properly.

Your FC
Optimal height 358px.
Important! If you change the white background color to anything else the FC img will NOT display properly!
[div class=mainimage][img]IMG URL HERE[/img][/div]


Character Name
[div class=charaname]Character Name[/div]


Headers
[div class=smheader][div class=smimg][img]https://i.imgur.com/YJvZo2X.png[/img][/div][div class=smheadtxt]HEADER TEXT GOES HERE[/div][/div]
mobile friendly
no scroll
light theme best
browser best
character sheet
ic

Character Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur condimentum tincidunt. Etiam sodales dui tincidunt porta venenatis. Donec quis justo eget odio ultrices fringilla vitae eget tellus. Vestibulum vitae dui nulla. Donec euismod lacus sit amet dui ullamcorper eleifend. Proin vel ipsum turpis. Donec placerat eros sed urna rutrum dictum. Sed ac ante tincidunt, pellentesque nunc vitae, viverra elit. Morbi nunc urna, lobortis quis ante vel, ullamcorper sagittis lorem. Maecenas at accumsan diam. Praesent quam diam, eleifend nec diam ut, tempor cursus tellus. Sed in sapien dapibus, volutpat nisi vel, consectetur ex.

This is a Header

Morbi quis neque ultricies est egestas consequat. Duis neque ipsum, sodales vitae eros nec, pellentesque pretium nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tempor lorem. Mauris a tristique felis, vitae molestie ipsum. Donec laoreet nibh vitae cursus bibendum. Quisque scelerisque ac purus ac condimentum. In venenatis nulla ut mattis luctus. Morbi cursus risus elementum dolor hendrerit, ut faucibus felis posuere. Curabitur molestie dolor tellus, sit amet porttitor lectus venenatis vel. Aliquam erat volutpat. Cras aliquet mi sed volutpat elementum. Maecenas in sodales ex. Aenean efficitur massa elementum ante volutpat feugiat. Fusce congue nisi vel mollis mollis.
.
.

Code:
[div class=fyuriwrapper][div class=main][div class=imagecontainer][div class=mainimage][img]https://via.placeholder.com/300x400[/img][/div][/div][div class=charaname]Character Name[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur condimentum tincidunt. Etiam sodales dui tincidunt porta venenatis. Donec quis justo eget odio ultrices fringilla vitae eget tellus. Vestibulum vitae dui nulla. Donec euismod lacus sit amet dui ullamcorper eleifend. Proin vel ipsum turpis. Donec placerat eros sed urna rutrum dictum. Sed ac ante tincidunt, pellentesque nunc vitae, viverra elit. Morbi nunc urna, lobortis quis ante vel, ullamcorper sagittis lorem. Maecenas at accumsan diam. Praesent quam diam, eleifend nec diam ut, tempor cursus tellus. Sed in sapien dapibus, volutpat nisi vel, consectetur ex.

[div class=smheader][div class=smimg][img]https://i.imgur.com/YJvZo2X.png[/img][/div][div class=smheadtxt]This is a Header[/div][/div]
Morbi quis neque ultricies est egestas consequat. Duis neque ipsum, sodales vitae eros nec, pellentesque pretium nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tempor lorem. Mauris a tristique felis, vitae molestie ipsum. Donec laoreet nibh vitae cursus bibendum. Quisque scelerisque ac purus ac condimentum. In venenatis nulla ut mattis luctus. Morbi cursus risus elementum dolor hendrerit, ut faucibus felis posuere. Curabitur molestie dolor tellus, sit amet porttitor lectus venenatis vel. Aliquam erat volutpat. Cras aliquet mi sed volutpat elementum. Maecenas in sodales ex. Aenean efficitur massa elementum ante volutpat feugiat. Fusce congue nisi vel mollis mollis.[/div][/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9687652]code/design[/url] by @Fyuri[/div][comment]do not remove/alter credit[/comment][nobr]
[div=display:none;][font=Eagle Lake].[/font][/div]
[div=display:none;][font=Noto Sans].[/font][/div]

[class=fyuriwrapper]
width:100%;
background: url('https://i.imgur.com/3eb54bE.png'); /*https://www.freepik.com/free-vector/damask-seamless-pattern-element-classical-luxury-old-fashioned-damask-ornament_4328331.htm*/
[/class]

[class=main]
max-width:900px;
margin:auto;background: rgb(255,255,255); 
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%); 
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%); 
[/class]

[class=charaname]
position:relative;
z-index:10;
font-family:'Eagle Lake', cursive;
font-size:45px;
text-align:center;
color:#000;
letter-spacing:2px;
font-style: italic;
line-height:38px;
[/class]

[class=smheader]
display: flex;
  flex-wrap: wrap;
width:100%;
text-align:left;
[/class]

[class=smimg]
display: flex;
width:19px;
height:50px;
pointer-events:none;
[/class]

[class=smheadtxt]
  display: flex;
flex:1;
  align-items: center;
font-family:'Eagle Lake', cursive;
font-size:25px;
padding-left:5px;
overflow:hidden;
[/class]


[class name=imagecontainer]
overflow:hidden; /*code inspired by [USER=32692]@glucose guardian[/USER] */
position:relative;
z-index:5;
width: 300px;
height: 358px;
background: #FFF url(https://i.imgur.com/dvaS4kN.png) no-repeat center center; /*https://www.freepik.com/free-vector/black-baroque-elements-vector-set_3853705.htm*/
background-size: 300px auto;
margin:0 auto
[/class]
	
[class name=mainimage]
display : flex; /*code inspired by [USER=32692]@glucose guardian[/USER] */
align-items : center;
height: 100%;
width: 100%;
pointer-events: none;
mix-blend-mode: screen;
[/class]

[class=text]
padding:10px;
box-sizing:border-box;
color:#000;
font-family:'Noto Sans', Verdana;
font-size:14px;
text-align:justify;
[/class]

[class=fyuricredit]
opacity:0.5;
font-size:10px;
[/class]
[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
I had started this with a completely different idea in mind and it just sort of developed on its own. I still feel there is room for improvement on this code and maybe one day I'll revise it.

Your FC
It's important to note that you may have to resize your images to be smaller to fit better into the box. Something around 350px max is optimal.
[div class=face][img]IMG URL HERE[/img][/div]


Character Name
[div class=charaname]Character Name[/div]


User Tags
[div class=tags]TAG USER HERE[/div]


Gradients
The gradients for the background can be found in these two classes:
[class=001]CODE IS IN HERE[/class]

[class=0012]CODE IS IN HERE[/class]
mobile friendly
hidden scroll
gradients
browser best

Character Name

Location

Love is the death of duty.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lectus vestibulum, faucibus tortor ut, malesuada purus. Nullam venenatis nisi risus. Etiam ut vehicula enim, in efficitur ex. Vestibulum a lectus gravida, dapibus nulla vel, luctus lectus. Pellentesque semper nisl eget odio venenatis, in molestie massa mollis. Suspendisse in mollis sem. Fusce placerat nibh et fringilla rhoncus. Ut ullamcorper vitae dolor eu bibendum. Quisque sit amet urna nec odio eleifend euismod a nec felis. Vivamus elementum rhoncus scelerisque.

Cras interdum egestas ipsum, non mattis odio condimentum sed. Ut non lorem ut lacus pulvinar interdum eu at diam. Cras vitae tellus vel mauris laoreet pulvinar. Vivamus a massa urna. Morbi ut eros ac tortor euismod volutpat a vitae diam. Proin et ipsum eget mi dictum fermentum a et erat. Nullam tincidunt hendrerit nibh.

Nam id nulla dictum, auctor ligula a, molestie justo. Nam tellus lacus, sagittis id congue non, luctus ac nisi. Donec ante libero, dapibus in justo a, posuere eleifend augue. Nam tristique quam in sem ullamcorper scelerisque. Nam commodo nisl nec euismod congue. Nunc id neque sem. Nulla quis dolor id ex scelerisque tincidunt quis eu nunc. Mauris sed neque luctus, dignissim libero ut, vulputate erat.

Curabitur lobortis lobortis orci, sit amet consectetur eros rhoncus at. Vivamus nec nunc eu quam eleifend blandit. Nulla vel bibendum metus, vel aliquet nisl. Proin consectetur lacus in est semper gravida. Cras mattis sodales nisi posuere tristique. Vivamus placerat porta ligula, et luctus ligula. Maecenas mauris eros, congue quis sapien a, laoreet tincidunt dui. Maecenas lobortis, magna sit amet viverra imperdiet, nulla odio tincidunt risus, at volutpat neque erat nec ipsum. Donec congue varius augue, at tincidunt risus scelerisque eu. Aenean at augue tincidunt, varius arcu nec, scelerisque ante. Integer vehicula urna vel dignissim aliquet.
.

Code:
[div class=fyuriwrapper][div class=001][/div][div class=0012][/div][div class=002][div class=003][div class=004][div class=faceclaim][div class=face][img]https://via.placeholder.com/350x350[/img][/div][/div][div class=charaname]Character Name[/div][div class=text][fa]fas fa-user-tag[/fa] [div class=tags][USER=39545]@Fyuri[/USER][/div] [div class=tags][USER=39545]@Fyuri[/USER][/div] [div class=tags][USER=39545]@Fyuri[/USER][/div]
[fa]fas fa-location-circle[/fa] Location

[center][fa]fas fa-quote-left[/fa]Love is the death of duty.[fa]fas fa-quote-right[/fa][/center]

[/div][/div][div class=005][div class=006][div class=007][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lectus vestibulum, faucibus tortor ut, malesuada purus. Nullam venenatis nisi risus. Etiam ut vehicula enim, in efficitur ex. Vestibulum a lectus gravida, dapibus nulla vel, luctus lectus. Pellentesque semper nisl eget odio venenatis, in molestie massa mollis. Suspendisse in mollis sem. Fusce placerat nibh et fringilla rhoncus. Ut ullamcorper vitae dolor eu bibendum. Quisque sit amet urna nec odio eleifend euismod a nec felis. Vivamus elementum rhoncus scelerisque.

Cras interdum egestas ipsum, non mattis odio condimentum sed. Ut non lorem ut lacus pulvinar interdum eu at diam. Cras vitae tellus vel mauris laoreet pulvinar. Vivamus a massa urna. Morbi ut eros ac tortor euismod volutpat a vitae diam. Proin et ipsum eget mi dictum fermentum a et erat. Nullam tincidunt hendrerit nibh.

Nam id nulla dictum, auctor ligula a, molestie justo. Nam tellus lacus, sagittis id congue non, luctus ac nisi. Donec ante libero, dapibus in justo a, posuere eleifend augue. Nam tristique quam in sem ullamcorper scelerisque. Nam commodo nisl nec euismod congue. Nunc id neque sem. Nulla quis dolor id ex scelerisque tincidunt quis eu nunc. Mauris sed neque luctus, dignissim libero ut, vulputate erat.

Curabitur lobortis lobortis orci, sit amet consectetur eros rhoncus at. Vivamus nec nunc eu quam eleifend blandit. Nulla vel bibendum metus, vel aliquet nisl. Proin consectetur lacus in est semper gravida. Cras mattis sodales nisi posuere tristique. Vivamus placerat porta ligula, et luctus ligula. Maecenas mauris eros, congue quis sapien a, laoreet tincidunt dui. Maecenas lobortis, magna sit amet viverra imperdiet, nulla odio tincidunt risus, at volutpat neque erat nec ipsum. Donec congue varius augue, at tincidunt risus scelerisque eu. Aenean at augue tincidunt, varius arcu nec, scelerisque ante. Integer vehicula urna vel dignissim aliquet.[/div][/div][/div]  [/div][/div] [/div] [/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9689900]code/design[/url] by @Fyuri[/div][comment]do not alter/remove credit[/comment][nobr]
[div=display:none;][font=Open Sans].[/font][/div]
[class=fyuriwrapper]
position:relative;
overflow:hidden;
max-width:2000px;
margin:auto;
color:#000;
[/class]

[class=001]
position:absolute;
z-index:15;
transform-origin: 10px 525px;
-moz-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
min-height:2000px; width:700px;
height:100%;left:73%;top:-500px;
background: #815172;
background: -webkit-linear-gradient(bottom right, #815172, #91D5D0);
background: -moz-linear-gradient(bottom right, #815172, #91D5D0);
background: linear-gradient(to top left, #815172, #91D5D0);
[/class]

[class=0012]
position:absolute;
z-index:10;
width:100%;
height:100%;
background: #815172;
background: -webkit-linear-gradient(top, #815172, #91D5D0);
background: -moz-linear-gradient(top, #815172, #91D5D0);
background: linear-gradient(to bottom, #815172, #91D5D0);
[/class]

[class=002]
position:relative;
z-index:20;
max-width:700px;
overflow:auto;
margin:auto;
[/class]

[class=003]
display: flex;
flex-wrap: wrap;
[/class]

[class=004]
background-color: rgba(255,255,255, 0.8);
width: 350px;
max-height:600px;
text-align: center;
overflow:hidden;
[/class]

[class=005]
background-color: rgba(255,255,255, 0.8);
flex: 1;
max-height:600px;
[/class]

[class=006]
max-width:350px; /* code from [USER=34809]@Alteras[/USER] */
width: 100%;
height: 600px;
overflow: hidden;
margin: 0 auto;
text-align:justify;
padding-right:10px;
box-sizing:border-box;
[/class]

[class=007]
width: 100%; /* code from [USER=34809]@Alteras[/USER] */
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=faceclaim]
pointer-events:none;
padding:5px 0px 5px 0px;
width:325px;
height:325px;
margin:auto;
overflow:hidden;
filter: drop-shadow(-1px 6px 3px rgba(0,0,0,0.75));
[/class]

[class=face]
width:325px;
height:325px;
font-size:0;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
[/class]

[class=charaname]
font-family:'Open Sans', Verdana;
text-align:center;
font-size:25px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
[/class]

[class=text]
width:100%;
padding:5px;
font-family:'Open Sans', Verdana;
text-align:justify;
font-size:13px;
[/class]

[class=tags]
display:inline-block;
padding:3px;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
background:#90d2ce;
color:#000;
margin:3px 0px 3px 0px;
[/class]

[class=fyuricredit]
opacity:0.5;
font-size:10px;
[/class]

[/nobr]
 
Last edited:

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
In an effort to figure out what coding voodoo I did over a year ago I developed this little thing.

Your FC
Optimal size 215px x 350px. Any other size will not show properly. Don't touch anything else in this class.
[class=faceclaim]background: url('IMG URL GOES HERE') no-repeat center center;[/class]


Gradient
You can change the gradient as you please in this class (don't touch anything else):
[class=left]
background: #ECA092;
background: -webkit-linear-gradient(bottom, #ECA092, #3C7AF6);
background: -moz-linear-gradient(bottom, #ECA092, #3C7AF6);
background: linear-gradient(to top, #ECA092, #3C7AF6);
[/class]
mobile friendly
hidden scroll
gradient
light theme best
small/tiny aesthetic?

hidden scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.

Code:
[div class=fyuriwrapper][div class=001][div class=left][div class=002][div class=banner][div class=003][/div][/div][/div]    [/div][div class=004][div class=textbox][div class=textboxchild][div class=scroll]hidden scroll[/div][div class=text][div class=faceclaim][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [/div][/div][/div][nobr][div class=fyuricredit][URL=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9711021]code/design[/URL] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[class=fyuriwrapper]
width:300px;
height:350px;
margin:auto;
color:#000;
overflow:hidden;
[/class]

[class=001]
display: flex;
flex-wrap: wrap;
[/class]

[class=left]
background: #ECA092;
background: -webkit-linear-gradient(bottom, #ECA092, #3C7AF6);
background: -moz-linear-gradient(bottom, #ECA092, #3C7AF6);
background: linear-gradient(to top, #ECA092, #3C7AF6);
width: 75px;
margin-right:10px;
overflow:hidden;
[/class]


[class=002]
position:relative;
top:250px;
pointer-events:none;
padding:5px 0px 5px 0px;
width:325px;
height:325px;
margin:auto;
overflow:hidden;
[/class]

[class=003]
width:500px;
height:500px;
background:#fff;
[/class]

[class=banner]
width:76px;
height:76px;
-webkit-clip-path: polygon(50% 19%, 100% 0, 100% 38%, 50% 63%, 0 38%, 0 0);
clip-path: polygon(50% 19%, 100% 0, 100% 38%, 50% 63%, 0 38%, 0 0);
[/class]

[class=004]
position:relative;
background-color: #fff;
width:215px;
[/class]

[class=textbox]
width:100%;
height:350px;
overflow:hidden;
[/class]

[class=textboxchild]
width:100%;
height:350px;
padding-right:17px;
overflow:auto;
text-align:justify;
color:#000;
font-size:13px;
[/class]

[class=text]
width:205px;
padding:5px;
[/class]

[class=faceclaim]
position:relative;
z-index:10;
top:-23px;
width:215px;
height:350px;
margin:-5px 0px -20px -5px;
background: url('https://via.placeholder.com/215x350') no-repeat center center;
overflow:hidden;
[/class]

[class=scroll]
position:relative;
top:0;
z-index:14;
width:215px;
background:rgba(0,0,0, 0.4);
color:#fff;
font-size:10px;
padding:3px;
box-sizing:border-box;
text-align:center;
[/class]

[class=fyuricredit]
width:300px;
margin:auto;
opacity:0.5;
font-size:10px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Here is the Character Sheet part of my first BBCode collection. It's a minimal style that should work well enough for realistic, modern, or even futuristic roleplays. The simple colors also mean you should be able to more easily style it.

Your FC
Optimal size: minimum width best at 350px.
[div class=FC][img]IMG URL HERE[/img][/div]


Left Headers
This is for the headers on the left side.
[div class=headerleft]HEADER[/div]


Right Headers
This is for the headers on the right side.
[div class=headermain]HEADER[/div]


Colors
To change the orange header color and underline simple swap this color for the one you want:
#e17a00

You'll also have to change the color here to a slightly darker shade to give the ribbon affect:
#b36100

To change the background color for the left side swap out this color:
#4c4c4c
mobile friendly
no scroll
character sheet
light/dark friendly
minimal
hidden credit


Basic

Name:
Age:
Race:
Gender:
Sexuality:

Extra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis nulla rutrum, volutpat arcu non, malesuada ligula. Suspendisse ligula ante, dapibus eu tortor vel, interdum feugiat mauris.

Personality

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus maximus dignissim. In rutrum tincidunt justo vitae iaculis. Nunc commodo eleifend velit a porttitor. Sed vulputate venenatis vehicula. Curabitur nec lobortis arcu. Suspendisse potenti. Aenean eu sem vel nisi condimentum consequat.

Abilities

Praesent a ex vitae sapien eleifend cursus. Etiam sed semper diam. Fusce turpis augue, tempus id elit a, vestibulum dapibus massa. Etiam euismod nunc nec sodales dignissim. Donec non blandit ipsum. Etiam mattis nisl vitae mauris feugiat, quis imperdiet nisi pharetra. Maecenas nec dapibus dui, at ultricies nulla. Sed scelerisque ac elit sit amet bibendum. Sed quis facilisis est. Sed in lacus iaculis, condimentum nisl a, varius tellus. Sed lacus ante, mattis eu dui eu, mollis congue risus. Pellentesque sagittis lectus nunc, sit amet facilisis diam facilisis vitae.

Backstory

Nunc egestas augue in dui pellentesque, ac malesuada ligula aliquam. Maecenas justo augue, cursus tempus fermentum malesuada, sollicitudin auctor ipsum. Pellentesque sagittis dolor in eleifend aliquet. Etiam dignissim nec justo quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dignissim pretium risus, nec dapibus tellus viverra ut. Integer venenatis, massa eget volutpat tincidunt, tellus nunc efficitur sapien, in dignissim justo orci in libero. Fusce elementum quam sapien, vitae ultrices mauris facilisis eu. Proin suscipit felis eu velit pellentesque egestas.

Header

Mauris volutpat arcu eget malesuada rhoncus. Proin maximus consectetur nisl. Sed aliquet purus et rutrum fringilla. Curabitur dictum ligula vel ante rhoncus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis convallis ex ac dignissim. Suspendisse commodo auctor dui at finibus. Ut sed dui aliquam diam scelerisque tempus ut vitae ex. Cras sit amet mi ac mauris auctor dignissim. Nunc eu nisi et magna vulputate dapibus.
.
.

Code:
[div class=fyuriwrapper][div=display:flex;flex-wrap: wrap;][div class=leftside][div class=FC][img]https://via.placeholder.com/350x400[/img][/div]
[div class=headerleft]Basic[/div][div=position:relative;][div class=tri][/div][/div]
Name: 
Age: 
Race: 
Gender: 
Sexuality: 

[div class=headerleft]Extra[/div][div=position:relative;][div class=tri][/div][/div]
[div=text-align:justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis nulla rutrum, volutpat arcu non, malesuada ligula. Suspendisse ligula ante, dapibus eu tortor vel, interdum feugiat mauris.[/div]
[/div][div=flex: 1;
padding:10px;box-sizing:border-box;][div class=headermain]Personality[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus maximus dignissim. In rutrum tincidunt justo vitae iaculis. Nunc commodo eleifend velit a porttitor. Sed vulputate venenatis vehicula. Curabitur nec lobortis arcu. Suspendisse potenti. Aenean eu sem vel nisi condimentum consequat.

[div class=headermain]Abilities[/div]
Praesent a ex vitae sapien eleifend cursus. Etiam sed semper diam. Fusce turpis augue, tempus id elit a, vestibulum dapibus massa. Etiam euismod nunc nec sodales dignissim. Donec non blandit ipsum. Etiam mattis nisl vitae mauris feugiat, quis imperdiet nisi pharetra. Maecenas nec dapibus dui, at ultricies nulla. Sed scelerisque ac elit sit amet bibendum. Sed quis facilisis est. Sed in lacus iaculis, condimentum nisl a, varius tellus. Sed lacus ante, mattis eu dui eu, mollis congue risus. Pellentesque sagittis lectus nunc, sit amet facilisis diam facilisis vitae.

[div class=headermain]Backstory[/div]
Nunc egestas augue in dui pellentesque, ac malesuada ligula aliquam. Maecenas justo augue, cursus tempus fermentum malesuada, sollicitudin auctor ipsum. Pellentesque sagittis dolor in eleifend aliquet. Etiam dignissim nec justo quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dignissim pretium risus, nec dapibus tellus viverra ut. Integer venenatis, massa eget volutpat tincidunt, tellus nunc efficitur sapien, in dignissim justo orci in libero. Fusce elementum quam sapien, vitae ultrices mauris facilisis eu. Proin suscipit felis eu velit pellentesque egestas.

[div class=headermain]Header[/div]
Mauris volutpat arcu eget malesuada rhoncus. Proin maximus consectetur nisl. Sed aliquet purus et rutrum fringilla. Curabitur dictum ligula vel ante rhoncus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis convallis ex ac dignissim. Suspendisse commodo auctor dui at finibus. Ut sed dui aliquam diam scelerisque tempus ut vitae ex. Cras sit amet mi ac mauris auctor dignissim. Nunc eu nisi et magna vulputate dapibus.[/div][/div] [/div][nobr][comment]code/design by @Fyuri do not remove/alter this credit.  Find the original code here: https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9727078 [/comment]
[div=display:none;][font=Yanone Kaffeesatz].[/font][/div]
[div=display:none;][font=Noto Sans].[/font][/div]
[class=fyuriwrapper]
max-width:950px;
margin:auto;
font-family:'Noto Sans', Verdana;
[/class]

[class=leftside]
background-color: #4c4c4c;
color:#fff;
max-width: 350px;
height: 100%;
padding:10px;
box-sizing:border-box;
[/class]

[class=FC]
background:#fff;
max-width:350px;
max-height:350px;
margin:auto;
overflow:hidden;
border:10px solid white;
text-align:center;
[/class]


[class=headerleft]
position:relative;
left:-40px;
max-width:320px;
background:#e17a00;
padding:5px 5px 0px 40px;
box-sizing:border-box;
font-family:'Yanone Kaffeesatz', Verdana;
font-size:30px;
letter-spacing:2px;
overflow:hidden;
line-height:30px;
[/class]

[class=tri]
position:absolute;
top:0px;
left:-39.5px;
width:30px;
height:30px;
background:#b36100;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
[/class]

[class=headermain]
font-family:'Yanone Kaffeesatz', Verdana;
font-size:30px;
letter-spacing:2px;
border-bottom: 2px solid #e17a00;
line-height:18px;
margin:0px 0px -20px 0px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Here is the second part of my first BBCide collection made to match the CS in color and style. It's a minimal style that should work well enough for realistic, modern, or even futuristic roleplays. The simple colors also mean you should be able to more easily style it. This can be used for all your OOC information and possibly your interest check or search.

Main Header
[div class=headermain]Header[/div]


Sub Headers
[div class=header]Header[/div]


Colors
To change the orange header color and underline simple swap this color for the one you want:
#e17a00

You'll also have to change the color here to a slightly darker shade to give the ribbon affect:
#b36100

To change the background color for top section:
#4c4c4c
mobile friendly
no scroll
interest check
player search
ooc
lore
light/dark friendly
minimal
hidden credit

Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus maximus dignissim. In rutrum tincidunt justo vitae iaculis. Nunc commodo eleifend velit a porttitor. Sed vulputate venenatis vehicula. Curabitur nec lobortis arcu. Suspendisse potenti. Aenean eu sem vel nisi condimentum consequat.

Header

Praesent a ex vitae sapien eleifend cursus. Etiam sed semper diam. Fusce turpis augue, tempus id elit a, vestibulum dapibus massa. Etiam euismod nunc nec sodales dignissim. Donec non blandit ipsum. Etiam mattis nisl vitae mauris feugiat, quis imperdiet nisi pharetra. Maecenas nec dapibus dui, at ultricies nulla. Sed scelerisque ac elit sit amet bibendum. Sed quis facilisis est. Sed in lacus iaculis, condimentum nisl a, varius tellus. Sed lacus ante, mattis eu dui eu, mollis congue risus. Pellentesque sagittis lectus nunc, sit amet facilisis diam facilisis vitae.

Header

Nunc egestas augue in dui pellentesque, ac malesuada ligula aliquam. Maecenas justo augue, cursus tempus fermentum malesuada, sollicitudin auctor ipsum. Pellentesque sagittis dolor in eleifend aliquet. Etiam dignissim nec justo quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dignissim pretium risus, nec dapibus tellus viverra ut. Integer venenatis, massa eget volutpat tincidunt, tellus nunc efficitur sapien, in dignissim justo orci in libero. Fusce elementum quam sapien, vitae ultrices mauris facilisis eu. Proin suscipit felis eu velit pellentesque egestas.

Header

Mauris volutpat arcu eget malesuada rhoncus. Proin maximus consectetur nisl. Sed aliquet purus et rutrum fringilla. Curabitur dictum ligula vel ante rhoncus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis convallis ex ac dignissim. Suspendisse commodo auctor dui at finibus. Ut sed dui aliquam diam scelerisque tempus ut vitae ex. Cras sit amet mi ac mauris auctor dignissim. Nunc eu nisi et magna vulputate dapibus.

Header

Phasellus turpis ex, pharetra quis dolor vitae, volutpat pretium arcu. Quisque dictum et lacus eu efficitur. Duis vitae nunc sem. Phasellus venenatis sit amet turpis non scelerisque. Donec ut cursus augue, a elementum odio. Sed eleifend pellentesque elit, vitae tristique ex pharetra vitae. Nulla commodo quam eu velit aliquet tincidunt. Maecenas pretium enim neque, vel commodo eros varius a. Vivamus finibus urna vitae odio gravida venenatis. Donec ac velit interdum, sodales purus at, facilisis ante. Aenean fermentum elit quis vulputate tincidunt. In eleifend scelerisque sem, in posuere nulla sagittis ac. Suspendisse varius metus at sem molestie efficitur. Proin facilisis lectus ut eros posuere pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Code:
[div class=fyuriwrapper][div class=top][div class=headermain]Header[/div][/div][div=position:relative;][div class=tri][/div][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus maximus dignissim. In rutrum tincidunt justo vitae iaculis. Nunc commodo eleifend velit a porttitor. Sed vulputate venenatis vehicula. Curabitur nec lobortis arcu. Suspendisse potenti. Aenean eu sem vel nisi condimentum consequat.

[div class=header]Header[/div]
Praesent a ex vitae sapien eleifend cursus. Etiam sed semper diam. Fusce turpis augue, tempus id elit a, vestibulum dapibus massa. Etiam euismod nunc nec sodales dignissim. Donec non blandit ipsum. Etiam mattis nisl vitae mauris feugiat, quis imperdiet nisi pharetra. Maecenas nec dapibus dui, at ultricies nulla. Sed scelerisque ac elit sit amet bibendum. Sed quis facilisis est. Sed in lacus iaculis, condimentum nisl a, varius tellus. Sed lacus ante, mattis eu dui eu, mollis congue risus. Pellentesque sagittis lectus nunc, sit amet facilisis diam facilisis vitae.

[div class=header]Header[/div]
Nunc egestas augue in dui pellentesque, ac malesuada ligula aliquam. Maecenas justo augue, cursus tempus fermentum malesuada, sollicitudin auctor ipsum. Pellentesque sagittis dolor in eleifend aliquet. Etiam dignissim nec justo quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dignissim pretium risus, nec dapibus tellus viverra ut. Integer venenatis, massa eget volutpat tincidunt, tellus nunc efficitur sapien, in dignissim justo orci in libero. Fusce elementum quam sapien, vitae ultrices mauris facilisis eu. Proin suscipit felis eu velit pellentesque egestas.

[div class=header]Header[/div]
Mauris volutpat arcu eget malesuada rhoncus. Proin maximus consectetur nisl. Sed aliquet purus et rutrum fringilla. Curabitur dictum ligula vel ante rhoncus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis convallis ex ac dignissim. Suspendisse commodo auctor dui at finibus. Ut sed dui aliquam diam scelerisque tempus ut vitae ex. Cras sit amet mi ac mauris auctor dignissim. Nunc eu nisi et magna vulputate dapibus.

[div class=header]Header[/div]
Phasellus turpis ex, pharetra quis dolor vitae, volutpat pretium arcu. Quisque dictum et lacus eu efficitur. Duis vitae nunc sem. Phasellus venenatis sit amet turpis non scelerisque. Donec ut cursus augue, a elementum odio. Sed eleifend pellentesque elit, vitae tristique ex pharetra vitae. Nulla commodo quam eu velit aliquet tincidunt. Maecenas pretium enim neque, vel commodo eros varius a. Vivamus finibus urna vitae odio gravida venenatis. Donec ac velit interdum, sodales purus at, facilisis ante. Aenean fermentum elit quis vulputate tincidunt. In eleifend scelerisque sem, in posuere nulla sagittis ac. Suspendisse varius metus at sem molestie efficitur. Proin facilisis lectus ut eros posuere pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/div][nobr][comment]code/design by @Fyuri do not remove/alter this credit.  Find the original code here: https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9727088 [/comment]
[class=fyuriwrapper]
max-width:950px;
margin:auto;
font-family:'Noto Sans', Verdana;
[/class]

[class=top]
width:100%;
min-height:75px;
height:100%;
background-color: #4c4c4c;
padding:50px 0px 30px 0px;
[/class]

[class=headermain]
position:relative;
left:-40px;
max-width:500px;
background:#e17a00;
color:#fff;
padding:5px 5px 0px 50px;
box-sizing:border-box;
font-family:'Yanone Kaffeesatz', Verdana;
font-size:40px;
letter-spacing:2px;
line-height:35px;
[/class]

[class=tri]
position:absolute;
top:-65.5px;
left:-39.5px;
width:40px;
height:40px;
background:#b36100;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
[/class]

[class=header]
font-family:'Yanone Kaffeesatz', Verdana;
font-size:30px;
letter-spacing:2px;
border-bottom: 2px solid #e17a00;
line-height:18px;
margin:0px 0px -20px 0px;
[/class]
[/nobr]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Here is a part of a new BBCode set. This one can be used for an interest check or OOC stuff is really desired. It also comes with three header options you can use. The one used in the live version you see here is header3.

Headers
[div class=header1]Sideways Header[/div]

[div class=header2]Top Left Position Header[/div]

[div class=header3]Centered Header[/div]


Subheader
[div class=subheader]Header[/div]
NOT mobile friendly
visible scroll
monochrome
multi-theme friendly
interest check
OOC stuff

Main Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a finibus tortor, a pharetra odio. Fusce lacinia, nulla eu eleifend dapibus, nulla ipsum pulvinar velit, et ultrices tellus augue in est. Phasellus ut magna porta, placerat justo et, tincidunt lorem. Aliquam vitae consectetur massa. Nunc vitae orci justo. Quisque non eleifend nulla. Nam vehicula sem id ligula iaculis, vitae viverra nibh tempor. Curabitur blandit tortor sed quam tincidunt, eu sollicitudin neque malesuada. Maecenas felis mauris, volutpat eu mi in, mollis fermentum enim. Aliquam sagittis, augue id molestie vulputate, justo nibh mollis nulla, non elementum nibh ex ut enim.

Header

Sed quis ligula vel metus egestas porta. Sed pharetra pharetra odio id bibendum. Fusce faucibus eros ut tempus dignissim. Phasellus ut odio elementum, efficitur ante id, posuere lacus. Fusce volutpat, nulla et condimentum lacinia, enim augue volutpat dolor, at dapibus mi velit nec elit. Nullam nunc elit, congue vitae posuere nec, tincidunt iaculis ante. Nulla bibendum sollicitudin neque non dapibus. Duis blandit porta odio sit amet efficitur. Nulla consectetur libero a justo volutpat tincidunt. Sed nec risus mollis ipsum molestie aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam luctus, sem a fermentum pulvinar, ipsum diam eleifend ex, vel aliquam risus enim nec nisl. Proin et aliquam tortor. Integer rutrum nunc quis eleifend viverra. In accumsan justo vel massa consectetur iaculis. Duis non ultricies erat, eget dapibus neque. Aenean imperdiet nulla dolor. Donec scelerisque odio nisi, ac varius arcu pretium quis. Aliquam interdum sit amet nisi id pellentesque. Proin ac posuere dui, et tempor neque. Fusce eget mi eu tellus consectetur consequat. Morbi congue purus vel mauris laoreet dictum. Vivamus varius, justo posuere malesuada pharetra, dui odio ultrices neque, vitae malesuada velit odio nec sapien. Mauris faucibus mattis interdum.

Header

Pellentesque luctus quam sed tincidunt interdum. Donec rutrum quam at nisl dictum venenatis. Sed sit amet facilisis ex, in tincidunt eros. Quisque tincidunt tellus nec est vehicula, eget posuere nisi cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor at est id lobortis. In hac habitasse platea dictumst. Cras mattis ac lorem mollis iaculis. Cras non arcu tincidunt, rutrum sem id, sollicitudin leo. Donec metus quam, venenatis ut metus eu, fermentum egestas nisl.

Maecenas purus tellus, euismod at eros a, maximus luctus elit. Aenean ut consequat augue. Donec vel fermentum tortor, eget rutrum risus. Fusce erat odio, fermentum in nibh cursus, mollis sagittis est. Sed tellus metus, commodo ac fermentum sed, suscipit in risus. Aenean dapibus augue a turpis interdum feugiat. Etiam blandit quis libero non dapibus. In hac habitasse platea dictumst. In pellentesque, sem quis scelerisque consequat, leo ligula bibendum lorem, vitae cursus diam leo in augue. Vestibulum gravida, dui vel semper ullamcorper, sapien purus venenatis sem, nec pretium massa mauris non odio.
.
.
Code:
[div class=fyuriwrapper][div class=imgwrap][div class=imgdia][div class=header3]Main Header[/div][/div][/div][div class=textarea]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a finibus tortor, a pharetra odio. Fusce lacinia, nulla eu eleifend dapibus, nulla ipsum pulvinar velit, et ultrices tellus augue in est. Phasellus ut magna porta, placerat justo et, tincidunt lorem. Aliquam vitae consectetur massa. Nunc vitae orci justo. Quisque non eleifend nulla. Nam vehicula sem id ligula iaculis, vitae viverra nibh tempor. Curabitur blandit tortor sed quam tincidunt, eu sollicitudin neque malesuada. Maecenas felis mauris, volutpat eu mi in, mollis fermentum enim. Aliquam sagittis, augue id molestie vulputate, justo nibh mollis nulla, non elementum nibh ex ut enim.

[div class=subheader]Header[/div]
Sed quis ligula vel metus egestas porta. Sed pharetra pharetra odio id bibendum. Fusce faucibus eros ut tempus dignissim. Phasellus ut odio elementum, efficitur ante id, posuere lacus. Fusce volutpat, nulla et condimentum lacinia, enim augue volutpat dolor, at dapibus mi velit nec elit. Nullam nunc elit, congue vitae posuere nec, tincidunt iaculis ante. Nulla bibendum sollicitudin neque non dapibus. Duis blandit porta odio sit amet efficitur. Nulla consectetur libero a justo volutpat tincidunt. Sed nec risus mollis ipsum molestie aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam luctus, sem a fermentum pulvinar, ipsum diam eleifend ex, vel aliquam risus enim nec nisl. Proin et aliquam tortor. Integer rutrum nunc quis eleifend viverra. In accumsan justo vel massa consectetur iaculis. Duis non ultricies erat, eget dapibus neque. Aenean imperdiet nulla dolor. Donec scelerisque odio nisi, ac varius arcu pretium quis. Aliquam interdum sit amet nisi id pellentesque. Proin ac posuere dui, et tempor neque. Fusce eget mi eu tellus consectetur consequat. Morbi congue purus vel mauris laoreet dictum. Vivamus varius, justo posuere malesuada pharetra, dui odio ultrices neque, vitae malesuada velit odio nec sapien. Mauris faucibus mattis interdum.

[div class=subheader]Header[/div]
Pellentesque luctus quam sed tincidunt interdum. Donec rutrum quam at nisl dictum venenatis. Sed sit amet facilisis ex, in tincidunt eros. Quisque tincidunt tellus nec est vehicula, eget posuere nisi cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor at est id lobortis. In hac habitasse platea dictumst. Cras mattis ac lorem mollis iaculis. Cras non arcu tincidunt, rutrum sem id, sollicitudin leo. Donec metus quam, venenatis ut metus eu, fermentum egestas nisl.

Maecenas purus tellus, euismod at eros a, maximus luctus elit. Aenean ut consequat augue. Donec vel fermentum tortor, eget rutrum risus. Fusce erat odio, fermentum in nibh cursus, mollis sagittis est. Sed tellus metus, commodo ac fermentum sed, suscipit in risus. Aenean dapibus augue a turpis interdum feugiat. Etiam blandit quis libero non dapibus. In hac habitasse platea dictumst. In pellentesque, sem quis scelerisque consequat, leo ligula bibendum lorem, vitae cursus diam leo in augue. Vestibulum gravida, dui vel semper ullamcorper, sapien purus venenatis sem, nec pretium massa mauris non odio.[/div][/div][nobr][div class=fyuricredit][URL=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9748322]code/design[/URL] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[div=display:none;][font=Poiret One].[/font][/div]
[div=display:none;][font=Raleway].[/font][/div]
[class=fyuriwrapper]
width:1300px;
height:600px;
margin:auto;
background:#ddd;
[/class]

[class=imgwrap]
position:relative;
[/class]

[class=imgdia]
position:absolute;
z-index:5;
top:0;
left:0;
width:800px;
height:600px;
background:url('https://i.imgur.com/PRO3RWI.gif') no-repeat;
[/class]

[class=header1]
width:400px;
height:600px;
overflow:hidden;
color:#fff;
font-family:'Poiret One', Verdana;
font-size:50px;
text-align:justify;
padding:5px;
box-sizing:border-box;
text-shadow: 2px 2px 0px #1a191a;
line-height:45px;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
[/class]

[class=header2]
width:400px;
height:600px;
overflow:hidden;
color:#fff;
font-family:'Poiret One', Verdana;
font-size:50px;
padding:5px;
box-sizing:border-box;
text-shadow: 2px 2px 0px #1a191a;
line-height:45px;
[/class]

[class=header3]
  display: flex;
  align-items: center;
  justify-content: center;
width:400px;
height:600px;
overflow:hidden;
color:#fff;
font-family:'Poiret One', Verdana;
font-size:50px;
padding:5px;
box-sizing:border-box;
text-shadow: 2px 2px 0px #1a191a;
line-height:45px;
[/class]

[class=subheader]
border-bottom:1px solid #1a191a;
display:inline;
color:#1a191a;
font-family:'Poiret One', Verdana;
font-size:30px;
font-weight:bold;
line-height:40px;
padding-right:150px;
[/class]

[class=textarea]
position:relative;
z-index:10;
left:540px;
width:760px;
height:600px;
overflow:auto;
background:#e5e6e5;
color:#1a191a;
padding:10px;
box-sizing:border-box;
text-align:justify;
[/class]

[class=fyuricredit]
max-width:1300px;
margin:auto;
font-family:'Raleway', Verdana;
font-size:10px;
opacity:0.5;
[/class]
[/nobr]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top