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!

    Remember to credit artists when using work not your own.

Closed Dreams of Arcadia ☆ Workshop & Store (Freebies)

Alteras

The Sleepy One
Moderator
Supporter
[div=background-image:url('https://orig00.deviantart.net/ec7a/f/2015/113/a/b/commission___lovely_star_by_rosuuri-d8qqd00.jpg'); background-size: contain; --image-width:1920; --image-height:1080; --ratio:calc(var(--image-height) / var(--image-width)); width:100%; padding-bottom:calc(var(--ratio) * 100%); position:relative;][div= top:5px; left:5px; width:calc(100% - 15px); height: calc(100% - 15px); background: radial-gradient(circle at center, transparent 42.5%, rgba(255,255,255, 0.8) 42.5%); position:absolute; border:3px solid white;color:Gray; overflow-y:hidden;][div=position:absolute; bottom:0; right:0; width:40%; height:20%; padding:2px; vertical-align:bottom; display: flex; justify-content: flex-end; align-items: flex-end; line-height:1;]
Background by Rosuuri
Alteras Alteras BBCode Workshop and Store

Dreams of Arcadia
[/div][div=; padding-left:3px; color:white]Introduction[/div][div=width:26%; height:40%; overflow:hidden;][div=width: calc(100% + 14.5px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:8%]I have a second BBcode workshop now! Star of Arcadia. Go check it out. This workshop will remain for archive purposes.



Hello! Alteras Alteras here! I've decided to open a BBcode shop and offer my aid and services to others. I've always had a fair bit of interest in web design and being part of RPNation has led me to an interest in BBcode. Anyway, I'll be posting both complete templates and small bits of code. This is both a shop and a personal collection of code that I make. I almost always try to make my code mobile friendly, but some cases will just get the short end of the stick, like this… intro… post… I tend to focus on image preservation and creating pieces that convey the feeling of its contents. Everything is free to use with credit unless otherwise stated. Oh, and as you go through, you might notice that I often put some story or text on it. Its something of my version of Lorem Ipsum, a story that I'm imagining about. It's about all these different characters in different worlds wanting to reach a place called Arcadia, a idyllic land without concerns. There's no proper chronology for all these stories, so just think of it as like a snapshot into the Dreams of Arcadia Universe that I'm slowly imagining. Oh, and do be aware that my bbcode posts have different names from what the stories are titled. It helps me keep my original idea of the bbcode intact. Anyway, enjoy!
[/div][/div][div=padding-left:3px; color:white; bottom:calc(40% + 6px); position:absolute;]Requests[/div][div=width:26%; height:40%; overflow:hidden; bottom:3px; position:absolute;][div=width: calc(100% + 14.5px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding-left:3px; padding-right:8%]I'll be accepting requests, both for new BBcode and minor alterations to my previous templates. However, I do ask that you be descriptive in your requests. Feel free to post on this thread or pm me. Depending on the level of difficulty in the request, it could take me anywhere from a day to a few weeks to complete a request, although that's only in rare cases. If you want, I can include your text in the template, so it'll be easier for the both of us to see what it actually looks like. I do have a list of minimum requirements:
  • Mobile Priority - how high up do you want your code to be mobile friendly? Do you want full on support, where everything looks good on any device? Are you okay with it sacrificing readability for presentation? Or do you just want to pretend that smartphones don't even exist and go full PC? The scale goes from Mobile Friendly to Mobile Compatible to Desktop Only. For comparison, this intro post would be considered Mobile Compatible, well borderline Desktop Only.
  • Freebie or Nah? - This is a given. Either way, I want to be able to put something I made on this thread, so I'll also have to ask for that.
  • Expected Color Palette and Image - Makes it much easier for me. If you don't want to, I can drop in my own color palette and image, but at least give me an idea of how many colors do you see in this thing.
  • The Dream - What you want me to make! I can't read your mind, so you need to be as descriptive in your request as possible. I'll probably draw out something or make a prototype to let you see.
[/div][/div]
[div=width:26%; height:80%; position:absolute; top:0; right:3px; overflow:hidden;]
BBCode[div=width:100%; height:100%; overflow:hidden;][div=width: calc(100% + 14.5px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:8%; position:absolute]Mobile Friendly -
Mobile Compatible -
Desktop Only -
Commission -
Not for Free Use -
Possible Revisions in the Future -
Link to Code -

To change template attributes, input desired values where requested at the beginning of the code. It should look like --variable: value. For image URLs, look for background-image()

List of BBCode
The code and title of the BBCode is right below their respective post. So this post would be called 'Looking Glass'
Looking Glass -
Idyllic Clouds -
of Glass and Steel -
Novel Conversations -
Dynastic Silk -
Imperial Satin -
Forgotten Glory -



[/div][/div]​
[/div][/div][/div]
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
Looking Glass
Given a wonderful background with a singular object to focus on, it is only natural that the bbcode orient itself to emphasis this object. Because of the way the negative space in the image is made, we can afford to use a white and light background for the text. The code is adjustable to almost any image size. The raw code needed to put in are the image width, image height, and actual image url. Because of the way variables works, I am unable to make an easy way to resize the circle. In order to resize it, you'll have to locate the following: radial-gradient(circle at center, transparent 42.5%, rgba(255,255,255, 0.8) 42.5%). Your radius of the circle is the 42.5% part. Once you change that, you might have to go through each part and change the width of the text boxes. Because of how touchy it is, it would probably be better to not change the circle radius.

Code:
[div=background-image:url('Image to put'); background-size: contain; --image-width:Background Image width (no units); --image-height:background Image height (no units); --ratio:calc(var(--image-height) / var(--image-width)); width:100%; padding-bottom:calc(var(--ratio) * 100%); position:relative;][div= top:5px; left:5px; width:calc(100% - 15px); height: calc(100% - 15px); background: radial-gradient(circle at center, transparent 42.5%, rgba(255,255,255, 0.8) 42.5%); position:absolute; border:3px solid white;color:Gray; overflow-y:hidden;][comment]Designed by Alteras[/comment][div=position:absolute; bottom:0; right:0; width:40%; height:20%; padding:2px; vertical-align:bottom; display: flex; justify-content: flex-end; align-items: flex-end; line-height:1; overflow-y:scroll;]
[RIGHT][FONT=Comfortaa][SIZE=2]Subtitle[/SIZE]
[SIZE=7]Title Card[/SIZE][/FONT][/RIGHT]
[/div][div=; padding-left:3px; color:white][FONT=Comfortaa][SIZE=6][U]Top Left Title[/U][/SIZE][/FONT][/div][div=width:26%; height:40%; overflow:hidden;][div=width: calc(100% + 14px); height: 100%; overflow: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Top Left Content
[/div][/div][div=padding-left:3px; color:white; bottom:calc(40% + 6px); position:absolute;][FONT=Comfortaa][SIZE=6][U]Bottom Left Title[/U][/SIZE][/FONT][/div][div=width:26%; height:40%; overflow:hidden; bottom:3px; position:absolute;][div=width: calc(100% + 14px); height: 100%; overflow: scroll; box-sizing: border-box; padding-left:3px; padding-right:7%]
Bottom Left Content
[/div][/div]
[div=width:26%; height:70%; position:absolute; top:0; right:3px; overflow:hidden;]
[RIGHT][COLOR=white][FONT=Comfortaa][SIZE=6][U]Top Right Title[/U][/SIZE][/FONT][/COLOR][div=width:100%; height:100%; overflow:hidden;][div=width: calc(100% + 14px); height: 100%; overflow: scroll; box-sizing: border-box; padding:3px; padding-right:7%; position:absolute]
Top right Content
[/div][/div][/RIGHT]
[/div]
[/div][/div]
 

Alteras

The Sleepy One
Moderator
Supporter
[div= position: relative; perspective: 1px; overflow-x: hidden; overflow-y: scroll; width:100%; min-height:400px; transform-style: preserve-3d; max-height:80vh;background-color:#5e95ed][div=width:100%; height:400px; transform: translateZ(-1px) scale(2); position: absolute; top:0; padding-top: 1000px; pointer-events:none;background:url('https://www.rpnation.com/media/18692751_p0.30664/full') no-repeat; background-size:cover; background-position: center; background-color:#5e95ed][/div][div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: 3em auto; padding:5px; margin-bottom:1em;]
Beneath the Spirits
Prologue - Legends, Ideals, and the Promise of Another World
[/div]
[div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: auto; padding:5px;]"Well? What do you think?" "What do you mean 'what do you think?'" "What do you think about the legend?"
wwwwFelix leaned forward and stirred the porridge in the small camping pot with a wooden stick. The wind blew through the valley, rustling the trees, grass, and everything between. The spirits of the sky floated above the clouds, letting their translucent body cast shadows onto the earth below. It was lunch time, and the two could've just walked back into town, but they weren't about to, especially when they already spent the morning saying goodbye to everyone. "I think... that you need more food!!" "Oh come on! Answer already!" Pira cried out in annoyance. "You have to at least think that some part of it is real, otherwise you wouldn't join me and Eri!" The large bull-like beast that Pira was sitting on opened its eyes and let out a moo at the mention of its name. "See! Even Eri wants to know!" "Which one are you talking about?"
wwwwPira puffed her cheeks even more before sending the end of her staff to the cloth wrapped head of the one making lunch. "The Seekers of Arcadia! What else could I be talking about?" "Is that the one about the man who created a dragon? Or the people who sailed over the ocean in metal ships?" "Agh!!! Fine!!! I'll tell you the whole legend!!!"[/div]
[div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: auto; padding:5px;]wwwwLong ago, when the spirits of the earth were more plentiful and the spirits of nature haven't been scattered by the grand races, there was a great earthquake. The earthquake split Mount Jlumye into two, Mount Crirum and Mount Imno. And between the two was a stone road that ran straight through the two. On either side of the massive walls created by the mountains were a set of massive iron gates. When the kings of the grand races came before the iron gates. The one on Mount Crirum's side opened, revealing a world of marble and quartz, decorated with velvet fabric, golden lamps, and above all, books and scrolls. A multitude of books were floating in the air just beyond the gates. Then a figure approached the kings. Stopping just at the gate, the man looked at each one intensely, then at the iron gates of Mount Imno. He opened his mouth and spoke in an unknown tongue, but the kings understood what he said.「I am known as the Librarian. I come looking for Arcadia.」Each of the kings shook their head and the Librarian became saddened. The kings, in their sympathy, invited the odd man to their castles. They showed him many things, from women to wealth, in the hopes of cheering him up, but he remained depressed. After three days, he thanked the kings and their hospitality before departing back through the gates.
wwww200 years later, the gates of Mount Imno opened, and a group of beings walked out. They were all dressed differently, wielding odd weapons, casting unknown magic, and speaking an unknown language. When the king of man approached them, they simply said,「We seek Arcadia.」The king shook his head and asked,「What is Arcadia?」One of the visitors walked forward and placed their hand on the kings head. After several moments, the hand was released and the king began to cry in sympathy. The group turned around to face the gates before saying,「If you also seek Arcadia, follow the Spirits of Knowledge to the ends of the world.」Then they left and the gates closed again. The king of man, still covered in tears, returned to his people and retold what had happened. When asked by his subjects what is Arcadia, the king simply said,「The Land of Idyllic Peace. The Promise of Another World, a world without suffering.」The king continued at length, speaking of peaceful lives, grand knowledge, and honorable people, as if he had seen it all himself. At those words, people ran toward the gates in droves, but when they came to the mountains, the gates were no longer there. So people instead began to follow the spirits, not knowing if there was a spirit of knowledge.[/div]
[div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: auto; padding:5px;]wwww"So? What do you think?" Felix had his eyes closed the entire time. At the conclusion of it, he looked up at the sky. One of the Spirits opened its mouth and let out a low bellow. "Is that not why we are following the Spirits of the Sky?" Pira, surprised at this answer, also looked up at the sky and smiled. "Of course. Even if we can't find Arcadia, it'll be one heck of an adventure anyway." "Aw, don't say that! That'll just jinx it." "Like that will! Come on! You're burning the porridge!" "Right, right." The two returned to their meal, with the legend still playing in their minds.
[/div][/div]
 

Alteras

The Sleepy One
Moderator
Supporter
Idyllic Clouds

Edit: Since the update (1/19/18) brought about massive changes to the site, 'Idyllic Clouds' is temporarily considered non-usable. I will definitely come back and fix it, or at least try to.

An attempt to bring over parallax background with the intention of preserving a detailed image. It will almost certainly show more than the image given enough text. Changeable attributes are easy to spot, background color for image, image URL, and content background and borders. I didn't put in variables for the content background and borders since I intend to come back to this in the future. To add more sections of floating text, just copy and paste this div to the end.

Code:
[div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: 3em auto; padding:5px; margin-bottom:1em;][/div]
Code:
[div= --bg-color: Background color; position: relative; perspective: 1px; overflow-x: hidden; overflow-y: scroll; width:100%; min-height:400px; transform-style: preserve-3d; max-height:85vh;background-color:var(--bg-color)][comment]Designed by Alteras[/comment][div=width:100%; height:400px; transform: translateZ(-1px) scale(2); position: absolute; top:0; padding-top: 1000px; pointer-events:none;background:url('Image URL Here') no-repeat; background-size:cover; background-position: center; background-color:#5e95ed][/div][div=background-color:rgba(255,255,255, 0.8);border:3px solid white;color:Gray; position: relative; height: auto; width: 85%; margin: 3em auto; padding:5px; margin-bottom:1em;]
Content
[/div][/div]
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=pointer-events:none;]
[/div][div=position: absolute; top:0; left: 3em;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px; transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237]
[div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;]
[div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;]Prose[/div]
[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]
Shadows of the Librarian
Act 1 - The Empty Abyss and the Realm of Knowledge

wwwwThe howling echo of the wind swept through Ru Ling’s senses. Moments went by before the same howl came again, slowing bringing her to consciousness. She felt the cold touch of stone on the tips of her fingers. Slowly that feeling spread throughout her entire backside as she began to realize it wasn't soft and plush feel of her bed. Opening her eyes and sitting straight up, Ru was hit by the cold wind once more. Her light jacket fell onto her lap, revealing a petite dress of black and white frills. Looking around her, she began to take in the sight, massive structures floating the infinite space. Above her were more and more of these structures, walls, stairs, archways, ceilings, pillars, each one casting a dull shadow down onto the one below it. Ru was on a floating platform below all the structures with only a long staircase going up. As she turned her head in wonder, she noticed a marble lectern at the end of the platform opposite of the staircase. She got up and before a step in, bumped her foot into something. Looking down she saw her gauntlet wrapped in her red scarf by her foot. Putting the glove on and wrapping the scarf around her, Ru felt a bit more comfortable, knowing that her weapon of choice is with her once more and not with the Syndicate. That being said, she doesn’t know how neither the gauntlet nor her came to this place. She flexed her fingers and did some quick jabs to make sure that fit on just snug. The light sound of fabric and metal moving to her actions brought more relief to her.

wwwwJust as Ru was about to continue her impromptu training session, a gust of wind hit her, heavier than the previous ones, once again reminding her that she was in an unknown place. She looked over the edge and into the abyss, an abyss that glowed blue. She turned once more to the lectern and approached it. It was made out of white stone carved in the gothic style. On it appeared to be a leather-bound book, large in size and small in depth, like the old picture books she had as a child. As she got closer to it, blue light began to travel up the crevices up to the book, illuminating the cover. Leaning forward, Ru tried to read the title, if it could even be called that. The title was in multiple languages, some recognizable, others incomprehensible, all blurred together, with the different scripts shifting in and out of focus.

wwwwShe hesitantly lifted her right hand up and tapped the blurry text. Instantly a glow of bright blue shined, causing her to flinch back. The text then began to dim, revealing an unchanging title in both Mandarin and English, “Guest Book.” After staring at it for sometime, she slowly opened the book, pausing to see if something would happen before laying the pages inside bare. The pages had a parchment feel and was stained a golden yellow. The signatures on the first few pages were in faded blue, a testament to how old it is. They were all in a variety of languages, some she knew were real, others that seemed to be alien. The dates were all wrong as well, in different chronological systems. The more pages she flipped through, the more clear the ink became. Some names have been strikethrough, or rubbed out of existence. The signatures stopped several pages in. Naturally feeling inclined to sign her name in the book, she began to look for a writing tool. She looked around the book, then around the lectern, before noticing that there was still the bright blue at the tip of her gauntlet. With a bit of thinking, she connected two and two together, realizing her finger tip is her writing tool. With a face of hesitation, she brought her finger close to the paper. She wasn’t too comfortable with the idea of using her finger as a stylus, remembering the pain of signing her name on those touch screens that more and more of the high end stores are using. She barely touched paper when her signature suddenly signed itself, along with a date and time that she knew.

"Ru Ling - Sept. 8, 2028"

wwwwRu slowly lifted her hand back up. The blue glow was no longer on her, but she was more focused on the magical signature that had appeared. It followed the flow and rhythm of her handwriting perfectly. After several moments of intrigue and staring, she slowly closed the book, having taken it in. The blue light faded away and the title returned to its blurred state. She took it in, but she was barely processing it all. Her thoughts were finally catching up to her, and along with it the shock, she is not in Guangzhou, or China, or even the earth she knows. She began to wonder how she got there, why she was there, how she would get out, and much much more.

wwwwAs if to knock her out of her mild panic, a gust of wind hit her, almost knocking her off her feet, in the direction of the stairs opposite the lectern. Ru Ling could only see one way to go in her position, and that would be up the stairs.
[/div]
[div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;]Info[/div]
[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 1[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/ slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/ slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/ slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]
Please note that the ending tag for slide has been broken up due to interference with the actual accordion.

[/div]
[div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;]Author[/div]
[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]Author's Note
wwwwHello! Alteras Alteras here. This is what I have so aptly named "of Glass and Steel" since I can't think of anything else. The intention of the BBcode is to create a tab-text system with a high priority of preserving a mood setting image. Many considerations were made in the creation of this entry.

The BBcode

wwwwThe biggest consideration was the need to preserve the content in a format that is readable and clean on practically any screen, whether it be in appropriate scaling or flex design for when the elements don't fit. I have been able to achieve that with mild success. Mobile users will get the short end of the stick as the content is restricted to the size of the image. For screen sizes of a phablet (yes, a tablet-phone, a phablet) and above, you'll get a nicer screen size. I find that the best orientation to view this BBcode is in landscape mode, the way all screens should be.

wwwwMy second largest consideration was the ability to use this with any image and color palette. This means that the formulas for scaling and the image could easily be changed. CSS allows for the use of variables in the following format:

--variable-name-can-be-anything​

The use of the variable just has to follow this format:

var(--variable-name)​

wwwwI have used this with the formula, but decided against it in the use of color, as the primary purpose of a CSS variable is to save space. At the same time, there is a large reliance on em, vh, and more dynamic lengths to achieve the flexibility this does on different resolutions despite the content effectively being positioned absolute. One problem that you might notice if you are in another theme, is the fact that the text box size is larger. This is due to the differences in sizes from default and color me. Message posts aren’t directly defined, but rather flexed into a shape defined by its surroundings, so that means somewhere a margin or a padding isn’t the same between the two themes, they are minuscule differences, but clearly enough to throw the text box size off by 10 pixels.

wwwwMy third major consideration was the ability to make the tabs look ~cool. This was achieved through the use of Transform:. I probably could've achieved the same feel of this design using normal accordions, but by god does Transform really open up the possibilities of BBcode design. You can do so many more things with it, and it's quite powerful too. Skewing content, warping content, doing 3D stuff with it. It is incredible.

wwwwMany more considerations were made, however this BBcode was made primarily as a proof of concept, that responsive design (in terms of scaling) can be used with powerful div boxes while preserving BBcode design within the content. I intend to create a more comprehensive resource page of both CSS variables and Transform in the near future.

wwwwTo add more tabs, just copy and paste this while adjusting the translateX( ) portion. As it currently stands, you need to add 5.25em to the previous one of it. So that means (-8.75em) - (Slide number - 1)(5.25em).
Code:
{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(OVER HERE); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]
[/div]
[/div]
[/div][/div][/div]
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
of Glass and Steel

Edit: Since the update (1/19/18) brought about massive changes to the site, 'of Glass and Steel' is temporarily considered non-usable. I will definitely come back and fix it, both the slides not showing up and giving it a new predictive equation. At the same time, I will most likely be releasing a completely new and cleaner code that will mimic the old style, utilizing the bbcode added.

Edit 2: Slides have been fixed, but is serving as a stop gap solution.

Overall Winning Design and Member's Choice of the 2017 Palette Challenge. Original Submission here
Much of what I want to say is part of the post itself. As for the story and how it fits into the "Arcadia Universe," I guess the Shadows of the Librarian are one of the principal organizations looking for Arcadia, traveling between worlds in search of their utopia. My thoughts on the post as a whole are as follows. It is quite possibly my greatest pride in BBCode, and at the same time my messiest. Alot of the problems it suffers from is the way that accordions work and how the site flexes posts into shape. Unlike my other posts, I had to basically predict what size the post is gonna be and run off of those calculations. I most certainly want to return to it and clean it up, make it more accurate and efficient. If you want to use the code and/or alter it, feel free to ask me for help. I am entire unmotivated to go through it and make it Variable changeable at the moment. Once more, thank you to the other contestants and judges of the Challenge, I don't think it'd be possible for me to come up with this had I not join the competition.

Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 1[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
[div=--background-color: rgba(255,255,255, 0.8); --border-style: 3px solid #a53317; --text-color: gray; position:relative; background-image: url('https://www.rpnation.com/media/pixiv-fantasia-t-full-1862632-copy.30688/full'); background-repeat:no-repeat; background-size: contain; background-color:black; width:100%; padding-bottom: calc(755/1800 * 100%);][div=position:absolute; top:0; bottom:0; left:0; right:0;visibility:hidden;][div=text-align:right; color:white; visibility:visible; padding:3px; background:linear-gradient(to right,transparent 80%,black)]The Amber Bar
Night 1
[/div][div=position:absolute;top:40%; width:100%; margin-top:-1em;]
accordion_text_slide1
[div=position: relative; padding-bottom: calc(755/1800 * 60% - 3em); width:calc(100%)][div=visibility:visible; position:absolute; top:0; bottom:0; left:0; right:0; background-color:var(--background-color); border: var(--border-style); padding:3px; overflow-y:auto; color:var(--text-color);]You decide to take up Evera's offer and follow her to a bar. From the outside, it looks like nothing special, just a black door at the bottom of a staircase squeezed between two larger and more lively storefronts. The door itself is heavy, carrying no markers except a small placard that saidThe Amber Bar

As you follow Evera, you here the words of the bartender.

"Welcome back, Evera. How was your patrol today?"
"Same as usual, Streya. Ran into someone interesting tho."

The bartender called Streya turned her eyes to you. She had her hair up in two tails on either side of her head, glimering in a luxurious blonde color from the small lights glowing up the oak wood bar. Her eyes looks like they can pierce through you. Averting your attention out of nervousness, you instead begin to look around the bar. A pile of cash sits on the countertop, which isn't that unusual considering that this might be their hideout. The back shelf is lined with all sorts of alcoholic liquids. The small coffee tables nearby carry more cash with a piece of paper bearing their emblem and motto on it.

"If you continue to look at him like that, you'll scare away Evera's new boyfriend."
"Boyfriend?!"
"Boyfriend?!"

Both you and Evera look at the source of the voice, a red haired waitress carrying a whiskey bottle.

"Ara? He's not taken yet? Then don't mind if I do!"

Before you had time to respond, the red haired girl continued on.

"I'm Rachel, the waitress and handywoman of our fair little rebellion."
"... It isn't a rebellion..."

You turn your attention back to the bar. At the end of it, just barely at the edge of the light is a black haired beauty with red eyes. Her face is emotionless as she barely glances your way. As you continue to stare at her, she opens her mouth ever so slightly.

"... Belle..."
"How odd... Our lady of darkness and mastermind behind our uprising has spoken her name!"
"... Arcadia... That's all I want..."
"And a correction to boot! Aren't you the lucky man!"

Streya flashes you a grin at this development. You can only sigh and smile back in return. So this was the person causing all these disturbances lately, Belle...

"What is Arcadia?"

As you asked this, Evera sighed before taking a seat at the counter. Without turning around, she said,

"You're gonna wanna take a seat for this"
"It's gonna be one of those nights, huh. I better break out the glasses. You okay with a Hemmingway Daiquiri?"
"I'll pull up a chair for you, so you better listen closely to our organization's dreams!"
"... Have you heard of the tale The Exile from Arcadia?"

Next Page
[/div][/div]
[/div][/div][/div]
 

Alteras

The Sleepy One
Moderator
Supporter
Novel Conversations
The goal of this piece was to recreate a Visual Novel look. It uses an accordion to hide and unhide the text. It is very simple in many regards. The only things that needs to be added are the Background color values, border style values, text of color, and the background image url. You still need to put in the width and height of the image though.

Code:
[div=--background-color: Background Color (must include opacity value); --border-style: Border style (width style color); --text-color: Color of the Text; background-image: url('Image URL'); --image-width: Width of the Image; --image-height: Height of the Image; --ratio: calc(var(--image-height) / var(--image-width)); position:relative; background-repeat:no-repeat; background-size: contain; background-color:black; width:100%; padding-bottom: calc(var(--ratio) * 100%);][comment]Designed by Alteras[/comment][div=position:absolute; top:0; bottom:0; left:0; right:0;visibility:hidden;][div=text-align:right; color:white; visibility:visible; padding:3px; background:linear-gradient(to right,transparent 80%,black)][FONT=Bellefair]Title Card[/FONT][/div][div=position:absolute;top:40%; width:100%; margin-top:-1em;][accordion=100%]{Slide=[div=visibility:visible; color:white;][fa]fa-comments fa-lg[/fa][/div]|open}[div=position: relative; padding-bottom: calc(var(--ratio) * 60% - 3em); width:calc(100%)][div=visibility:visible; position:absolute; top:0; bottom:0; left:0; right:0; background-color:var(--background-color); border: var(--border-style); padding:3px; overflow-y:auto; color:var(--text-color);]

Content


[/div][/div]{/slide}[/accordion][/div][/div][/div]
[/spoiler
 

Alteras

The Sleepy One
Moderator
Supporter
[div=--texture-1:url("https://www.transparenttextures.com/patterns/60-lines.png"); --texture-2:url("https://www.transparenttextures.com/patterns/cloth-alike.png"); --bg-color-1:white; --bg-color-2: rgb(238,127,169); --side-bg: white; --side-outline:rgb(233,83,82); --side-text: black; --side-texture: var(--texture-2); --side-texture-outline: var(--texture-1); --content-bg: white; --content-bg-outline:rgb(233,83,82); --content-texture: var(--texture-2); --content-texture-outline: var(--texture-1); --text-color:black; --image-width: 1000; --image-height: 1779; --num-tabs: calc(5 * 2 + 1); --anchor-height:-150px;][div= --content-height: calc(var(--image-height)/var(--image-width) * (375px - 10px)); background:linear-gradient(135deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px), linear-gradient(225deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px)0 64px, url("https://www.transparenttextures.com/patterns/cloth-alike.png"); background-color:var(--bg-color-1); background-size: 64px 128px; width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]





[div= width: 425px; height: 100%; left:25px; top:0; position: absolute; box-shadow: -3px 0px 5px rgba(0,0,0,0.8), 1px 0px 2px rgba(0,0,0,0.8); background-color: var(--side-outline); background-image: var(--side-texture-outline); z-index:2;][div= width: 375px; height: 100%; left: calc(50% - 375px / 2); position: relative; box-shadow: -3px 0px 5px rgba(0,0,0,0.8); background-color: var(--side-bg); background-image: var(--side-texture); display: flex; flex-flow: column nowrap; font-size:0]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; position:relative]
[div=position: absolute; bottom:0; left: 50%; transform: translateX(-50%); white-space:nowrap; line-height:1.1]Shrine Maiden
[div= font-size:65px; ]Himiko Kiyoko[/div]
[/div]
[/div]

[div= width: calc(375px - 10px); height: var(--content-height); flex:none; padding: 5px; pointer-events:none; font-size: 0]
[/div]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none][div=display: grid; width: calc(100% - 10px); margin: 0 auto; grid-template-columns: 180px 180px; grid-gap: 5px 5px; grid-auto-flow: row; justify-items: stretch; white-space:nowrap][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Basic Info[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Personal[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Equipment[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Abilities[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Additional Info[/div]
[/div]

[/div][/div][/div]





[div= position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: calc( var(--content-height) + 50px); background-color: var(--content-bg-outline); background-image: var(--content-texture-outline); box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); overflow:hidden; scroll-behavior: smooth;][div= width: calc(100% * var(--num-tabs)); height: calc(100% - 50px); top:50%; transform: translateY(-50%); position: relative; box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); background-color: var(--content-bg); background-image: var(--content-texture); overflow:hidden; display: flex; flex-flow: row nowrap; padding: 5px 0 5px; justify-content: space-between;]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex: none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 460px - 10px ); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center]Basic Information
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Basic Information
Name:
Himiko Kiyoko

Aliases:
The Shrine Maiden of Yoshinori

Age:
16

Gender:
Female

Race:
Human

Class:
Shrine Maiden

[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center]Personal
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Personal
Sexuality:
Heterosexual

Character Alignment:
Lawful Good

Relatives:
Mother and Father (retired)
Younger brother (somewhere)

Organizations\Affiliations:
Shrine of Yoshinori - A shrine on a fairly small island. Part of the greater religion.

Personality:
A very nice and good girl, Himiko Kiyoko wants to help people and save them. She is well mannered and speaks considerately. She isn’t usually one to fight, but when confronted with an evil being, she’ll do her best to stop them. Cheerful and nice around everyone, she defends her allies with a gaze that shines with determination.

Backstory:
Well, the majority of Himiko’s life is pretty normal, growing up with a family of two loving parents and a younger brother. She spent her time growing up at the shrine and being taught how to do things. Treated well in town, she quickly grew into the townsfolk little shrine maiden, since she was always wearing her uniform. At a fairly young age, she became the assistant to the head priest, aiding in exorcisms. The first few times scared her the most, but she became acquainted with the sight of the possessed and evil spirits. They were not visible to Himiko, but rather she could feel their presence emerge from when they are being exorcised. Each time, she would pour her faith into a warding charm she kept with her. It wasn’t until Himiko was 12 that she could actually see these spirits. At the same time, she had an odd dream but couldn’t remember much of it. When that happened, she prayed at the shrine fervently, hoping to be rid of such things. The following night, she received another dream, one where her god commanded her to exorcise the head priest. When she woke up, she was slightly worried but decided to ignore it and return to her duties.
Of course, when she came to the shrine, the head priest was definitely odd, leaving a very tainted aura around the temple. The other shrine maidens had collapsed in one of the rooms. Terrified, Himiko fled, only to find that the shrine had been sealed. Hiding in a closet, she cried for sometime. After several minutes of silent sobbing, she heard the footsteps across the floor. In a scramble to prepare herself for the worst, she searched through the supplies kept. Finding nothing she could use as a weapon, she despaired. One of the priest’s footsteps, a paintbrush, some ink, and a blank piece of paper fell on to her feet. After some moment’s thought, she quickly grabbed on to the brush and paper, dipped it in ink, and painted the words of her god onto the paper. Upon completion, the words reformed into a different talisman and glowed red. At the same time the door open. In quite the fright, Himiko slapped the talisman onto the priest’s forehead. Stunned momentarily, the priest fell onto his back before screaming out in pain. She could see the evil spirit disperse from his body. As the priest laid there unconscious, Himiko ran to exorcise the other maidens.
After this incident was resolved, the head priest thanked Himiko by handing her the floating scarf. That night, she received another command, to defeat all evil. When she woke up, she knew she couldn’t ignore her god’s words, so she sought the proper training and fighting from the priest. Up until she was 16, she was well trained in combat and exorcism. She never once received another dream, but she still did her job, exorcising and fighting spirits, eventually even fighting actual monsters. On her 16th birthday, she received a command to head out to sea and go prevent a disaster lurking on the horizon. She obediently made her preparations, hugged and kissed her family farewell, and set sail.

[/div][/div][/div][/div]


[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center]Equipment
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Equipment & Belongings
  • Outfit - A fairly standard outfit for a Shrine Maiden, it boasts a simple two tone design. It is tied fairly tightly at the abdomen, but the rest of Himiko’s body is given enough room to move and perform in combat. That fabric is quite comfortable and easy to clean. Her hair band and tie keep her hair respectable and her white flowing scarf flows elegant from under her arms. Don’t know how she does it, but it never touches the ground. She may sometimes use the shawl for combat
  • White Flowing Scarf - A scarf that is wrapped around her arms and floats behind her. If her outfit doesn’t already show her connection to the divine, this does. It is somehow unable to be dirtied, and will never touch the ground. She may sometimes use it as a tool similar to how dancers would use their clothes in combat, tying and untying opponents, except in this case, her opponents are spirits.
  • A Ton of Paper Talismans and Charms - Himiko’s tools, she keeps them hidden in her sleeves. Somehow they don’t bog her down.
Items:
  • Calligraphy Brush and Red Ink - She keeps them hidden underneath. She uses them to create new talismans.
  • A lot of small change - She is a walking charity box.
  • Headband - A more personal belonging, a gift from her mother.

[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center]Abilities
[/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Skills & Abilities
  • Shrine Maiden - She is knowledgeable about the the gods and knows the proper etiquette relevant things. She also garners great respect from the common people, and can use her position to influence and reach more favorable agreements.
  • Trained Exorcist - Basically its her job to drive away the evil spirits. She has quite the amount of stamina, magical capacity, and wisdom to engage in combat against a spirit, as long as it is just keeping her distance and tossing out talismans. In some cases, she will even use her scarf to her advantage.
  • Noble Maiden - As a shrine maiden, she must adhere strictly to her morals. This may sometimes make her seem too heavenly to be approachable. She does want to talk to people though, so she’ll go out of her to do so. This has given her a favorable reputation.
  • Dancer - Not an entertainment dancer, but rather a festival dancer. She knows a variety of ceremonial and festive dances.
  • Sewing - With how often she tears her cloths in combat, she needed to learn one way or another.


Magic & Spells

Talismans - Himiko is able to create and send out talismans. She can only activate one set of talismans (only one talisman spell) at a time, by holding an identical talisman to the ones that she wants to activate on her person and sending energy to it. The talismans can be made to float in the air or stick to things. The effects of the talisman can be canceled by destroying the talisman that Himiko holds. A basic talisman tossed out would just deal basic damage, like getting hit by a stick.
  • Realm of the Divine - Himiko sends out three or more talismans to form a temporary sanctuary. This heals and buffs allies, granting regen, strength buffs, and greater resistance against those with the evil alignment.
  • Gates of the Temple - The talisman form the corners of a barrier that will repel against any attack. It is break able with an intense amount of force or continual and repeated attacks.
  • Holy Rain - Summons a lot of talismans around her and sends them forwards as projectiles, dealing both holy damage and an elemental effect of her choosing (determined as part of her chant). (Think Touhou)
  • Land of Trials - An area/volume defined by the talismans causes gradual damage and debuffs to those inside. There are a number that can be used, but the ones that she is most familiar with are:
    • Mirage Road - acts more as a barrier, turning away those who try to enter without them knowing.
    • Spirits and Elemental Cage - She summons a spirit or elemental of her choosing, which can only take action within the area. Requires a decent amount of concentration.
    • Exorcism - Your basic exorcism. Does damage to the evil.
    • Clouded Balance - Through a series of illusions and hallucinatory objects, those inside will suffer debuffs like nausea, low stamina, loss of will, and maybe even poison. Tough to pull off, as it requires a ton of talismans and a deep focus to the spiritual realm.
Charms - A passive version of a talisman. They embody the power of the gods and provide good luck.
  • Evil Eye Warding Charm - Prevents spirits from manipulating and occupying your mind. Doesn’t really work against anything like a god, especially since it’s a Shrine Maiden’s job to convey the wills of the gods.
  • Safe Travels Charm - It isn’t so much a charm that’ll prevent disaster from happening, but rather one that’ll keep you safe from harm’s way when they do happen. It’s very minor stuff, like landing safely from a great height or not drowning when tossed overboard. But seriously though, don’t go doing crazy stuff.
  • Strength and Physique Charm - Give’s the wearer a sizable boost in strength and physique, making them stuff like stronger and faster.
  • Wisdom and Learning Charm - This charm serves a duo purpose, as good luck in education and increased magical output.

[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center]Additional Info
[/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Additional Information & Fluff

Weaknesses:
Himiko’s role is very much a support role, so she’ll try her best to keep a distance. Her only close range defense are her basic talismans, charms, and her scarf, so she won’t even consider defending against a strike, but will do everything to evade, either through dodging and weaving or by wrapping her scarf around you or your weapon to redirect them. But even with that, she will have a tough time against a trained close range combatant.

Hobbies:
Praying, reading, calligraphy, and a bit of dancing.

Quotes:
“Decease, you evil being!”
“I am in your care, but I shall also care for you.”
“Please do not disrespect the gods…”

Theme:

[/div][/div][/div][/div]

[/div][/div]
[/div][/div]
 

Alteras

The Sleepy One
Moderator
Supporter
Dynastic Silk BROKEN
Edit: This BBcode is currently awaiting an update.


This is the simpler version of two very similar BBCode templates. It is based on goto and anchor tags, instead of accordions, to make it easier to expand. Normally, the goto tag will force it to jump, however, by applying the scroll-behavior:smooth property to it, it will have a nice natural move to it. With this and making the background part of the scrolling effect, it creates the illusion that the entire sheet is moving. Naturally, there are some problems with using this, most notably the need to create a margin to prevent the page from jumping to a position where the text is unreadable. While this margin did work on most browsers, it didn't work on chrome due to the effects of overflow:hidden on its parent containers.

The entire tab system is designed so that it can be copied and pasted, and you only have to change the anchor names and the number at the top of the code. The same goes for the buttons.
To add more sections, you'll copy and paste the following to the end, right before the [comment]End main content[/comment]
Code:
[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=TABNAMEHERE].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]SIDEWAYS TITLE[/COLOR][/FONT]
[border=1px solid COLOR OF DIVIDER HERE; height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
CONTENT HERE
[/div][/div][/div][/div]
You'll need to change the tab name and colored divider. The places to do so are capitalized. At the same time, you'll need to go to the top of the code and find --num-tabs: calc( # * 2 +1). You'll replace the # with the number of tabs you have. This is done to make sure that the tabs have enough space in between them to scroll properly.
Here are the buttons. They are placed right before the comment:
[comment]for some reason, CSS Grids on RPN reads line breaks as a grid item, so it can't be separated...[/comment]
To add more buttons, just copy and paste this to the end, no spaces between the buttons:
Code:
[goto=TAGNAMEHERE][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]TAB NAME HERE[/SIZE][/FONT][/div][/goto]
So if you want 5 buttons, it should look something like this:
Code:
[goto=Tab1][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-street-view fa-fw[/fa]Tab1[/SIZE][/FONT][/div][/goto][goto=Tab2][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-address-book-o fa-fw[/fa]Tab2[/SIZE][/FONT][/div][/goto][goto=Tab3][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-shield fa-fw[/fa]Tab3[/SIZE][/FONT][/div][/goto][goto=Tab4][div=border: 3px solid var(--side-outline);  color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-superpowers fa-fw[/fa]Tab4[/SIZE][/FONT][/div][/goto][goto=Tab5][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]Tab5[/SIZE][/FONT][/div][/goto]
They all have to be one line.
So when ever the button is pressed and it jumps to the tab, you'll see the screen shift. In order to make it so that the top navigation bar of RPN doesn't cover it up, and so that you can give enough space to show the name of the work, you can change the following variable: --anchor-height: -##px. This you can find at the top of the code. It must be a negative number. The one you see in this example is set to -175px. You can change it however you like.
Other things of interest is the fact that the background is made entirely out of CSS. The colors are changeable at the top of the code. There are also transparent textures being use to give the colors a more fabric feel to it. As per usual, all the color variables are changeable from the top of the code. However it is important that you put in the image width and height! They should be unitless. They will determine how big and how tall the content and tabs should be. You can find them at the top of the code.

One final note, if you want to change the background design, you can find it here:
Code:
[div= --content-height: calc(var(--image-height)/var(--image-width) * (375px - 10px)); background:linear-gradient(135deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px), linear-gradient(225deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px)0 64px, url("https://www.transparenttextures.com/patterns/cloth-alike.png"); background-color:var(--bg-color-1); background-size: 64px 128px; width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]
The actual pattern starts at the property background:.

Here is a blank template code with 5 tabs:
Code:
[div=--texture-1:url("https://www.transparenttextures.com/patterns/60-lines.png"); --texture-2:url("https://www.transparenttextures.com/patterns/cloth-alike.png"); --bg-color-1:white; --bg-color-2: rgb(238,127,169); --side-bg: white; --side-outline:rgb(233,83,82); --side-text: black; --side-texture: var(--texture-2); --side-texture-outline: var(--texture-1); --content-bg: white; --content-bg-outline:rgb(233,83,82); --content-texture: var(--texture-2); --content-texture-outline: var(--texture-1); --text-color:black; --image-width: 1000; --image-height: 1779; --num-tabs: calc(5 * 2 + 1); —anchor-height:-150px][comment]

Alter values in this div ^. Also the number of tabs should be multiplied by 2  add 1 to allow for both a clean setup and ability to move from one tab to the previous tab right before it.

Start of background

[/comment][div= --content-height: calc(var(--image-height)/var(--image-width) * (375px - 10px)); background:linear-gradient(135deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px), linear-gradient(225deg, transparent 22px, var(--bg-color-2) 22px, var(--bg-color-2) 24px, transparent 24px, transparent 67px, var(--bg-color-2) 67px, var(--bg-color-2) 69px, transparent 69px)0 64px, url("https://www.transparenttextures.com/patterns/cloth-alike.png"); background-color:var(--bg-color-1); background-size: 64px 128px; width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]

[comment]End of Background[/comment]

[comment]Start of Side Photo and buttons and stuff[/comment]

[div= width: 425px; height: 100%; left:25px; top:0; position: absolute; box-shadow: -3px 0px 5px rgba(0,0,0,0.8), 1px 0px 2px rgba(0,0,0,0.8); background-color: var(--side-outline); background-image: var(--side-texture-outline); z-index:2;][div= width: 375px; height: 100%; left: calc(50% - 375px / 2); position: relative; box-shadow: -3px 0px 5px rgba(0,0,0,0.8); background-color: var(--side-bg); background-image: var(--side-texture); display: flex; flex-flow: column nowrap; font-size:0]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; position:relative]
[div=position: absolute; bottom:0; left: 50%; transform: translateX(-50%); white-space:nowrap; line-height:1.1][COLOR=black][FONT=Arizonia][SIZE=7][U]Subtitle if you want[/U][/SIZE]
[div= font-size:65px; ]Name[/div][/FONT][/COLOR][/div]
[/div]

[div= width: calc(375px - 10px); height: var(--content-height); flex:none; padding: 5px; pointer-events:none; font-size: 0][IMG]https://www.rpnation.com/media/54294229_p0.31550/full[/IMG][/div]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none][div=display: grid; width: calc(100% - 10px); margin: 0 auto; grid-template-columns: 180px 180px; grid-gap: 5px 5px; grid-auto-flow: row; justify-items: stretch; white-space:nowrap][goto=Silktab1][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-street-view fa-fw[/fa]Basic Info[/SIZE][/FONT][/div][/goto][goto=Silktab2][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-address-book-o fa-fw[/fa]Personal[/SIZE][/FONT][/div][/goto][goto=Silktab3][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-shield fa-fw[/fa]Equipment[/SIZE][/FONT][/div][/goto][goto=Silktab4][div=border: 3px solid var(--side-outline);  color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-superpowers fa-fw[/fa]Abilities[/SIZE][/FONT][/div][/goto][goto=Silktab5][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]Additional Info[/SIZE][/FONT][/div][/goto]
[comment]for some reason, CSS Grids on RPN reads line breaks as a grid item, so it can't be separated

to add more buttons; just copy and paste this to the end, no space:
[goto=TAGNAMEHERE][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]TAB NAME HERE[/SIZE][/FONT][/div][/goto]

[/comment]
[/div]

[/div][/div][/div]

[comment]End of side photos and buttons and stuff[/comment]

[comment]start of main content section[/comment]

[div= position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: calc( var(--content-height) + 50px); background-color: var(--content-bg-outline); background-image: var(--content-texture-outline); box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); overflow:hidden; scroll-behavior: smooth;][div= width: calc(100% * var(--num-tabs)); height: calc(100% - 50px); top:50%; transform: translateY(-50%); position: relative; box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); background-color: var(--content-bg); background-image: var(--content-texture); overflow:hidden; display: flex; flex-flow: row nowrap; padding: 5px 0 5px; justify-content: space-between;]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex: none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=Silktab1].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px ); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]Basic Information[/COLOR][/FONT]
[border=1px solid rgb(238,127,169); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test1
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=Silktab2].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]Personal[/COLOR][/FONT]
[border=1px solid rgb(238,127,169); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test2
[/div][/div][/div][/div]


[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=Silktab3].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]Equipment[/COLOR][/FONT]
[border=1px solid rgb(238,127,169); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test3
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=Silktab4].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]Abilities[/COLOR][/FONT]
[border=1px solid rgb(238,127,169); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%][COLOR=black]
Test4
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=Silktab5].................[/a][/div][div= height: 100%; width: calc(100% - 460px - 10px); margin-left: 460px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:1; white-space:nowrap; overflow:hidden; text-align:center][FONT=Arizonia][COLOR=black]Additional Info[/COLOR][/FONT]
[border=1px solid rgb(238,127,169); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test5
[/div][/div][/div][/div]
[comment]End main content[/comment]
[/div][/div]
[/div][/div]
Everything has been commented, but seeing how large it is, feel free to ask me for help if you want to change somethings.
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
[div=--texture-1:url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png"); --texture-2:url("https://www.transparenttextures.com/patterns/whitey.png"); --rope-outline-color:rgb(162,119,86); --rope-bg:rgb(230,190,150); --rope-texture: var(--texture-1); --ribbon-color-1: rgb(256,256,256); --ribbon-color-2:rgb(155,0,1); --ribbon-color-3:rgb(45,80,102); --ribbon-texture-1: var(--texture-2); --ribbon-texture-2: var(--texture-1); --ribbon-texture-3: var(--texture-1); --side-bg:rgb(45,80,102); --side-outline:rgb(226,226,225); --side-texture: var(--texture-1); --content-bg: white; --content-bg-outline:rgb(29,47,70); --content-texture: var(--texture-2); --content-texture-outline: var(--texture-1); --text-color:black; --side-text:rgb(226,226,226); --image-width: 600; --image-height: 848; --num-tabs: calc(5 * 2 + 1); --anchor-height-adjustment: -250px][div=--content-height: calc(var(--image-height)/var(--image-width) * (400px - 10px));background:radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; background-color: #330000; background-size: 100px 100px;width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]

[div= width: 150px; height: 100%; left:25px; top:0; position: absolute; box-shadow: -3px 0px 5px rgb(0,0,0,0.8), 1px 0px 2px rgb(0,0,0,0.8); background-color: var(--ribbon-color-3); background-image: var(--ribbon-texture-3); z-index:3][div= width: 100px; height: 100%; left:25px; top:0; position: relative; box-shadow: -3px 0px 5px rgb(0,0,0,0.8); background-color: var(--ribbon-color-1); background-image: var(--ribbon-texture-1);][div= width: 50px; height: 100%; left: calc(50% - 50px / 2); position: relative; box-shadow: -3px 0px 5px rgb(0,0,0,0.8); background-color: var(--ribbon-color-2); background-image: var(--ribbon-texture-2);][div=width: 24px; height: 100%; left:calc(50% - 12px); position:relative; box-shadow: -5px 0px 5px rgb(0,0,0,0.8), 2px 0px 5px rgb(0,0,0,0.5), inset 5px 0px 5px rgb(0,0,0,0.8), inset -5px 0px 5px rgb(255,255,255,0.3); border: 0px solid var(--rope-outline-color); background: var(--rope-bg); margin-bottom: 15px; background-image: linear-gradient(90deg, var(--rope-outline-color) 1px, transparent 2px, transparent 22px, var(--rope-outline-color) 23px), radial-gradient(circle at 0 12px, transparent 11px, var(--rope-outline-color) 11px, var(--rope-outline-color) 12px, transparent 12px), radial-gradient(circle at 12px 0, transparent 11px, var(--rope-outline-color) 11px, var(--rope-outline-color) 12px, transparent 12px), var(--rope-texture); background-position: 0 0, 12px 0px, 0 0, 0 0; background-size: 24px auto, 12px 12px, 12px 12px, auto auto; background-repeat: repeat-y][/div][/div][/div][/div]

[div= width: calc(400px - 10px); height: 100%; right: 25px; top: 0; background-color: var(--side-bg); background-image:var(--side-texture); position: absolute; border-left: 5px solid var(--side-outline); border-right: 5px solid var(--side-outline); box-shadow: -3px 0px 5px rgb(0,0,0,0.8), 1px 0px 2px rgb(0,0,0,0.8); display: flex; flex-flow: column nowrap; z-index:4]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; position:relative]
[div=position: absolute; bottom:0; left: 50%; transform: translateX(-50%); white-space:nowrap; line-height:.9; color:var(--side-text)]Lady
[div= font-size:75px; ]Evaline
Theresia Averill[/div]
[/div][/div]

[div= width: auto; height: var(--content-height); background-color: var(--side-outline); padding-top: 5px; padding-bottom: 5px; pointer-events:none; font-size: 0; flex:none]
[/div]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; padding-top: 5px;][div= display: grid; width: calc(100% - 10px); margin: 0 auto; grid-template-columns: 1fr 1fr; grid-gap: 5px 5px; grid-auto-flow: row; justify-items: stretch; white-space:nowrap][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Basic Info[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Personal[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Equipment[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Abilities[/div][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;]Additional Info[/div]
[/div]

[/div][/div]




[div= position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: calc( var(--content-height) + 50px); background-color: var(--content-bg-outline); background-image: var(--content-texture-outline); box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); overflow:hidden; scroll-behavior: smooth;][div= width: calc(100% * var(--num-tabs)); height: calc(100% - 50px); top:50%; transform: translateY(-50%); position: relative; box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); background-color: var(--content-bg); background-image: var(--content-texture); overflow:hidden; display: flex; flex-flow: row nowrap; padding: 5px 0 5px; justify-content: space-between;]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex: none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center]Basic Information
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Name:
Evaline Theresia Averill

Title:
Lady of the Castle of Havenworth

Age:
29

Gender
Female

[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center]Personal
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]I'll be honest, I ran out of steam from all the midterms I've been taking, but I still wanted to release this piece.

I had imagined a very nice CS sheet and info to accompany this template, but alas, the most you're gonna get is a name, a castle, and a lot of Lorem Ipsum.

I've very sorry!

[/div][/div][/div][/div]


[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center]Equipment
[/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a aliquet odio. Aenean luctus tellus eu rhoncus volutpat. Suspendisse fringilla vel elit sit amet tincidunt. Ut gravida, sem id pulvinar suscipit, sem nisi laoreet nisl, quis laoreet dui lacus a libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi molestie nulla bibendum lorem aliquet consequat. Nullam dignissim, massa vel cursus gravida, dui erat imperdiet mauris, vitae tincidunt ante turpis sed sapien. Ut efficitur, metus vel venenatis rhoncus, diam elit elementum nibh, ut tristique sapien lectus a enim. Sed sit amet molestie est. Curabitur nibh quam, rutrum in ultricies ut, mollis vel enim. Aenean fermentum viverra massa vitae consectetur. Morbi mi eros, efficitur sit amet mi bibendum, maximus iaculis augue. Integer eu suscipit massa, id elementum eros. Aenean ornare turpis non imperdiet scelerisque. Duis finibus pellentesque augue quis feugiat.

Nulla justo sapien, gravida at congue vel, iaculis ac quam. Maecenas finibus rutrum varius. Sed scelerisque mauris ut dui tincidunt hendrerit. Donec ultrices vehicula accumsan. Nunc venenatis gravida nibh, a consequat tortor molestie eu. Phasellus facilisis vitae justo vitae interdum. Donec ac odio arcu. Suspendisse molestie, arcu ac tincidunt efficitur, sapien diam sodales lorem, sed vestibulum nibh arcu in metus. Donec sed consectetur augue.

In iaculis elit eros, ut tristique massa bibendum vitae. Vivamus lacinia urna vel sem fermentum, in imperdiet leo euismod. Etiam molestie ullamcorper purus eget fermentum. Nullam ac porta dui. Fusce semper est risus, vel tristique felis consectetur a. Nulla vel diam porta, eleifend sapien sed, sagittis neque. Morbi aliquet lectus vitae lobortis mollis. Cras ultrices dui non blandit consectetur.

Morbi vitae neque ac leo faucibus malesuada bibendum in est. Proin nec metus a massa molestie ullamcorper. Suspendisse viverra egestas ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fermentum finibus enim tincidunt blandit. Donec in ipsum sit amet est cursus consequat. Vestibulum eu ipsum tortor. Nam placerat nulla ipsum, ut tincidunt ipsum commodo nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum euismod massa, nec ultrices urna auctor vitae. Cras rutrum condimentum lectus, in fermentum lectus tincidunt dapibus.

Nulla condimentum dignissim imperdiet. Donec eget elit vulputate, facilisis turpis in, ultricies tortor. Quisque quis pharetra velit. Phasellus mollis at neque ut ullamcorper. Donec massa metus, posuere sagittis dui ut, tristique elementum quam. Sed nunc leo, condimentum accumsan velit ac, luctus dictum nunc. Donec a ex id tortor viverra dignissim. Aliquam erat volutpat. Quisque accumsan pretium turpis, egestas semper augue.
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center]Abilities
[/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a aliquet odio. Aenean luctus tellus eu rhoncus volutpat. Suspendisse fringilla vel elit sit amet tincidunt. Ut gravida, sem id pulvinar suscipit, sem nisi laoreet nisl, quis laoreet dui lacus a libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi molestie nulla bibendum lorem aliquet consequat. Nullam dignissim, massa vel cursus gravida, dui erat imperdiet mauris, vitae tincidunt ante turpis sed sapien. Ut efficitur, metus vel venenatis rhoncus, diam elit elementum nibh, ut tristique sapien lectus a enim. Sed sit amet molestie est. Curabitur nibh quam, rutrum in ultricies ut, mollis vel enim. Aenean fermentum viverra massa vitae consectetur. Morbi mi eros, efficitur sit amet mi bibendum, maximus iaculis augue. Integer eu suscipit massa, id elementum eros. Aenean ornare turpis non imperdiet scelerisque. Duis finibus pellentesque augue quis feugiat.

Nulla justo sapien, gravida at congue vel, iaculis ac quam. Maecenas finibus rutrum varius. Sed scelerisque mauris ut dui tincidunt hendrerit. Donec ultrices vehicula accumsan. Nunc venenatis gravida nibh, a consequat tortor molestie eu. Phasellus facilisis vitae justo vitae interdum. Donec ac odio arcu. Suspendisse molestie, arcu ac tincidunt efficitur, sapien diam sodales lorem, sed vestibulum nibh arcu in metus. Donec sed consectetur augue.

In iaculis elit eros, ut tristique massa bibendum vitae. Vivamus lacinia urna vel sem fermentum, in imperdiet leo euismod. Etiam molestie ullamcorper purus eget fermentum. Nullam ac porta dui. Fusce semper est risus, vel tristique felis consectetur a. Nulla vel diam porta, eleifend sapien sed, sagittis neque. Morbi aliquet lectus vitae lobortis mollis. Cras ultrices dui non blandit consectetur.

Morbi vitae neque ac leo faucibus malesuada bibendum in est. Proin nec metus a massa molestie ullamcorper. Suspendisse viverra egestas ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fermentum finibus enim tincidunt blandit. Donec in ipsum sit amet est cursus consequat. Vestibulum eu ipsum tortor. Nam placerat nulla ipsum, ut tincidunt ipsum commodo nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum euismod massa, nec ultrices urna auctor vitae. Cras rutrum condimentum lectus, in fermentum lectus tincidunt dapibus.

Nulla condimentum dignissim imperdiet. Donec eget elit vulputate, facilisis turpis in, ultricies tortor. Quisque quis pharetra velit. Phasellus mollis at neque ut ullamcorper. Donec massa metus, posuere sagittis dui ut, tristique elementum quam. Sed nunc leo, condimentum accumsan velit ac, luctus dictum nunc. Donec a ex id tortor viverra dignissim. Aliquam erat volutpat. Quisque accumsan pretium turpis, egestas semper augue.

[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1].................[/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center]Additional Info
[/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a aliquet odio. Aenean luctus tellus eu rhoncus volutpat. Suspendisse fringilla vel elit sit amet tincidunt. Ut gravida, sem id pulvinar suscipit, sem nisi laoreet nisl, quis laoreet dui lacus a libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi molestie nulla bibendum lorem aliquet consequat. Nullam dignissim, massa vel cursus gravida, dui erat imperdiet mauris, vitae tincidunt ante turpis sed sapien. Ut efficitur, metus vel venenatis rhoncus, diam elit elementum nibh, ut tristique sapien lectus a enim. Sed sit amet molestie est. Curabitur nibh quam, rutrum in ultricies ut, mollis vel enim. Aenean fermentum viverra massa vitae consectetur. Morbi mi eros, efficitur sit amet mi bibendum, maximus iaculis augue. Integer eu suscipit massa, id elementum eros. Aenean ornare turpis non imperdiet scelerisque. Duis finibus pellentesque augue quis feugiat.

Nulla justo sapien, gravida at congue vel, iaculis ac quam. Maecenas finibus rutrum varius. Sed scelerisque mauris ut dui tincidunt hendrerit. Donec ultrices vehicula accumsan. Nunc venenatis gravida nibh, a consequat tortor molestie eu. Phasellus facilisis vitae justo vitae interdum. Donec ac odio arcu. Suspendisse molestie, arcu ac tincidunt efficitur, sapien diam sodales lorem, sed vestibulum nibh arcu in metus. Donec sed consectetur augue.

In iaculis elit eros, ut tristique massa bibendum vitae. Vivamus lacinia urna vel sem fermentum, in imperdiet leo euismod. Etiam molestie ullamcorper purus eget fermentum. Nullam ac porta dui. Fusce semper est risus, vel tristique felis consectetur a. Nulla vel diam porta, eleifend sapien sed, sagittis neque. Morbi aliquet lectus vitae lobortis mollis. Cras ultrices dui non blandit consectetur.

Morbi vitae neque ac leo faucibus malesuada bibendum in est. Proin nec metus a massa molestie ullamcorper. Suspendisse viverra egestas ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fermentum finibus enim tincidunt blandit. Donec in ipsum sit amet est cursus consequat. Vestibulum eu ipsum tortor. Nam placerat nulla ipsum, ut tincidunt ipsum commodo nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum euismod massa, nec ultrices urna auctor vitae. Cras rutrum condimentum lectus, in fermentum lectus tincidunt dapibus.

Nulla condimentum dignissim imperdiet. Donec eget elit vulputate, facilisis turpis in, ultricies tortor. Quisque quis pharetra velit. Phasellus mollis at neque ut ullamcorper. Donec massa metus, posuere sagittis dui ut, tristique elementum quam. Sed nunc leo, condimentum accumsan velit ac, luctus dictum nunc. Donec a ex id tortor viverra dignissim. Aliquam erat volutpat. Quisque accumsan pretium turpis, egestas semper augue.

[/div][/div][/div][/div]

[/div][/div]
[/div][/div]
 

Alteras

The Sleepy One
Moderator
Supporter
Imperial Satin BROKEN
Edit: This BBcode is currently awaiting an update.


This is the slightly more ornate version of two very similar BBCode templates. Everything that I wanted to say about this one has been said in the previous one. Personally, I like Dynastic Silk better, but since I made this, I'll go ahead and release it. Most of what I will say about the technicalities will be the same as the previous one.

The entire tab system is designed so that it can be copied and pasted, and you only have to change the anchor names and the number at the top of the code. The same goes for the buttons.
To add more sections, you'll copy and paste the following to the end, right before the [comment]End main content[/comment]
Code:
[div= width: calc(100% / var(--num-tabs)); height: 100%; flex: none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=TABNAMEHERE].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]SIDEWAYS TITLE[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
CONTENT HERE
[/div][/div][/div][/div]
You'll need to change the tab name and colored divider. The places to do so are capitalized. At the same time, you'll need to go to the top of the code and find --num-tabs: calc( # * 2 +1). You'll replace the # with the number of tabs you have. This is done to make sure that the tabs have enough space in between them to scroll properly.
Here are the buttons. They are placed right before the comment:
[comment]for some reason, CSS Grids on RPN reads line breaks as a grid item, so it can't be separated...[/comment]
To add more buttons, just copy and paste this to the end, no spaces between the buttons:
Code:
[goto=TAGNAMEHERE][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]TAB NAME HERE[/SIZE][/FONT][/div][/goto]
So if you want 5 buttons, it should look something like this:
Code:
[goto=Tab1][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-street-view fa-fw[/fa]Tab1[/SIZE][/FONT][/div][/goto][goto=Tab2][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-address-book-o fa-fw[/fa]Tab2[/SIZE][/FONT][/div][/goto][goto=Tab3][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-shield fa-fw[/fa]Tab3[/SIZE][/FONT][/div][/goto][goto=Tab4][div=border: 3px solid var(--side-outline);  color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-superpowers fa-fw[/fa]Tab4[/SIZE][/FONT][/div][/goto][goto=Tab5][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]Tab5[/SIZE][/FONT][/div][/goto]
They all have to be one line.
So when ever the button is pressed and it jumps to the tab, you'll see the screen shift. In order to make it so that the top navigation bar of RPN doesn't cover it up, and so that you can give enough space to show the name of the work, you can change the following variable: --anchor-height: -##px. This you can find at the top of the code. It must be a negative number. The one you see in this example is set to -250px. You can change it however you like.
Other things of interest is the fact that the background is made entirely out of CSS. The colors are not changeable and will require some actual coding to get it to change, mostly because the pattern is made to match the cord, so I don't see much reason to change the color. I can show how to change the colors if need be. There are also transparent textures being use to give the colors a more fabric feel to it. As per usual, all the color variables are changeable from the top of the code. However it is important that you put in the image width and height! They should be unitless. They will determine how big and how tall the content and tabs should be. You can find them at the top of the code.

One final note, if you want to change the background design, you can find it here:
Code:
[div=--content-height: calc(var(--image-height)/var(--image-width) * (400px - 10px));background:radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; background-color: #330000; background-size: 100px 100px;width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]
The actual pattern starts at the property background:.

Here is a blank template code with 5 tabs:
Code:
[div=--texture-1:url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png"); --texture-2:url("https://www.transparenttextures.com/patterns/whitey.png"); --rope-outline-color:rgb(162,119,86); --rope-bg:rgb(230,190,150); --rope-texture: var(--texture-1); --ribbon-color-1: rgb(256,256,256); --ribbon-color-2:rgb(155,0,1); --ribbon-color-3:rgb(45,80,102);  --ribbon-texture-1: var(--texture-2); --ribbon-texture-2: var(--texture-1); --ribbon-texture-3: var(--texture-1); --side-bg:rgb(45,80,102); --side-outline:rgb(226,226,225); --side-texture: var(--texture-1); --content-bg: white; --content-bg-outline:rgb(29,47,70); --content-texture: var(--texture-2); --content-texture-outline: var(--texture-1); --text-color:black; --side-text:rgb(226,226,226); --image-width: 600; --image-height: 848; --num-tabs: calc(5 * 2 + 1); --anchor-height-adjustment: -250px][comment]

Alter values in this div ^. Also the number of tabs should be multiplied by 2  add 1 to allow for both a clean setup and ability to move from one tab to the previous tab right before it.

Start of background

[/comment][div=--content-height: calc(var(--image-height)/var(--image-width) * (400px - 10px));background:radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; background-color: #330000; background-size: 100px 100px;width:100%; min-height: 1000px; height: 110vh; position: relative; overflow:hidden]
[comment]

End of background

start of ribbon
[/comment]
[div= width: 150px; height: 100%; left:25px; top:0; position: absolute; box-shadow: -3px 0px 5px rgb(0,0,0,0.8), 1px 0px 2px rgb(0,0,0,0.8); background-color: var(--ribbon-color-3); background-image: var(--ribbon-texture-3); z-index:3][div= width: 100px; height: 100%; left:25px; top:0; position: relative; box-shadow: -3px 0px 5px rgb(0,0,0,0.8); background-color: var(--ribbon-color-1); background-image: var(--ribbon-texture-1);][div= width: 50px; height: 100%; left: calc(50% - 50px / 2); position: relative; box-shadow: -3px 0px 5px rgb(0,0,0,0.8); background-color: var(--ribbon-color-2); background-image: var(--ribbon-texture-2);][div=width: 24px; height: 100%; left:calc(50% - 12px); position:relative; box-shadow: -5px 0px 5px rgb(0,0,0,0.8), 2px 0px 5px rgb(0,0,0,0.5), inset 5px 0px 5px rgb(0,0,0,0.8), inset -5px 0px 5px rgb(255,255,255,0.3); border: 0px solid var(--rope-outline-color); background: var(--rope-bg); margin-bottom: 15px; background-image: linear-gradient(90deg, var(--rope-outline-color) 1px, transparent 2px, transparent 22px, var(--rope-outline-color) 23px), radial-gradient(circle at 0 12px, transparent 11px, var(--rope-outline-color) 11px, var(--rope-outline-color) 12px, transparent 12px), radial-gradient(circle at 12px 0, transparent 11px, var(--rope-outline-color) 11px, var(--rope-outline-color) 12px, transparent 12px), var(--rope-texture); background-position: 0 0, 12px 0px, 0 0, 0 0; background-size: 24px auto, 12px 12px, 12px 12px, auto auto; background-repeat: repeat-y][/div][/div][/div][/div]
[comment]

End of ribbon

start of side

[/comment]
[div= width: calc(400px - 10px); height: 100%; right: 25px; top: 0; background-color: var(--side-bg); background-image:var(--side-texture); position: absolute; border-left: 5px solid var(--side-outline); border-right: 5px solid var(--side-outline); box-shadow: -3px 0px 5px rgb(0,0,0,0.8), 1px 0px 2px rgb(0,0,0,0.8); display: flex; flex-flow: column nowrap; z-index:4]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; position:relative]
[div=position: absolute; bottom:0; left: 50%; transform: translateX(-50%); white-space:nowrap; line-height:.9; color:var(--side-text)][FONT=Italianno][SIZE=7][U]Lady[/U][/SIZE]
[div= font-size:75px; ]Evaline
Theresia Averill[/div][/FONT][/div][/div]

[div= width: auto; height: var(--content-height); background-color: var(--side-outline); padding-top: 5px; padding-bottom: 5px; pointer-events:none; font-size: 0; flex:none][IMG]https://www.rpnation.com/media/64163608_p6.31441/full[/IMG][/div]

[div= width: 100%; height: calc((100% - var(--content-height) - 10px)/2); flex:none; padding-top: 5px;][div= display: grid; width: calc(100% - 10px); margin: 0 auto; grid-template-columns: 1fr 1fr; grid-gap: 5px 5px; grid-auto-flow: row; justify-items: stretch; white-space:nowrap][goto=ImpTab1][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-street-view fa-fw[/fa]Basic Info[/SIZE][/FONT][/div][/goto][goto=ImpTab2][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-address-book-o fa-fw[/fa]Personal[/SIZE][/FONT][/div][/goto][goto=ImpTab3][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-shield fa-fw[/fa]Equipment[/SIZE][/FONT][/div][/goto][goto=ImpTab4][div=border: 3px solid var(--side-outline);  color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-superpowers fa-fw[/fa]Abilities[/SIZE][/FONT][/div][/goto][goto=ImpTab5][div=border: 3px solid var(--side-outline); color: var(--side-text); padding: 3px;][FONT=Niconne][SIZE=6][fa]fa-user-plus fa-fw[/fa]Additional Info[/SIZE][/FONT][/div][/goto]
[/div]

[/div][/div]
[comment]End of side photos and buttons and stuff[/comment]

[comment]start of main content section[/comment]

[div= position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: calc( var(--content-height) + 50px); background-color: var(--content-bg-outline); background-image: var(--content-texture-outline); box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); overflow:hidden; scroll-behavior: smooth;][div= width: calc(100% * var(--num-tabs)); height: calc(100% - 50px); top:50%; transform: translateY(-50%); position: relative; box-shadow: 0px 1px 2px rgba(0,0,0,0.8), 0px -1px 2px rgba(0,0,0,0.8); background-color: var(--content-bg); background-image: var(--content-texture); overflow:hidden; display: flex; flex-flow: row nowrap; padding: 5px 0 5px; justify-content: space-between;]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex: none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=ImpTab1].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]Basic Information[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test1
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=ImpTab2].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]Personal[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test2
[/div][/div][/div][/div]


[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=ImpTab3].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]Equipment[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%; margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test3
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=ImpTab4].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]Abilities[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]Test 4
[/div][/div][/div][/div]

[div= width: calc(100% / var(--num-tabs)); height: 100%; flex:none; position:relative][div= top: var(--anchor-height-adjustment); width: 100%; visibility: hidden; position:absolute; font-size:400px; overflow:scroll; white-space:nowrap; line-height:1][a=ImpTab5].................[/a][/div][div= height: 100%; width: calc(100% - 185px - 5px - 400px - 10px); margin-left: 180px; flex: none; overflow:hidden][div= height:75px; width:var(--content-height); transform: rotate(270deg) translateX(calc(-1 * var(--content-height))); transform-origin: 0 0; position:absolute; font-size:65px; line-height:.9; white-space:nowrap; overflow:hidden; text-align:center][FONT=Italianno][COLOR=black]Additional Info[/COLOR][/FONT]
[border=1px solid rgb(155,0,1); height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/div][div=width: calc(100% - 75px); height:100%;margin-left: 75px;][div=width: calc(100% + 14px); height: 100%; overflow-y: scroll; box-sizing: border-box; padding:3px; padding-right:7%]
Test4
[/div][/div][/div][/div]
[comment]End main content[/comment]
[/div][/div]
[/div][/div]
Everything has been commented, but seeing how large it is, feel free to ask me for help if you want to change somethings.
 
Last edited:

cherub.

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
of Glass and Steel
Overall Winning Design and Member's Choice of the 2017 Palette Challenge. Original Submission here
Much of what I want to say is part of the post itself. As for the story and how it fits into the "Arcadia Universe," I guess the Shadows of the Librarian are one of the principal organizations looking for Arcadia, traveling between worlds in search of their utopia. My thoughts on the post as a whole are as follows. It is quite possibly my greatest pride in BBCode, and at the same time my messiest. Alot of the problems it suffers from is the way that accordions work and how the site flexes posts into shape. Unlike my other posts, I had to basically predict what size the post is gonna be and run off of those calculations. I most certainly want to return to it and clean it up, make it more accurate and efficient. If you want to use the code and/or alter it, feel free to ask me for help. I am entire unmotivated to go through it and make it Variable changeable at the moment. Once more, thank you to the other contestants and judges of the Challenge, I don't think it'd be possible for me to come up with this had I not join the competition.

Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 1[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]

when I try and use this code, all it says is " no slide " ?
and I'm kinda confused..
 

cherub.

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
i have this one, and it always comes up as this ( picture at the bottom ) -
Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]heloo[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]
[/spoiler]
 

Attachments

Alteras

The Sleepy One
Moderator
Supporter
i have this one, and it always comes up as this ( picture at the bottom ) -
Code:
[div=position: relative; display:block; --message-width: calc(80vw - 255px); --message-height: calc( var(--message-width) * 914 / 1625 - 45px); --background-color-text:rgba(224,251,252,.6); --message-min-width:calc((70vw + 300px) / 2); --message-min-height:calc( var(--message-min-width) * 914 / 1625 - 45px)][div=position: absolute;][div=position:absolute;top:0em; width:3em; height:0em; padding:0px;  transform:rotate(-90deg) skewY(20deg) translateY(-3em); transform-origin: 100% 0%; background-color:#253237][border=0px solid transparent][accordion=100%]{slide=[bg=#253237; text-align:CENTER][COLOR=#e0fbfc][fa]fa-plus[/fa][/COLOR][/bg]}[bg=#253237][div=margin:0px 0px 0px -6.5px; width:1.6em; visibility:hidden;][accordion=100%]{slide=right|[bg=#5c6b73;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]heloo[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-8.75em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black;]

Slide 1

[/div]{/slide}

{slide=right|[bg=#9db4c0;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 2[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-14em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 2

[/div]{/slide}
{slide=right|[bg=#c2dfe3;visibility:visible][div=transform:rotate(90deg) translate( .25em, -.75em) skew(20deg); transform-origin:50% 0%; white-space:nowrap; height:5em; color:black;][FONT=Times New Roman]Slide 3[/FONT][/div][/bg]}[div=position:absolute; transform: skewY(-20deg) rotate(90deg) translateY(15px) translateX(-19.25em); transform-origin:0% 0%; background-color:var(--background-color-text); width: var(--message-width); max-width:1600px; min-width: var(--message-min-width); height: var(--message-height); min-height: var(--message-min-height); max-height:800px; padding:7px; overflow-y:auto; visibility:visible; color:black]

Slide 3

[/div]{/slide}[/accordion][/div][/bg]{/ slide}[/accordion][/border][/div][/div][div=pointer-events:none;][comment]BBcode by @Alteras[/comment][IMG]Picture Here[/IMG][/div][/div]
[/spoiler]
Oh, that's because I sterilized the code. Start by adding your background image at the the end of the code where it says, "Picture Here"
 

Sir Galahad II

Semi-colon Evangelist
I have a request, if you're still up to it.
  • Mobile Priority - I don't care, make it as compatible or incompatible for mobile as you feel.
  • Freebie or Nah? - I don't mind, let people have it.
  • Expected Color Palette and Image - Primary white, secondary black, tertiary dark blue.
  • The Dream - I have a poorly made paint.net pic. I'll go over what all the colors mean: (Here) So I don't know what they're called, but I'd like one of those fancy pictures where it looks like the text and everything is moving over it inside the red box, with a border of some sort (Here's a placeholder image if you need one.) The green circle is just for a plain old character image (Here's another placeholder.) The purple line is for a sort of crest hugging the bottom of the pic (Something like this.) I'd like some text underneath for a quote. Finally, the black boxes are just generic boxes with borders for text to show up on. The blue boxes represent buttons that you'd click to make their respective text appear.
Thank you for your time! Feel free to ask me any questions, and I don't mind if you insert your own text/ images to suit any of your stories.
 

Alteras

The Sleepy One
Moderator
Supporter
I have a request, if you're still up to it.
  • Mobile Priority - I don't care, make it as compatible or incompatible for mobile as you feel.
  • Freebie or Nah? - I don't mind, let people have it.
  • Expected Color Palette and Image - Primary white, secondary black, tertiary dark blue.
  • The Dream - I have a poorly made paint.net pic. I'll go over what all the colors mean: (Here) So I don't know what they're called, but I'd like one of those fancy pictures where it looks like the text and everything is moving over it inside the red box, with a border of some sort (Here's a placeholder image if you need one.) The green circle is just for a plain old character image (Here's another placeholder.) The purple line is for a sort of crest hugging the bottom of the pic (Something like this.) I'd like some text underneath for a quote. Finally, the black boxes are just generic boxes with borders for text to show up on. The blue boxes represent buttons that you'd click to make their respective text appear.
Thank you for your time! Feel free to ask me any questions, and I don't mind if you insert your own text/ images to suit any of your stories.
Hello! I understand and should be able to do practically everything you asked. There is one thing I'm confused about, "fancy pictures where it looks like the text and everything is moving over it." Can you provide an example?
 

Sir Galahad II

Semi-colon Evangelist
Lol, sorry. You've seen those pictures where it looks like there's a window in the post that shows a picture, right? When you scroll, instead of the picture moving with the post, it looks like it just stays in place and the text is sliding over it as you scroll. Sorry for the confusion.
 

Alteras

The Sleepy One
Moderator
Supporter
Lol, sorry. You've seen those pictures where it looks like there's a window in the post that shows a picture, right? When you scroll, instead of the picture moving with the post, it looks like it just stays in place and the text is sliding over it as you scroll. Sorry for the confusion.
Oh, ok, so something like this?

[div=background-image:url('https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/8/8a/Jungle-ruined-temple-cemetery.jpg/revision/latest/scale-to-width-down/1280?cb=20160709195657'); background-size: cover; color:white; width:500px, height:300px;]


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dolor ut pellentesque condimentum. Cras metus orci, tempor quis purus in, cursus dapibus quam. Duis pulvinar, nisi interdum interdum interdum, est nisi scelerisque magna, sit amet facilisis nisi odio vel augue. In nec ullamcorper turpis. Quisque felis dolor, auctor iaculis dui at, aliquet luctus nunc. Nulla tempor interdum aliquam. Morbi interdum sodales pellentesque. Mauris at sagittis neque, non laoreet ante. Integer vel egestas augue, quis malesuada elit. Morbi nec nisl porttitor, eleifend metus non, auctor arcu. Quisque erat orci, eleifend vitae elit eget, lacinia rhoncus diam.

Morbi euismod a arcu vel finibus. Praesent non purus nisi. Curabitur nec lacus mauris. Phasellus non efficitur justo, non bibendum augue. Fusce dapibus mauris et quam cursus placerat. Duis consectetur justo interdum felis porta, nec tincidunt purus pellentesque. Suspendisse porttitor commodo ante, vel malesuada mi cursus sed. Nulla vitae lacus eget ex posuere vestibulum a quis odio. In hac habitasse platea dictumst. Proin consectetur, dui vel interdum bibendum, nulla massa ullamcorper nunc, eget faucibus velit justo sed erat. Nulla aliquet orci quis nulla varius, sit amet porta justo maximus. Duis placerat, enim vitae pretium molestie, leo sapien ultricies metus, vitae ultrices ligula arcu id libero. Maecenas iaculis sapien non nibh sollicitudin rutrum at ut libero. Maecenas id dapibus nulla. Praesent nec ultrices lacus. Aliquam eget facilisis ante, et posuere est.

Cras feugiat ex vitae velit cursus, eu varius enim facilisis. Donec vitae leo porttitor, cursus neque eu, ornare tellus. Nulla imperdiet dui odio. Fusce porttitor sapien ac maximus fringilla. Duis interdum, mi vitae vestibulum varius, orci augue dapibus urna, pellentesque venenatis tellus eros eget risus. Nulla pellentesque lobortis ligula, vel congue elit tempor a. Ut tellus ipsum, egestas id purus sed, semper feugiat velit. Maecenas ultricies mi sed vestibulum auctor. Quisque luctus, sapien vel posuere rhoncus, enim nulla dapibus risus, in molestie urna erat ac risus. Ut tempor consectetur risus malesuada dictum. Suspendisse viverra leo ac nibh pharetra congue.

Nullam in rutrum nisl, id aliquet velit. In viverra nibh a augue tristique, malesuada congue metus laoreet. Duis at augue tincidunt, faucibus tellus vitae, consequat erat. Nulla at imperdiet magna. Nulla facilisi. Mauris interdum congue mauris, laoreet fermentum erat hendrerit vel. Nulla id posuere odio. Pellentesque consectetur est vitae sem maximus, ut porta lectus ultricies. Phasellus maximus urna at posuere sodales. Nam mauris elit, porttitor ac sapien sit amet, pretium fringilla odio. Aenean eu mi ornare, feugiat augue nec, cursus ex. Aenean ultrices justo vel finibus mattis. Etiam ante ex, posuere eget maximus in, elementum sit amet nisl. Sed ac ullamcorper nulla.

Duis eu efficitur nisl. Ut semper turpis quis mi placerat, at ultricies tortor iaculis. Duis vitae dapibus felis, id consequat risus. Integer vitae nulla rutrum, porta diam at, varius tellus. Mauris vitae dolor ipsum. Etiam dignissim, nisi at blandit pharetra, erat mi efficitur ex, ut mattis ipsum turpis a sem. Quisque at nibh sem. Nullam tincidunt lectus id tortor luctus pharetra. Nam condimentum nunc arcu. Vivamus egestas dolor vel tincidunt ultrices. Etiam maximus viverra libero id volutpat.
[/div]
 

Alteras

The Sleepy One
Moderator
Supporter
oh, ok. So this.

[div=background-image:url('https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/8/8a/Jungle-ruined-temple-cemetery.jpg/revision/latest/scale-to-width-down/1280?cb=20160709195657'); background-size: cover; background-attachment:fixed; color:white; width:500px, height:300px;]


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dolor ut pellentesque condimentum. Cras metus orci, tempor quis purus in, cursus dapibus quam. Duis pulvinar, nisi interdum interdum interdum, est nisi scelerisque magna, sit amet facilisis nisi odio vel augue. In nec ullamcorper turpis. Quisque felis dolor, auctor iaculis dui at, aliquet luctus nunc. Nulla tempor interdum aliquam. Morbi interdum sodales pellentesque. Mauris at sagittis neque, non laoreet ante. Integer vel egestas augue, quis malesuada elit. Morbi nec nisl porttitor, eleifend metus non, auctor arcu. Quisque erat orci, eleifend vitae elit eget, lacinia rhoncus diam.

Morbi euismod a arcu vel finibus. Praesent non purus nisi. Curabitur nec lacus mauris. Phasellus non efficitur justo, non bibendum augue. Fusce dapibus mauris et quam cursus placerat. Duis consectetur justo interdum felis porta, nec tincidunt purus pellentesque. Suspendisse porttitor commodo ante, vel malesuada mi cursus sed. Nulla vitae lacus eget ex posuere vestibulum a quis odio. In hac habitasse platea dictumst. Proin consectetur, dui vel interdum bibendum, nulla massa ullamcorper nunc, eget faucibus velit justo sed erat. Nulla aliquet orci quis nulla varius, sit amet porta justo maximus. Duis placerat, enim vitae pretium molestie, leo sapien ultricies metus, vitae ultrices ligula arcu id libero. Maecenas iaculis sapien non nibh sollicitudin rutrum at ut libero. Maecenas id dapibus nulla. Praesent nec ultrices lacus. Aliquam eget facilisis ante, et posuere est.

Cras feugiat ex vitae velit cursus, eu varius enim facilisis. Donec vitae leo porttitor, cursus neque eu, ornare tellus. Nulla imperdiet dui odio. Fusce porttitor sapien ac maximus fringilla. Duis interdum, mi vitae vestibulum varius, orci augue dapibus urna, pellentesque venenatis tellus eros eget risus. Nulla pellentesque lobortis ligula, vel congue elit tempor a. Ut tellus ipsum, egestas id purus sed, semper feugiat velit. Maecenas ultricies mi sed vestibulum auctor. Quisque luctus, sapien vel posuere rhoncus, enim nulla dapibus risus, in molestie urna erat ac risus. Ut tempor consectetur risus malesuada dictum. Suspendisse viverra leo ac nibh pharetra congue.

Nullam in rutrum nisl, id aliquet velit. In viverra nibh a augue tristique, malesuada congue metus laoreet. Duis at augue tincidunt, faucibus tellus vitae, consequat erat. Nulla at imperdiet magna. Nulla facilisi. Mauris interdum congue mauris, laoreet fermentum erat hendrerit vel. Nulla id posuere odio. Pellentesque consectetur est vitae sem maximus, ut porta lectus ultricies. Phasellus maximus urna at posuere sodales. Nam mauris elit, porttitor ac sapien sit amet, pretium fringilla odio. Aenean eu mi ornare, feugiat augue nec, cursus ex. Aenean ultrices justo vel finibus mattis. Etiam ante ex, posuere eget maximus in, elementum sit amet nisl. Sed ac ullamcorper nulla.

Duis eu efficitur nisl. Ut semper turpis quis mi placerat, at ultricies tortor iaculis. Duis vitae dapibus felis, id consequat risus. Integer vitae nulla rutrum, porta diam at, varius tellus. Mauris vitae dolor ipsum. Etiam dignissim, nisi at blandit pharetra, erat mi efficitur ex, ut mattis ipsum turpis a sem. Quisque at nibh sem. Nullam tincidunt lectus id tortor luctus pharetra. Nam condimentum nunc arcu. Vivamus egestas dolor vel tincidunt ultrices. Etiam maximus viverra libero id volutpat.
[/div]
 

Smol Birb

Adorable Birb
Hello :D I just found this and aaahhh, you make such cool codes. If it's okay, I'd love to make a request, because I can't code. ;-;

Mobile Priority - You do what ever is easiest for you! ^-^
Freebie or Nah? - Yes please! (^o^)
Expected Color Palette and Image - I really like a black and white theme, with some greys added in. I'm not really good at finding images, but if you think you find a black and white image that will work, feel free to add it in! I write mostly dark roleplays, so a dark theme is right up my alley!
The Dream - I really, really want a cool code I can use as a roleplay finder, like the ones you see in the partner forum. I'm more of a tabs person, where I like to have maybe four or five tabs that I can fit information into (Like an introduction, roleplay expectations, pairings, plots), rather than a scroll person. I also really like the 'Of glass and steel' code, so maybe something similar to that, but where I don't have to click the button to get the tabs? I hope that this is okay, and feel free to ask me questions, cause I know I suck at explaining things. ^o^
Thank you!
 

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

Top