Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
[div class=fyuriparent][div class=mainimg][/div][/div][div class=txtreal][div class=behindtxt][div class=text][div class=header] Introduction[/div]
Welcome to mypathetic 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
[div class=header] Usage[/div]
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.
[div class=header] Changelog[/div]
If I update a code or the content in this thread, I will log that information here.
6/1/2019
5/22/2019
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.
[div class=header] To-Do[/div]
[div class=header] Requests[/div]
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.
[div class=header] Specs[/div]
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.
[div class=header] Code Directory[/div]
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!
[div class=subheader]Code Keys[/div]
Desktop Only
Mobile Friendly
Fyuri's Personal Codes
[div class=subheader]Free-to-Use[/div]
[div class=directory] Mock Mobile
Misc #1
Faux Hover Accordion
Hidden Content Hover
Character Sheet Remake
Faux Vertical Tabs
Faux Horizontal Tabs
Misc #2
Alternate E-Mail
Faux Tabs Header
Dark Misc #1
Character Hover
Cyberpunk Simple
O-mikuji Fortune
Faux Playlist
Charahub Inspired CS
Character Sheet Remake 3.0
Fantasy-esque CS/IC
Crossing Gradients
Tiny? Gradient[/div]
[div class=subheader]Free-to-Use Sets[/div]
There are BBCodes created as a set, meaning at least two or more are matched together in theme and style.
[div class=directory] Set #1 CS
Set #1 Multipurpose
Set #2 Multipurpose
Set #2 CS and/or IC Post[/div]
[/div][/div][/div][div class=fyuricredit]code/design by
Fable
[/div]
[class=fyuriparent] display: flex; max-width: 1024px; background:#fff; margin:auto; min-height:1024px; [/class] [class=mainimg] background:url('https://i.imgur.com/aI6wgOp.jpg') no-repeat top center; background-size: cover; object-fit: contain; width:100%; height:auto%; /* original art https://www.deviantart.com/lovecacao/art/Necklace-701600441 */ [/class] [class=behindtxt] position:relative; z-index:0; max-width: 1024px; margin:auto; height:390px; background:rgba(255,255,255, 1.0); [/class] [class=txtreal] position:relative; z-index:10; [/class] [class=text] position:absolute; z-index:15; top:-130px; margin-left: auto; margin-right: auto; left: 0; right: 0; max-width: 1024px; height:500px; background:rgba(255,255,255, 0.8); overflow:auto; padding:10px; text-align:justify; color:#000; font-family:'Heebo', Verdana; [/class] [class=header] display:inline; font-family:'Heebo', Verdana; font-size:25px; font-weight:bold; letter-spacing:1px; [/class] [class=subheader] display:inline; font-family:'Heebo', Verdana; font-size:17px; font-weight:bold; letter-spacing:1px; [/class] [class=directory] column-count: 3; column-gap: 10px; column-width: 300px; [/class] [class=fyuricredit] opacity:0.5; font-size:10px; max-width: 1024px; margin:auto; text-align:right; [/class]
Welcome to my
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
[div class=header] Usage[/div]
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.
[div class=header] Changelog[/div]
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.
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.
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.
[div class=header] To-Do[/div]
- Dark phone version.
- Alt phone option
New CS- Finish DnD CS
[div class=header] Requests[/div]
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.
[div class=header] Specs[/div]
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.
[div class=header] Code Directory[/div]
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!
[div class=subheader]Code Keys[/div]
Desktop Only
Mobile Friendly
Fyuri's Personal Codes
[div class=subheader]Free-to-Use[/div]
[div class=directory] Mock Mobile
Misc #1
Faux Hover Accordion
Hidden Content Hover
Character Sheet Remake
Faux Vertical Tabs
Faux Horizontal Tabs
Misc #2
Alternate E-Mail
Faux Tabs Header
Dark Misc #1
Character Hover
Cyberpunk Simple
O-mikuji Fortune
Faux Playlist
Charahub Inspired CS
Character Sheet Remake 3.0
Fantasy-esque CS/IC
Crossing Gradients
Tiny? Gradient[/div]
[div class=subheader]Free-to-Use Sets[/div]
There are BBCodes created as a set, meaning at least two or more are matched together in theme and style.
[div class=directory] Set #1 CS
Set #1 Multipurpose
Set #2 Multipurpose
Set #2 CS and/or IC Post[/div]
[/div][/div][/div][div class=fyuricredit]code/design by
Fable
[/div][class=fyuriparent] display: flex; max-width: 1024px; background:#fff; margin:auto; min-height:1024px; [/class] [class=mainimg] background:url('https://i.imgur.com/aI6wgOp.jpg') no-repeat top center; background-size: cover; object-fit: contain; width:100%; height:auto%; /* original art https://www.deviantart.com/lovecacao/art/Necklace-701600441 */ [/class] [class=behindtxt] position:relative; z-index:0; max-width: 1024px; margin:auto; height:390px; background:rgba(255,255,255, 1.0); [/class] [class=txtreal] position:relative; z-index:10; [/class] [class=text] position:absolute; z-index:15; top:-130px; margin-left: auto; margin-right: auto; left: 0; right: 0; max-width: 1024px; height:500px; background:rgba(255,255,255, 0.8); overflow:auto; padding:10px; text-align:justify; color:#000; font-family:'Heebo', Verdana; [/class] [class=header] display:inline; font-family:'Heebo', Verdana; font-size:25px; font-weight:bold; letter-spacing:1px; [/class] [class=subheader] display:inline; font-family:'Heebo', Verdana; font-size:17px; font-weight:bold; letter-spacing:1px; [/class] [class=directory] column-count: 3; column-gap: 10px; column-width: 300px; [/class] [class=fyuricredit] opacity:0.5; font-size:10px; max-width: 1024px; margin:auto; text-align:right; [/class]
Last edited:
XImageTransform.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]
