Vali Ulfr
The Battle Slain Wolf
[div class=container][div class=glaze][div class=tabsContainer][div class=tabNames]
[div class="tabName titleName"]Title Screen[/div]
[div class="tabName introName"]Introduction[/div]
[div class="tabName requestsName"]Requests[/div]
[div class="tabName bbcodeName"]BBcode List[/div]
[/div][div class=tabs]
[div class="tab titletab"][/div]
[div class="tab introtab"][/div]
[div class="tab requeststab"][/div]
[div class="tab bbcodetab"][/div]
[/div][/div][div class="spoke titleSpoke"][div class=contentContainer]
[div class="content titleContent"]
[div class=Title]Star of Arcadia[/div][/div]
[div class="header titleHeader"][div class=caption]BBcode Workshop byAlteras
Freebies ● Requests ● Interest Checks ● In-Character Posts ● Character Sheets[/div][/div]
[/div][/div][div class="spoke introSpoke"][div class=contentContainer]
[div class="content introContent"][div class=scroll]Hello and welcome to Star of Arcadia!
I am
So I have a small background in web design, so when BBcode+ came out and I saw we have classes, I practically fell over in excitement. I screamed for a solid minute before lying down in bed for the next hour. And to my greater surprise, we have BBscript! Which means we can do even crazier stuff without messing with the horrible accordions (click on the star if you haven't already). Unfortunately, at the time of writing this, the repertoire of functions we can use in BBscripts is fairly small, however, with a bit of math and alot of spaghetti coding, we can make Boolean Logic Gates (thank you TI-Basic coding).
I guess I should properly explain this workshop and the BBcode I create. So I primarily focus on image preservation, meaning that an image will look good no matter what screen it is. Of course, this doesn't necessarily mean that everything I make is Mobile Friendly. Just like last time, I'll be using a 3-tier system to denote the Mobile Friendliness of a post, going from Mobile Friendly, to Mobile Compatible, to Desktop Only. This post would be considered Mobile Friendly by the way, because all of the text can be seen properly, and all the functions operate the same way as a desktop version would.
This workshop will not only contain new BBcodes that I make, but will also contain remakes of my old code, code that suffered from the horrors of having to deal with accordions to get their effects. If I don't bring over an old code, that means I found it too troublesome for my time or that I don't have the motivation, so if I made a code in the past that you'd like to see again, I might or might not remake it. In any case, I take requests, but do be warned that the time it takes to make the code depends on the complexity and my schedule.
I think that covers everything. Everything else can be covered in the other sections.
[/div][/div]
[div class="header introContent"]Introduction
[/div][/div][/div][div class="spoke requestsSpoke"][div class=contentContainer]
[div class="content requestsContent"][div class=scroll] I'll be accepting requests, both for new BBcode and minor alterations to my code. 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:
Once again, I take requests to alter my code. Many of the bbcode I make contains CSS variables that can be changed to fit almost anything. I always clean up my code, removing the values, when i release the freebie, so it isn't odd to find it not working if you just copy and paste it.[/div][/div]
- 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 Friendly.
- 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.
- Type of Post - Is this geared towards Character Sheets, Interest Checks, In-Character Posts, or something else entirely?
- Freebie or Nah? - This is self explanatory. If you don't want it to be a freebie, it won't appear on this thread. Credit must still remain in the code in any case. If I decide to display the code anyway, that means that I found the code to be so good that it should be openly shared.
- The Star - 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 class="header requestsContent"]Requests
[/div][/div][/div][div class="spoke bbcodeSpoke"][div class=contentContainer]
[div class="content bbcodeContent"][div class=scroll][/div][/div]List of BBcode
- Star of Arcadia
- Chocolate Romance
- Classroom Battle
- From the Shadows
- IC Post — Set #1
- Royal Character Card
Reference Chart
Mobile Friendly -
Mobile Compatible -
Desktop Only -
By Request -
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()
[div class="header bbcodeHeader"]Listof BBcode
[/div][/div]
[/div][/div][div class=circle]
[div class=circleClose]Close[/div]
[div class=circleOpen]Open[/div]
[/div][/div] [class=container] --img-w: 2100; --img-h: 1200; --cir-center-h: 61.08%; --cir-center-w: 26.86%; --cir-radius: 12.7; --cir-thickness: .5vw; --bg-color: rgba(191, 217, 242, 0.9); --divide-thick: .25vw; --tab-color-1:#eab040; --tab-color-2:#32254b; --tab-color-3:#8F5465; --tab-color-4:#7582C4; color:gray; width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image:url('https://www.rpnation.com/media/cache_e28c5ac3-dd5a-432b-c35b-33c516ed1b73-png.33740/full'); background-size:contain; position:relative; overflow:hidden; [/class] [class=glaze] --cir-radius-math: calc( var(--cir-radius) / 100 * 100%); width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness))); position: absolute; top:0; clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out; [/class] [class=glazeOpen] clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s; [/class] [class=tabsContainer] z-index:10; position: absolute; width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) ); height: calc( 2vw + 6px); top: calc( var(--cir-center-h) - var(--divide-thick) / 2 ); left: 0; border-top: var(--divide-thick) solid white; [/class] [class=tabNames] width: 100%; height: auto; bottom: calc( 100% + var(--divide-thick) ); position: absolute; [/class] [class=tabName] width: 100%; height: auto; box-sizing: border-box; position: absolute; bottom:0; font-size: calc(1vw + 6px); text-align: center; opacity:0; transition: opacity .5s ease-in; [/class] [class=tabNameShow] opacity: 1; [/class] [class=tabs] width: 100%; height: 100%; display: flex; flew-flow: row nowrap; justify-content: space-around; font-size: calc(1vw + 6px); [/class] [class=tab] flex: 1 1 auto; text-align: center; cursor: pointer; [/class] [class=titletab] color: var(--tab-color-1); transition: all .5s ease-in; [/class] [class name=titletab state=hover] color: white; background-color: var(--tab-color-1); [/class] [class=titleName] color: var(--tab-color-1); transition: opacity .5s ease-in; [/class] [script class=titletab on=mouseenter] addClass tabNameShow titleName [/script] [script class=titletab on=mouseleave] removeClass tabNameShow titleName [/script] [class=introtab] color: var(--tab-color-2); transition: all .5s ease-in; [/class] [class name=introtab state=hover] color: white; background-color: var(--tab-color-2); [/class] [class=introName] color: var(--tab-color-2); [/class] [script class=introtab on=mouseenter] addClass tabNameShow introName [/script] [script class=introtab on=mouseleave] removeClass tabNameShow introName [/script] [class=requeststab] color: var(--tab-color-3); transition: all .5s ease-in; [/class] [class name=requeststab state=hover] color: white; background-color: var(--tab-color-3); [/class] [class=requestsName] color: var(--tab-color-3); [/class] [script class=requeststab on=mouseenter] addClass tabNameShow requestsName [/script] [script class=requeststab on=mouseleave] removeClass tabNameShow requestsName [/script] [class=bbcodetab] color: var(--tab-color-4); transition: all .5s ease-in; [/class] [class name=bbcodetab state=hover] color: white; background-color: var(--tab-color-4); [/class] [class=bbcodeName] color: var(--tab-color-4); [/class] [script class=bbcodetab on=mouseenter] addClass tabNameShow bbcodeName [/script] [script class=bbcodetab on=mouseleave] removeClass tabNameShow bbcodeName [/script] [class=spoke] --math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) ); position: absolute; height: 100%; width: 100%; bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 ); left: var(--math); border-bottom: var(--divide-thick) white solid; transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom; transform: rotate(-270deg); opacity: 0; transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s; [/class] [class=SpokeReveal] transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s; transform: rotate(0deg); opacity: 1; [/class] [class=contentContainer] height: 100%; width: calc( 100% - var(--math) ); left:0; position:relative; [/class] [class=content] width: calc( 100% - 5px); height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px); max-height:0; bottom: 0; left:0; overflow: hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=scroll] height: auto; max-height: 100%; padding-top: 15px; width: calc( 100%); bottom: 0; position: absolute; padding-right: 200px; overflow-y: scroll; [/class] [class=header] width: 100%; height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2); max-height:0; top: calc(100% + var(--divide-thick) ); line-height: .9; font-size: calc( 5.5vw + 2px ); overflow:hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=Title] height: auto; left:0; bottom: 0; position: absolute; color: white; font-size: calc( 5.5vw + 8px ); line-height:.9; [/class] [class=caption] width:100%; height: 4vw; font-size: calc( 1.75vw + 6px ); line-height: 1.2; position: absolute; [/class] [class=ShowContent] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=ShowHeader] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=circle] width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) ); height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness)); box-sizing: border-box; border-radius: 50%; top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) ); left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) ); right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) ); position: absolute; cursor: pointer; border: 0px white solid; transition: border-width .5s ease-in-out 1s; [/class] [class=circleReveal] transition: border-width .5s ease-in-out; border-width: calc(var(--cir-thickness) + 2px); [/class] [class=circleClose] text-align: center; color: gray; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpen] text-align: center; color: gray; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpacity] opacity:1; [/class] [script=circle] set isOpen 1 addClass circleReveal circle addClass glazeOpen glaze [/script] [script class=circle on=mouseenter] if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen) [/script] [script class=circle on=mouseleave] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen [/script] [script class=circle on=click] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen if (eq ${isOpen} 1) (removeClass glazeOpen glaze) if (eq ${isOpen} 1) (removeClass circleReveal circle) if (eq ${isOpen} 0) (addClass glazeOpen glaze) if (eq ${isOpen} 0) (addClass circleReveal circle) if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1) [/script] [script=tab] set TabSel 0 set TabHis 1 addClass ShowContent titleContent addClass ShowHeader titleHeader addClass SpokeReveal titleSpoke [/script] [script class=tab on=click] set TabSel (getText) if (eq ${TabSel} ${TabHis}) (stop) //if tab selected is current tab, stop. if (eq ${TabHis} 1) (removeClass ShowContent titleContent) if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader) if (eq ${TabHis} 2) (removeClass ShowContent introContent) if (eq ${TabHis} 2) (removeClass ShowHeader introHeader) if (eq ${TabHis} 3) (removeClass ShowContent requestsContent) if (eq ${TabHis} 3) (removeClass ShowHeader requestsHeader) if (eq ${TabHis} 4) (removeClass ShowContent bbcodeContent) if (eq ${TabHis} 4) (removeClass ShowHeader bbcodeHeader) //hide the text and prepare for SPINNING if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke) if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke) if (eq ${TabHis} 3) (removeClass SpokeReveal requestsSpoke) if (eq ${TabHis} 4) (removeClass SpokeReveal bbcodeSpoke) //spinning to hide spoke complete. Prepare to spin spoke into view if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke) if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke) if (eq ${TabSel} 3) (addClass SpokeReveal requestsSpoke) if (eq ${TabSel} 4) (addClass SpokeReveal bbcodeSpoke) //spinning complete. Show the new stuff if (eq ${TabSel} 1) (addClass ShowContent titleContent) if (eq ${TabSel} 1) (addClass ShowHeader titleHeader) if (eq ${TabSel} 2) (addClass ShowContent introContent) if (eq ${TabSel} 2) (addClass ShowHeader introHeader) if (eq ${TabSel} 3) (addClass ShowContent requestsContent) if (eq ${TabSel} 3) (addClass ShowHeader requestsHeader) if (eq ${TabSel} 4) (addClass ShowContent bbcodeContent) if (eq ${TabSel} 4) (addClass ShowHeader bbcodeHeader) set TabHis ${TabSel} [/script]
HOLY SHIT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THAT INTRO IS AMAZING
Here's my request:
