I'm open to requests for BBCode projects. I admittedly have little experience with RPNation's particular flavor of BBCode, but I have been working with CSS and HTML for the past 10 years or so. If you have an idea, feel free to run it by me.
License: All works are licensed under the CC0 1.0 Universal, meaning you do not need to provide attribution for them or require permission to use them; they are essentially released into the public domain.
Repository: lyrositor/rpn-bbcode (I will be uploading the codes I produce here for convenient access)
All of my new code will be made using bbcoder. Feel free to download it and use it for your own projects.
Gallery
Character Sheet #1
This was an experiment with creating a centered circular portrait, surrounding boxes and a replacement for the default tab styling. It works best with the default RpN theme, but should be mostly compatible with others.
Time: ~2.5 hours
Source: character-sheets/1.bbc
Character Sheet #2
More experimentation with accordions. Here I tried creating the effect of a folder that slides open. It's not as polished as I wanted (I think I could have picked better fonts, for one thing), but I was getting a bit tired with working on it towards the end. Consider it a proof-of-concept.
Time: ~3 hours
Sources: character-sheets/2.xml
Character Sheet #3
Playing around with animations and text shadows to create the illusion of an old computer terminal system. This took surprisingly long to make, mostly because I kept discarding ideas and restarting. For best effect, watch it as it loads, to see the side panel slide in.
Time: ~8 hours
Sources: character-sheets/3.xml
Experiment #1
My attempt at creating a horizontal accordion.
Time: ~2 hours
Sources: experiments/1.xml
Experiment #2
An attempt to create a stylable tab system. It's not perfect, as evidenced by the shifting tab titles, but it was interesting to work on.
Time: ~3 hours
Sources: experiments/2.xml
Experiment #3
More experimentation with accordions. This creates a sort of gallery where you can move from slide to slide by clicking on the arrow button at the top. I initially wanted to be able to move back and forth instead of just forward, but that did not seem possible beyond two slides. Can you figure out where the accordion comes in?
Time: ~3 hours
Sources: experiments/3.xml
Experiment #4
A challenge provided by Fable , the objective being to try to recreate this gallery. It re-uses code from my previous experiment and attempts to improve on it. This would have been much easier with fixed image widths, but I wanted to stay as close as possible to the original version.
This can obviously be adapted for other situations, such as multiple horizontally sliding panels in a character sheet, but without fixed widths it requires a lot of manual calculation. BBXML helps alleviate some of this, and I hope to improve it even further in later versions to avoid these kinds of hard-coded values.
Note: this will not compile correctly with the current version of bbcoder, as of this writing. It is using a patch I will be releasing in an upcoming version.
Time: ~10 hours
Sources: experiments/4.xml
Profile Box #1
HP: 4
CCA: 5
SSE: 15
ATK: 5
DEF: 1
EVA: 2
Commission for
Tardy Grade
, profile box for his character.
Time: ~1 hour
Source: profile-boxes/1.bbc
Profile Box #2
A commission for taliaangeni . I tried to create an identification card in the style of a driver's license.
Time: ~3 hours
Sources: profile-boxes/2.xml
Update Post #1
Commission for Tardy Grade , loosely based on a Darkest Dungeon design. The right-most part is an accordion.
Time: ~5 hours
Sources: update-post/1.xml
Castle of Arrgh
Update Post #2
Commission for Bowa . I used the palette and font selection they provided me with to create an update post for their character.
Time: ~2 hours
Sources: update-post/2.xml
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a tincidunt mi. Praesent sed risus ac nisi porttitor viverra. Proin a aliquam nunc. Vestibulum pharetra dui ac lectus viverra ultricies. Cras vel vulputate ligula. Nulla vitae ligula vitae massa tincidunt mattis. Suspendisse vehicula fringilla eros. Sed faucibus tellus sed ex imperdiet consectetur vel eget nibh. Integer sed metus augue. Donec ac metus sed velit pulvinar imperdiet non non neque. Ut at lacus id felis tincidunt malesuada vestibulum et leo. Curabitur viverra varius hendrerit. Aliquam erat volutpat. Etiam pellentesque enim sit amet eros ultrices ullamcorper.
Duis fringilla et leo in dignissim. Cras turpis metus, euismod in vulputate bibendum, sagittis et ipsum. Aliquam condimentum odio eros, in tempor urna elementum ut.
Sed vitae elit eget odio ultricies egestas. Donec dictum risus vestibulum, gravida dui et, volutpat metus. Donec et mauris at metus condimentum sodales id sed sapien. Fusce id mollis enim. Proin in tempor mauris, vel viverra ante. Fusce pretium ornare metus gravida mattis. Curabitur finibus vitae magna sit amet volutpat. Vestibulum accumsan velit pretium eros lacinia pellentesque. Quisque eget purus id turpis tincidunt consequat.
Also, just a bit of trickery I tried before getting caught by an admin. Don't try this at home.
License: All works are licensed under the CC0 1.0 Universal, meaning you do not need to provide attribution for them or require permission to use them; they are essentially released into the public domain.
Repository: lyrositor/rpn-bbcode (I will be uploading the codes I produce here for convenient access)
All of my new code will be made using bbcoder. Feel free to download it and use it for your own projects.
Gallery
Character Sheet #1
This was an experiment with creating a centered circular portrait, surrounding boxes and a replacement for the default tab styling. It works best with the default RpN theme, but should be mostly compatible with others.
Time: ~2.5 hours
Source: character-sheets/1.bbc
CLEAR
“A very relevant quote.”
H
o
l
l
o
w
K
n
i
g
h
t
Basic Information
Gender: Unknown
Age: 20
Race: Bug-thing
Morality: Lawful Good
Languages: None
Age: 20
Race: Bug-thing
Morality: Lawful Good
Languages: None
Abilities
Sword Mastery: Hollow Knight be good with sword.
Jumping: Hollow Knight go up way high real good.
Jumping: Hollow Knight go up way high real good.
- Hollow Knight is a bug of some kind.
I think. - Has a great personality.
- Mysterious.
- Cute.
Appearance
Personality
Background
Additional Information
CLEAR
CLEAR
Character Sheet #2
More experimentation with accordions. Here I tried creating the effect of a folder that slides open. It's not as polished as I wanted (I think I could have picked better fonts, for one thing), but I was getting a bit tired with working on it towards the end. Consider it a proof-of-concept.
Time: ~3 hours
Sources: character-sheets/2.xml
NOTHING
NOTHING
NOTHING
-
Midallin Lysier
-
NOTHINGNOTHINGSpecies: Human BaselineAge: 31 (subj.)Height: 182 cmEyes: GreenSome reports indicate brown. Colored contact lenses? Genetic therapy?Nationalities: Caraveelian, Tyndori (revoked), Atyanti (revoked)Occupation: Library Curator, suspected Spy and SaboteurStatus: At Large. Armed and Dangerous.Notes: Suspect has been fitted with multiple neural enhancers. Full ability set is currently unknown, but telepathic and heightened reflexes have been seen in action. Possible synthetic/organic co-processing abilities.
-
Classified
-
NOTHING
Character Sheet #3
Playing around with animations and text shadows to create the illusion of an old computer terminal system. This took surprisingly long to make, mostly because I kept discarding ideas and restarting. For best effect, watch it as it loads, to see the side panel slide in.
Time: ~8 hours
Sources: character-sheets/3.xml
N
Public Access Registry
IIN:
00781822401Name:
Beenma MagraAge:
24Species:
ChangelingNationality:
NixarianWeapons:
Plasma Cutter (S)Religion:
UnclearAbilities:
Can change appearance through a slow, machine-assisted process.Notes:
Smooth-talker. Petty thief. Stowaway. Nerd. Do not trust. .
> reg lookup 00781822401
Looking up #00781822401...
........................................ [100%]
Entry located: Beenma Magra
>
Looking up #00781822401...
........................................ [100%]
Entry located: Beenma Magra
+---------------+
<----- | Visor Glasses |
+---------------+
<----- | Visor Glasses |
+---------------+
+---------+
| Scanner | ------------>
+---------+
| Scanner | ------------>
+---------+
+-----------------+
| Long-Fall Boots | ------>
+-----------------+
| Long-Fall Boots | ------>
+-----------------+
.
Image Credit: Hacker (cyberpunk setting)
Experiment #1
My attempt at creating a horizontal accordion.
Time: ~2 hours
Sources: experiments/1.xml
-
Tab 1
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta lorem purus, ut semper lorem mattis et. Phasellus ac ultricies nunc, nec dignissim sem. Suspendisse auctor molestie dolor. Sed dictum nulla a eros ornare, eget venenatis est placerat. Integer a vehicula elit.
-
Tab 2
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta lorem purus, ut semper lorem mattis et. Phasellus ac ultricies nunc, nec dignissim sem. Suspendisse auctor molestie dolor. Sed dictum nulla a eros ornare, eget venenatis est placerat. Integer a vehicula elit.
-
Tab 3
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta lorem purus, ut semper lorem mattis et. Phasellus ac ultricies nunc, nec dignissim sem. Suspendisse auctor molestie dolor. Sed dictum nulla a eros ornare, eget venenatis est placerat. Integer a vehicula elit.
-
Tab 4
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta lorem purus, ut semper lorem mattis et. Phasellus ac ultricies nunc, nec dignissim sem. Suspendisse auctor molestie dolor. Sed dictum nulla a eros ornare, eget venenatis est placerat. Integer a vehicula elit.
Experiment #2
An attempt to create a stylable tab system. It's not perfect, as evidenced by the shifting tab titles, but it was interesting to work on.
Time: ~3 hours
Sources: experiments/2.xml
NONE
FONTFONT
-
Tab 1
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere nisi elit, vel molestie nisi hendrerit sit amet. Nunc facilisis augue in tortor volutpat tristique. Ut laoreet enim mauris, ut sagittis sapien convallis sit amet. Aenean pretium arcu ante, cursus gravida felis dignissim et. Duis dictum consequat lectus et ultricies. Phasellus ut scelerisque orci. Donec dignissim nunc magna, ac aliquet ante congue in. Sed tempus malesuada lacus, quis bibendum dolor elementum nec. Fusce euismod suscipit ante, ut accumsan nunc congue quis. Proin lorem tellus, auctor id turpis vitae, congue luctus magna.
-
Tab 2
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere nisi elit, vel molestie nisi hendrerit sit amet. Nunc facilisis augue in tortor volutpat tristique. Ut laoreet enim mauris, ut sagittis sapien convallis sit amet. Aenean pretium arcu ante, cursus gravida felis dignissim et. Duis dictum consequat lectus et ultricies. Phasellus ut scelerisque orci. Donec dignissim nunc magna, ac aliquet ante congue in. Sed tempus malesuada lacus, quis bibendum dolor elementum nec. Fusce euismod suscipit ante, ut accumsan nunc congue quis. Proin lorem tellus, auctor id turpis vitae, congue luctus magna.
-
Tab 3
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere nisi elit, vel molestie nisi hendrerit sit amet. Nunc facilisis augue in tortor volutpat tristique. Ut laoreet enim mauris, ut sagittis sapien convallis sit amet. Aenean pretium arcu ante, cursus gravida felis dignissim et. Duis dictum consequat lectus et ultricies. Phasellus ut scelerisque orci. Donec dignissim nunc magna, ac aliquet ante congue in. Sed tempus malesuada lacus, quis bibendum dolor elementum nec. Fusce euismod suscipit ante, ut accumsan nunc congue quis. Proin lorem tellus, auctor id turpis vitae, congue luctus magna.
Experiment #3
More experimentation with accordions. This creates a sort of gallery where you can move from slide to slide by clicking on the arrow button at the top. I initially wanted to be able to move back and forth instead of just forward, but that did not seem possible beyond two slides. Can you figure out where the accordion comes in?
Time: ~3 hours
Sources: experiments/3.xml
.
.
➜
-
.
-
.
-
.
-
.
-
.
-
.
First Slide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas nulla a dui congue pretium. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam auctor imperdiet mi, eget faucibus urna ultricies ac. Aenean porttitor lobortis vulputate. Sed ac tellus tincidunt, vestibulum lacus quis, auctor magna. Maecenas tempus quis sapien et venenatis. Quisque eget blandit enim. Aliquam non mi quis magna cursus volutpat. Sed blandit at nulla non lacinia.
Second Slide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas nulla a dui congue pretium. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam auctor imperdiet mi, eget faucibus urna ultricies ac. Aenean porttitor lobortis vulputate. Sed ac tellus tincidunt, vestibulum lacus quis, auctor magna. Maecenas tempus quis sapien et venenatis. Quisque eget blandit enim. Aliquam non mi quis magna cursus volutpat. Sed blandit at nulla non lacinia.
Third Slide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas nulla a dui congue pretium. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam auctor imperdiet mi, eget faucibus urna ultricies ac. Aenean porttitor lobortis vulputate. Sed ac tellus tincidunt, vestibulum lacus quis, auctor magna. Maecenas tempus quis sapien et venenatis. Quisque eget blandit enim. Aliquam non mi quis magna cursus volutpat. Sed blandit at nulla non lacinia.
Experiment #4
A challenge provided by Fable , the objective being to try to recreate this gallery. It re-uses code from my previous experiment and attempts to improve on it. This would have been much easier with fixed image widths, but I wanted to stay as close as possible to the original version.
This can obviously be adapted for other situations, such as multiple horizontally sliding panels in a character sheet, but without fixed widths it requires a lot of manual calculation. BBXML helps alleviate some of this, and I hope to improve it even further in later versions to avoid these kinds of hard-coded values.
Note: this will not compile correctly with the current version of bbcoder, as of this writing. It is using a patch I will be releasing in an upcoming version.
Time: ~10 hours
Sources: experiments/4.xml
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
-
..
-
.
.
.
.
.
.
.
.
.
.
.
❰❰
.
❱❱
Profile Box #1
Avar Pendergast
CCA: 5
SSE: 15
ATK: 5
DEF: 1
EVA: 2
Str lvl 3 | Arte lvl 1 | Spd lvl 2 | Jmp lvl 2
Location: Norhad Swords Guild
Time: ~1 hour
Source: profile-boxes/1.bbc
CLEAR
Profile Box #2
A commission for taliaangeni . I tried to create an identification card in the style of a driver's license.
Time: ~3 hours
Sources: profile-boxes/2.xml
FONTFONTFONTFONT
GLOBE
T10000001 01 01 1970
Virginia
ID Card
Customer #
T10000001
Name
John Smith
Address
123 Fake Street
Falseton, VA 10000
Falseton, VA 10000
Sex
M
Class
NONE
Date of Birth
01/01/1970
Eyes
BRO
Endorsements
NONE
ISS ORI
01/01/2001
Height
6FT 1IN
Restrictions
NONE
Exp
01/01/2030
Update Post #1
Commission for Tardy Grade , loosely based on a Darkest Dungeon design. The right-most part is an accordion.
Time: ~5 hours
Sources: update-post/1.xml
.
.
.
.
.
.
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl enim, pellentesque in lorem at, efficitur posuere quam. Nam lectus erat, porttitor ut tempus mattis, fringilla vitae lectus. Integer id turpis leo. Etiam in euismod ipsum. Donec euismod rhoncus diam, quis rutrum tortor interdum aliquam. Pellentesque ut eleifend odio. Proin at diam eget purus eleifend vehicula. Fusce consectetur nibh vel ante iaculis, ac placerat nulla scelerisque. Praesent venenatis ac dui ornare laoreet. Nunc nec urna nec lorem suscipit vehicula quis hendrerit massa. Nunc pharetra congue sapien in interdum.
Ut neque sem, interdum in luctus vitae, condimentum dictum orci. Cras ultricies erat nec condimentum lacinia. Etiam sollicitudin, libero quis ornare blandit, quam ligula dignissim libero, nec tempus dui quam eu eros. Etiam tincidunt vulputate arcu, malesuada aliquet mauris varius eget. Mauris ipsum sapien, vestibulum in semper in, luctus eu orci. Morbi vehicula pretium elit, sed luctus orci tincidunt vel. Nam non dapibus quam. Mauris tempor blandit dui sed efficitur. In tempor ante ac aliquet facilisis. Morbi ullamcorper condimentum magna et tempus. Vivamus viverra urna egestas velit ultricies faucibus. Phasellus erat ante, tincidunt sit amet laoreet eget, luctus sed odio. Praesent eu risus pellentesque, tempus turpis vel, faucibus augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras cursus dui quis dui accumsan, nec sollicitudin leo laoreet. Nulla at hendrerit ipsum.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl enim, pellentesque in lorem at, efficitur posuere quam. Nam lectus erat, porttitor ut tempus mattis, fringilla vitae lectus. Integer id turpis leo. Etiam in euismod ipsum. Donec euismod rhoncus diam, quis rutrum tortor interdum aliquam. Pellentesque ut eleifend odio. Proin at diam eget purus eleifend vehicula. Fusce consectetur nibh vel ante iaculis, ac placerat nulla scelerisque. Praesent venenatis ac dui ornare laoreet. Nunc nec urna nec lorem suscipit vehicula quis hendrerit massa. Nunc pharetra congue sapien in interdum.
.
.
-
King Arthur.
-
King Arthur is currently searching for the Holy Grail.
-
Sir Lancelot.
-
Sir Lancelot is being hounded by the police for unprovoked aggression on a beloved historian.
Update Post #2
Commission for Bowa . I used the palette and font selection they provided me with to create an update post for their character.
Time: ~2 hours
Sources: update-post/2.xml
.
.
.
.
.
Duis fringilla et leo in dignissim. Cras turpis metus, euismod in vulputate bibendum, sagittis et ipsum. Aliquam condimentum odio eros, in tempor urna elementum ut.
“Lorem ipsum dolor sit amet.”
Duis accumsan risus ut euismod efficitur. Vivamus finibus, magna quis maximus tristique, nibh massa gravida ex, non tempus lectus nibh id justo. Maecenas venenatis tortor consectetur, feugiat lacus et, faucibus est. Suspendisse bibendum sed magna ut gravida. Fusce mi tortor, tempor a mollis a, facilisis ac mi. Sed eu imperdiet purus, pellentesque feugiat ex. Mauris quis posuere libero. Donec feugiat, augue non mattis porta, sem tortor pharetra felis, a aliquet urna est in ligula. Cras magna lectus, molestie vel justo a, malesuada scelerisque quam. Ut pulvinar sapien et libero vehicula, ac pellentesque eros sagittis.Sed vitae elit eget odio ultricies egestas. Donec dictum risus vestibulum, gravida dui et, volutpat metus. Donec et mauris at metus condimentum sodales id sed sapien. Fusce id mollis enim. Proin in tempor mauris, vel viverra ante. Fusce pretium ornare metus gravida mattis. Curabitur finibus vitae magna sit amet volutpat. Vestibulum accumsan velit pretium eros lacinia pellentesque. Quisque eget purus id turpis tincidunt consequat.
Also, just a bit of trickery I tried before getting caught by an admin. Don't try this at home.
Last edited: