Closed Star of Arcadia ☆ Workshop (Freebies)

[taliaangeni]

Hi! I have a request. Please and thank you!

• Mobile Priority - I would like it to be mobile compatible if able.
• Expected Color Palette and Image - Just greys, unless you want to do your own thing.
• Type of Post - Uh Main thread post, I guess.
• Freebie or Nah? - Doesn't matter. xD
• The Star - Also, in the haven tab, make the blocks clickable links.

Spoiler

 

[Alteras]

Hi! I have a request. Please and thank you!

• Mobile Priority - I would like it to be mobile compatible if able.
• Expected Color Palette and Image - Just greys, unless you want to do your own thing.
• Type of Post - Uh Main thread post, I guess.
• Freebie or Nah? - Doesn't matter. xD
• The Star - Also, in the haven tab, make the blocks clickable links.

Spoiler

Would 2-3 weeks be okay with you?

 

[taliaangeni]

Would 2-3 weeks be okay with you?

Take as long as you need! I'm not looking to start this yet.

 

[fIora]

Hi there! I have a small request! It would be great if you could create it (i would be blessed < 3)

Mobile Priority - I dont mind it being PC only! I'm pretty sure most of the people in the RP dont use mobile for reading, so it'll be fine if it's not mobile friendly.
Expected Color Palette and Image - there's a picture below regarding the images! Also i literally use one of the photos in the chocolate romance bbcoding so it'll be okay.
Type of Post - In character posts !
Freebie or Nah? - sure! i dont mind if it's a freebie lol
The Star - Okay so basically, I kind of imagine it to be a in-character post for the chocolate romance cs. it doesnt have to be all cool with the spinning stuff but maybe keep the general aesthetic of the hearts / little stars, etc. below is basically a picture and like it has kind of a title post with the desired colours, etc. one thing i forgot to mention is like underneath the initial diagonal blue box thingy, another mint green diagonal like section for location, interacting with, etc.

the text box would have maybe like a pink border so it's clear it's where the text is supposed to go, and do whatever you want on the bottom. i dont really mind : )

the bottom right has a little colour graph or whatever it's called so you can see what colours i want // also if possible only have white as an accent / background color.

 

[Alteras]

Hi there! I have a small request! It would be great if you could create it (i would be blessed < 3)

Mobile Priority - I dont mind it being PC only! I'm pretty sure most of the people in the RP dont use mobile for reading, so it'll be fine if it's not mobile friendly.
Expected Color Palette and Image - there's a picture below regarding the images! Also i literally use one of the photos in the chocolate romance bbcoding so it'll be okay.
Type of Post - In character posts !
Freebie or Nah? - sure! i dont mind if it's a freebie lol
The Star - Okay so basically, I kind of imagine it to be a in-character post for the chocolate romance cs. it doesnt have to be all cool with the spinning stuff but maybe keep the general aesthetic of the hearts / little stars, etc. below is basically a picture and like it has kind of a title post with the desired colours, etc. one thing i forgot to mention is like underneath the initial diagonal blue box thingy, another mint green diagonal like section for location, interacting with, etc.

the text box would have maybe like a pink border so it's clear it's where the text is supposed to go, and do whatever you want on the bottom. i dont really mind : )

the bottom right has a little colour graph or whatever it's called so you can see what colours i want // also if possible only have white as an accent / background color.

No problem! I'm a bit busy at the moment, so would you be willing to wait up to 2-3 weeks?

 

[fIora]

No problem! I'm a bit busy at the moment, so would you be willing to wait up to 2-3 weeks?

No problem! take as long as you'd like

 

[taliaangeni]

Sorry but I have a bit of an edit - if you're able to do it.

Spoiler

 

[M u n e]

From the Shadows

This is a CS I made for the RP When Darkness Wins which I'm very hyped about. This is a very very cinematic design. On desktop, you only have to hover for the opening to play out, while on mobile, you'll click on it. Because of extensive use of flexboxes, this is more mobile friendly than my mobile friendly codes. The shadows are achieved by using a series of divs with box-shadows set to inset, and the quotes fading in and using a transition delay between opacity and color. It also uses a fluid typography system, make good use of the space both on desktop and mobile. Because of how big the image is, it will always try to size to the height of the screen. Ah it should be noted that in order for it to function, you have to input the size of the image where it says --img-h and --img-w like my older pieces.

Spoiler: Code

[nobr]

[class=container]
--color-1: black;
--color-2: #c4c5ca;
--img-h: 2963;
--img-w: 1920;
--width: calc( (var(--img-w) / var(--img-h) ) * 84vh);
--shadow-content-height: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
height: auto;
padding: 10px;
position: relative;
background-color: var(--color-1);
color: var(--color-2);
overflow: hidden;
[/class]

[class=imageFiller]
position: absolute;
height: 84vh;
top:0;
left:0;
width: 100%;
[/class]

[class=flex]
position: relative;
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
[/class]

[class=image]
position: relative;
top: 0;
font-size:0;
height: 84vh;
max-height: 100%;
padding-right: var(--width);
max-width: 100%;
box-sizing: border-box;
[/class]

[class=imageInside]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
font-size: 0;
[/class]

[class=imageShadow]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 6.5s;
[/class]

[class=shadows]
box-shadow: inset 0 0 3vh 3vh var(--color-1);
[/class]

[class=content]
position: relative;
height: 100%;
width: 100%;
max-width: 0;
box-sizing: border-box;
transition: max-width 2s linear 13s;
overflow: hidden;
padding: 5px;
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
[/class]

[class=contentHolder]
position: relative;
max-height:0;
max-width:0;
height: 84vh;
overflow: hidden;
width: var(--width);
transition: max-height 1s linear 12s, max-width 2s linear 13s;
[/class]

[class=contentShadow]
position: absolute;
z-index:4;
height: 100%;
width: 100%;
top:0;
left:0;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 15s;
pointer-events: none;
[/class]

[class=contentHolderOpen]
max-height: 84vh;
max-width: var(--width);
[/class]

[class=contentOpen]
max-width: var(--width);
[/class]

[class=contentShadowOpen]
box-shadow: inset 0 0 0 0 var(--color-1);
[/class]

[class=quote]
color: var(--color-2);
position: absolute;
padding: 5%;
width: 100%;
z-index:2;
pointer-events: none;
font-size: calc( 24px + (50 - 24) * (100vw - 200px) / (1280 - 200) );
[/class]

[class=quoteTop]
top:0;
left:0;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s;
[/class]

[class=quoteMid]
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 2s;
text-align: center;
[/class]

[class=quoteBot]
bottom:0;
right:0;
text-align: right;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 4s;
[/class]

[class=quoteOpen]
opacity: 1;
color: transparent;
[/class]

[class=name]
position: relative;
width: 100%;
height: auto;
max-height: 100%;
text-align: center;
border-bottom: 2px solid var(--color-2);
box-sizing: border-box;
font-size: calc( 46px + (70 - 46) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
flex: 0;
[/class]

[class=tabs]
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
margin-bottom: 2px;
font-size: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
z-index: 3;
[/class]

[class=tab]
flex: 1;
display: inline;
text-align: center;
z-index: 3;
cursor: pointer;
[/class]

[class=tabContentHolder]
margin-top: calc( -1* var(--shadow-content-height) );
position: relative;
overflow: hidden;
flex: 1 0 auto;
box-sizing: border-box;
[/class]

[class=tabContent]
height: 100%;
width: 100%;
top:0;
left:0;
position: absolute;
overflow: hidden;
opacity: 1;
transition: opacity 1ms 1s;
[/class]

[class=scroll]
padding-top: var(--shadow-content-height);
width: 100%;
height: calc( 100% - var(--shadow-content-height) );
position: relative;
overflow-Y: scroll;
padding-right: 100px;
font-size: 16px;
[/class]

[class=tabShadow]
position: absolute;
top:0;
left:-10%;
width: 120%;
height: 100%;
z-index: 2;
pointer-events: none;
box-shadow: inset 0 calc( -1 * var(--shadow-content-height) ) var(--shadow-content-height) var(--color-1), inset 0 var(--shadow-content-height) var(--shadow-content-height) var(--color-1);
transition: box-shadow 1s 1.1s;
[/class]

[class=tabShadowOpen]
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 1s;
[/class]

[class=Opacity]
opacity: 0;
pointer-events: none;
[/class]

[script class=container on=mouseenter]
addClass shadows imageShadow
addClass quoteOpen quote
addClass contentOpen content
addClass contentHolderOpen contentHolder
addClass contentShadowOpen contentShadow
[/script]

[script=tab]
set CurTab "Basic"
addClass tabShadowOpen tabShadow
removeClass tabShadowOpen basicShadow
addClass Opacity tabContent
removeClass Opacity basicContent
[/script]

[script class=tab on=click]
set SelTab (getText)
if (eq ${CurTab} ${SelTab} ) (stop)
if (eq ${SelTab} "Basic" ) (removeClass tabShadowOpen basicShadow) (addClass tabShadowOpen basicShadow)
if (eq ${SelTab} "Basic" ) (removeClass Opacity basicContent) (addClass Opacity basicContent)
if (eq ${SelTab} "Persona" ) (removeClass tabShadowOpen personaShadow) (addClass tabShadowOpen personaShadow)
if (eq ${SelTab} "Persona" ) (removeClass Opacity personaContent) (addClass Opacity personaContent)
if (eq ${SelTab} "Physique" ) (removeClass tabShadowOpen physiqueShadow) (addClass tabShadowOpen physiqueShadow)
if (eq ${SelTab} "Physique" ) (removeClass Opacity physiqueContent) (addClass Opacity physiqueContent)
if (eq ${SelTab} "Extra" ) (removeClass tabShadowOpen extraShadow) (addClass tabShadowOpen extraShadow)
if (eq ${SelTab} "Extra" ) (removeClass Opacity extraContent) (addClass Opacity extraContent)
set CurTab ${SelTab}
[/script]

[/nobr][div class=container][div class=imageFiller]
[div class="quote quoteTop"][font=Arizonia]a Blade slashed through the Darkness[/font][/div]
[div class="quote quoteMid"][font=Arizonia]the Battle ended[/font][/div]
[div class="quote quoteBot"][font=Arizonia]and from it, She emerged[/font][/div]
[/div][div class=flex][div class=image][div class=imageInside][img]https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full[/img][/div][div class=imageShadow][/div][/div][div class=contentHolder][div class=contentShadow][/div][div class=content][div class=name][font=Arizonia]NAME NAME
[div= font-size: .5em]Subtitle[/div][/font][/div][font=Allura][div class=tabs][div class=tab]Basic[/div][div class=tab]Persona[/div][div class=tab]Physique[/div][div class=tab]Extra[/div][/div][/font][div class=tabContentHolder]
[div class="tabContent basicContent"][div class="tabShadow basicShadow"][/div][div class=scroll][font=Open Sans]Content for Basic


[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent personaContent"][div class="tabShadow personaShadow"][/div][div class=scroll][font=Open Sans]Content for Persona


[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent physiqueContent"][div class="tabShadow physiqueShadow"][/div][div class=scroll][font=Open Sans]Content for Physique



[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent extraContent"][div class="tabShadow extraShadow"][/div][div class=scroll][font=Open Sans]Content for Extra


[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[/div][/div][/div][/div][/div][code][/spoiler]

Heya! I know this one's a bit older, but I found it really cool! How do I add a different image in place of the old one? I've tried adjusting it but it's a bit confusing! ^^"

 

[Alteras]

Heya! I know this one's a bit older, but I found it really cool! How do I add a different image in place of the old one? I've tried adjusting it but it's a bit confusing! ^^"

you'll replace the link in this part of the code:

[div class=imageInside][img]https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full[/img][/div]

 

[M u n e]

you'll replace the link in this part of the code:

[div class=imageInside][img]https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full[/img][/div]

I tried? Hm, do I use the image address or the actual image itself?

 

[Alteras]

I tried? Hm, do I use the image address or the actual image itself?

if you right click on the image, you can click on copy image location to get the image.

 

[truthofself]

im crying, these codes are so beautiful

 

[rae2nerdy]

Not sure if you're still taking requests.

• Mobile Friendly : I check in regularly on my phone so I'd like the code to be at least readable through mobile.
• Expected Color Pallet & Image : This Image Colors are up to you as long as they're readable.
• Type of Post : 1x1 Interest Check
• Freebie Or Nah? : I'm fine with freebie.
• The Star : I'd like tabs or at least something that looks like tabs.
  Tab Titles : Current Cravings , Partner Requests, Deal Breakers, Fandoms, Originals, Romance, Extra
  I'd like the current cravings to be open as a default. Just so searchers can get a quick look at what I'm looking for before they continue on thru the rest of the tabs.

As a note I'm fine waiting for the code. I'll be going on vacation in a few days and returning on the 20th.

 

[Alteras]

Not sure if you're still taking requests.

• Mobile Friendly : I check in regularly on my phone so I'd like the code to be at least readable through mobile.
• Expected Color Pallet & Image : This Image Colors are up to you as long as they're readable.
• Type of Post : 1x1 Interest Check
• Freebie Or Nah? : I'm fine with freebie.
• The Star : I'd like tabs or at least something that looks like tabs.
  Tab Titles : Current Cravings , Partner Requests, Deal Breakers, Fandoms, Originals, Romance, Extra
  I'd like the current cravings to be open as a default. Just so searchers can get a quick look at what I'm looking for before they continue on thru the rest of the tabs.

As a note I'm fine waiting for the code. I'll be going on vacation in a few days and returning on the 20th.

It will definitely be a while until I get to this request, as I'm still working on 2 others and have finals soon. Hopefully I'll be able to get you a working version by the time you get back.

 

[HollyLeafForever]

Star of Arcadia

I was looking to change the color of the glaze but the last time i did it i couldn't get it to have a good opacity. Is that just cause of the color i am using and if so or if not... either way... how do i change the opacity?

 

[Alteras]

Star of Arcadia

I was looking to change the color of the glaze but the last time i did it i couldn't get it to have a good opacity. Is that just cause of the color i am using and if so or if not... either way... how do i change the opacity?

You can change the colors in the the class Container under the variable --bg-color. the 4th value is the opacity value of the color.

 

[HollyLeafForever]

You can change the colors in the the class Container under the variable --bg-color. the 4th value is the opacity value of the color.

Thank you !!

 

[Lekiel]

Hi! I was wondering, seems like the coding of your awesome first post broke D:! Any idea if this is a permanent thing? Cause that would be a huge shame.

 

[Alteras]

Hi! I was wondering, seems like the coding of your awesome first post broke D:! Any idea if this is a permanent thing? Cause that would be a huge shame.

if you're using chrome then it is broken. I've looked over the code multiple time and determined that there's nothing I can do to fix it. It works on every other browser I've checked.

 

[Lekiel]

if you're using chrome then it is broken. I've looked over the code multiple time and determined that there's nothing I can do to fix it. It works on every other browser I've checked.

yeah.. I'm using chrome :,( booo...

 

[ThePastelWitch]

Hello there! I would love to say that I absolutely LOVE your coding. It takes so much time just for me to do something basic. I can't imagine how long it takes for you to make such complex codes. And I highly appreciate that you do such a thing for other people. And I do happen to have a request that isn't needed immediately, but I would like maybe an explanation on how you worked variables to make your layouts mobile compatible. Or perhaps a link to a thread where you've already explained it. (I work on my desktop, which has a very high resolution, and it makes mobile compatible ones elsewhere appear incredibly small and hard to read. Many of the members that are in my current roleplay, however, are on a mobile device majority of the time, so they can't see a lot of the layouts that I get elsewhere). Please and thank you!
(Also, I'm on Chrome and maybe it's just me but I'm having no issues with any of your codes on my end. Just wanted to let you know that it may not be just a Chrome issue.)

• Mobile Priority - High (but something that looks good on desktop too)
• Expected Color Palette and Image - I'm big on pastels, but any color is fine since I'll probably adapt it for multiple characters. Lol
• Type of Post - Roleplay post/reply
• Freebie or Nah? - Up to you, but I wouldn't mind others using it either.
• The Star - I would like for it to have tabs so to separate things like tags for other members, location, current clothing, voice track/background music, and so forth. (I'm good at adding and removing tabs, so as long as the basic format of it is there, you can just include two tabs to make it easier on yourself.)

Spoiler

This is what I am working with at the moment and you're free to make it similar or different. ^^

 

[Alteras]

Hello there! I would love to say that I absolutely LOVE your coding. It takes so much time just for me to do something basic. I can't imagine how long it takes for you to make such complex codes. And I highly appreciate that you do such a thing for other people. And I do happen to have a request that isn't needed immediately, but I would like maybe an explanation on how you worked variables to make your layouts mobile compatible. Or perhaps a link to a thread where you've already explained it. (I work on my desktop, which has a very high resolution, and it makes mobile compatible ones elsewhere appear incredibly small and hard to read. Many of the members that are in my current roleplay, however, are on a mobile device majority of the time, so they can't see a lot of the layouts that I get elsewhere). Please and thank you!
(Also, I'm on Chrome and maybe it's just me but I'm having no issues with any of your codes on my end. Just wanted to let you know that it may not be just a Chrome issue.)

• Mobile Priority - High (but something that looks good on desktop too)
• Expected Color Palette and Image - I'm big on pastels, but any color is fine since I'll probably adapt it for multiple characters. Lol
• Type of Post - Roleplay post/reply
• Freebie or Nah? - Up to you, but I wouldn't mind others using it either.
• The Star - I would like for it to have tabs so to separate things like tags for other members, location, current clothing, voice track/background music, and so forth. (I'm good at adding and removing tabs, so as long as the basic format of it is there, you can just include two tabs to make it easier on yourself.)

Spoiler

This is what I am working with at the moment and you're free to make it similar or different. ^^

Here's a guide that I made a while ago. The examples are for before we had classes, but they still work the same.
Resource - CSS Variables and Calc()

I'll see what I can do. It'll prob be a while before I can get a good code tho.

 

[ThePastelWitch]

Alteras -

Take all of the time you need and I will study that guide. ^^ Hopefully I'll learn a good bit by the time you've finished. Lol
Thank you!​

 

[JayfeatherRaven]

Hey, just wanted to pop in and say you are so amazing at thissss!

 

[mikaluvkitties]

I saw the first code and my jaw literally dropped. these are all so good you are doing amazing i love all your work so far!!!