foresigh
heh~
I had some extra time (not that much, I'm kinda procrastinating) and decide to try BBCode and share some ideas with all of you. I always like to make things mobile-friendly and at the same time keep the fun of full desktop mode. I'm always open to feedback and ideas 
[class=container] background-image: url('https://i.pinimg.com/originals/4c/db/c9/4cdbc9d163c71e526e078fab458c1c27.jpg'); background-position: center; background-size: cover; background-attachment: fixed; display:flex; flex-direction: row; text-shadow: 2px 2px 3px black; [/class] [class name=container maxWidth=600px] flex-direction: column; [/class] [class=charContainer] background-color:RGBA(236,206,109,0); padding: 1vw; [/class] [class=characterName] border: 4px solid RGB(176,161,96); background-color: RGBA(176,161,96,0.6); backdrop-filter: blur(3px); text-shadow: 1px 1px 3px black; [/class] [class=charCard] background-color: rgba(176,161,96,0.6); color: white; padding-left: 1rem; clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%); border: 2px solid silver; [/class] [class=descriptionContainer] width:100%; [/class] [class=descriptionItem] background-color: rgba(80,80,80,0.4); border: 2px solid silver; backdrop-filter: blur(3px); cursor:pointer; padding: 3rem; [/class] [class name=descriptionItem state=hover] background-color: rgba(50,50,50,0.7); [/class] [class name=return state=hover] cursor:pointer; text-shadow: 1px 1px 4px gold; [/class] [class=descriptionText] padding: 1rem; background-color: rgba(50,50,50,0.7); border: 2px solid silver; [/class] [script class=descriptionItem] hide return hide descriptionText [/script] [script class=return on=click] show descriptionItem hide return hide descriptionText [/script] [script class=descriptionItem on=click] hide descriptionItem show return set currentTab (getText) if (eq ${currentTab} Background) (show descBackground) if (eq ${currentTab} Personality) (show descPersonality) if (eq ${currentTab} Skills&Weaknesses) (show descSW) if (eq ${currentTab} Extras) (show descExtras) [/script]
[div class=container]
[div class=charContainer]
[div class=characterName]
Character Name
Race: [/div]
[div class=charCard]
Age: 1000+
[/div]
[div class=charCard]
Class: Mage
[/div]
[div class=charCard]
Location: City
[/div]
Made by
foresigh
[/div]
[div class=descriptionContainer]
[div class=return]<— Return[/div]
[/div]
[/div]
First, turn on the BBCode mode, then paste the code and turn off again the BBCode mode. That way you'll see the comments
[class=container] background-image: url('https://i.pinimg.com/originals/4c/db/c9/4cdbc9d163c71e526e078fab458c1c27.jpg'); background-position: center; background-size: cover; background-attachment: fixed; display:flex; flex-direction: row; text-shadow: 2px 2px 3px black; [/class] [class name=container maxWidth=600px] flex-direction: column; [/class] [class=charContainer] background-color:RGBA(236,206,109,0); padding: 1vw; [/class] [class=characterName] border: 4px solid RGB(176,161,96); background-color: RGBA(176,161,96,0.6); backdrop-filter: blur(3px); text-shadow: 1px 1px 3px black; [/class] [class=charCard] background-color: rgba(176,161,96,0.6); color: white; padding-left: 1rem; clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%); border: 2px solid silver; [/class] [class=descriptionContainer] width:100%; [/class] [class=descriptionItem] background-color: rgba(80,80,80,0.4); border: 2px solid silver; backdrop-filter: blur(3px); cursor:pointer; padding: 3rem; [/class] [class name=descriptionItem state=hover] background-color: rgba(50,50,50,0.7); [/class] [class name=return state=hover] cursor:pointer; text-shadow: 1px 1px 4px gold; [/class] [class=descriptionText] padding: 1rem; background-color: rgba(50,50,50,0.7); border: 2px solid silver; [/class] [script class=descriptionItem] hide return hide descriptionText [/script] [script class=return on=click] show descriptionItem hide return hide descriptionText [/script] [script class=descriptionItem on=click] hide descriptionItem show return set currentTab (getText) if (eq ${currentTab} Background) (show descBackground) if (eq ${currentTab} Personality) (show descPersonality) if (eq ${currentTab} Skills&Weaknesses) (show descSW) if (eq ${currentTab} Extras) (show descExtras) [/script]
[div class=container]
[div class=charContainer]
[div class=characterName]
Character Name
Race:
[div class=charCard]
Age: 1000+
[/div]
[div class=charCard]
Class: Mage
[/div]
[div class=charCard]
Location: City
[/div]
Made by
foresigh
[/div]
[div class=descriptionContainer]
[div class=return]<— Return[/div]
[div class=descriptionItem]Background[/div]
[div class="descriptionText descBackground"]Lorem Ipsum nekorum background[/div][div class=descriptionItem]Personality[/div]
[div class="descriptionText descPersonality" style="margin-top: -20px"]Lorem Ipsum nekorum Personality[/div][div class=descriptionItem]Skills&Weaknesses[/div]
[div class="descriptionText descSW" style="margin-top: -35px"]Lorem Ipsum nekorum Skills and weaknesses[/div][div class=descriptionItem]Extras[/div]
[div class="descriptionText descExtras" style="margin-top: -55px"]Lorem Ipsum nekorum Extras[/div][/div]
[/div]
First, turn on the BBCode mode, then paste the code and turn off again the BBCode mode. That way you'll see the comments
Code:
[nobr]
[COLOR=rgb(243, 121, 52)][SIZE=6][B][COMMENT]------------------------------------CLASSES--------------------------------------------[/COMMENT]
[B][COMMENT]---------------DO NOT CHANGE ANYTHING BETWEEN BRACKETS '[]'-----------[/COMMENT][/B][/B][/SIZE][/COLOR]
[B][COLOR=rgb(0, 168, 133)][SIZE=5][COMMENT]-----THE CONTAINER CLASS. CHANGE THE URL OF 'background-image: url([/COMMENT][/SIZE][COMMENT][/comment][/COLOR][COMMENT][COLOR=rgb(184, 49, 47)][SIZE=5]'[URL]https://imageURL[/URL]'[/SIZE][/COLOR][/comment][/B][COMMENT][COLOR=rgb(0, 168, 133)][SIZE=5][B])' TO CHANGE THE... WELL, BACKGROUND IMAGE----------[/B][/SIZE][/COLOR][/COMMENT][COLOR=rgb(0, 168, 133)][SIZE=5][B][/B][/SIZE][/COLOR]
[class=container]
background-image: url('https://i.pinimg.com/originals/4c/db/c9/4cdbc9d163c71e526e078fab458c1c27.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
display:flex;
flex-direction: row;
text-shadow: 2px 2px 3px black;
[/class]
[class name=container maxWidth=600px]
flex-direction: column;
[/class]
[COLOR=rgb(0, 168, 133)][SIZE=5][B][COMMENT]--------------THE CLASSES OF THE CHARACTER DESCRIPTION. IF YOU WANT TO CHANGE COLORS USE RGBA, HEX MAY GIVE ERROS---------------[/COMMENT][/B][/SIZE][/COLOR]
[class=charContainer]
background-color:RGBA(236,206,109,0);
padding: 1vw;
[/class]
[class=characterName]
border: 4px solid RGB(176,161,96);
background-color: RGBA(176,161,96,0.6);
backdrop-filter: blur(3px);
text-shadow: 1px 1px 3px black;
[/class]
[class=charCard]
background-color: rgba(176,161,96,0.6);
color: white;
padding-left: 1rem;
clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
border: 2px solid silver;
[/class]
[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]THE CHARACTER DESCRIPTION CLASSES. IT CONTAINS THE STYLE OF TABS[/COMMENT][/COLOR][/B][/SIZE]
[class=descriptionContainer]
width:100%;
[/class]
[class=descriptionItem]
background-color: rgba(80,80,80,0.4);
border: 2px solid silver;
backdrop-filter: blur(3px);
cursor:pointer;
padding: 3rem;
[/class]
[class name=descriptionItem state=hover]
background-color: rgba(50,50,50,0.7);
[/class]
[class name=return state=hover]
cursor:pointer;
text-shadow: 1px 1px 4px gold;
[/class]
[class=descriptionText]
padding: 1rem;
background-color: rgba(50,50,50,0.7);
border: 2px solid silver;
[/class]
[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]----------THE SCRIPTS! DO NOT TOUCH IF YOU DO NOT KNOW ABOUT SCRIPTING. -----[/COMMENT][/COLOR][/B][/SIZE]
[script class=descriptionItem]
hide return
hide descriptionText
[/script]
[script class=return on=click]
show descriptionItem
hide return
hide descriptionText
[/script]
[script class=descriptionItem on=click]
hide descriptionItem
show return
set currentTab (getText)
if (eq ${currentTab} Background) (show descBackground)
if (eq ${currentTab} Personality) (show descPersonality)
if (eq ${currentTab} Skills&Weaknesses) (show descSW)
if (eq ${currentTab} Extras) (show descExtras)
[/script]
[SIZE=6][B][COLOR=rgb(243, 121, 52)][B][COMMENT]---------------------END OF CLASSES. CONTENT GOES HERE NOW------------------------[/COMMENT][/B][/COLOR][/B][/SIZE]
[/nobr]
[div class=container]
[div class=charContainer]
[div class=characterName][COLOR=rgb(0, 168, 133)][B][COMMENT]-----TO CHANGE IMAGE, CLICK THIS IMAGE, CLICK THE ARROWS AND PASTE YOUR IMAGE-----[/COMMENT][/B][/COLOR]
[CENTER][IMG width="263px"]https://i.pinimg.com/564x/27/71/43/27714386c6883319d6786c7cea51d873.jpg[/IMG]
[SIZE=5][B]Character Name
Race: [/B][/SIZE][/CENTER]
[/div]
[div class=charCard]
[B]Age[/B]: 1000+
[/div]
[div class=charCard]
[B]Class[/B]: Mage
[/div]
[div class=charCard]
[B]Location[/B]: City
[/div]
[I][SIZE=3]Made by [USER=75705]@foresigh[/USER][/SIZE][/I]
[/div]
[div class=descriptionContainer][B][COLOR=rgb(0, 168, 133)][COMMENT]UP THERE WERE THE BASIC INFO OF YOUR CHARACTER, YOU CAN CHANGE FONT, COLORS OR STYLE USING THE TOOLS GIVEN BY THE RPNATION. THIS IS NORMAL TEXT[/COMMENT][/COLOR][/B]
[div class=return][SIZE=6][B]<— Return[/B][/SIZE][/div][B][COLOR=rgb(0, 168, 133)][COMMENT]DESCRIPTION AREA. THE BOLD TEXT IS THE TITLE OF THE AREA. THE TEXT THAT SAYS 'LOREM IPSUM NEKORUM' IS THE CONTENT. YOU CAN COPY AND PASTE ONE SECTION TO ADD MORE, BUT YOU'LL NEED TO ADD SCRIPT LINE. THE CURRENT CODE SHOULD GIVE YOU A CLUE ON WHAT TO ADD AND HOW TO DO IT :)[/COMMENT][/COLOR][/B]
[CENTER][div class=descriptionItem][SIZE=6][B]Background[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descBackground"]Lorem Ipsum nekorum background[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Personality[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descPersonality" style="margin-top: -20px"]Lorem Ipsum nekorum Personality[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Skills&Weaknesses[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descSW" style="margin-top: -35px"]Lorem Ipsum nekorum Skills and weaknesses[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Extras[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descExtras" style="margin-top: -55px"]Lorem Ipsum nekorum Extras[/div]
[/div]
[/div]
Last edited:
