• 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 Star of Arcadia ☆ Workshop (Freebies)

Huh, my bad. Something musta happened to my post. Regardless, thanks in advance for noticing my request.

Mobile Priority - Mobile Compatible; I want to be flexible with it regardless of PC or phone, but if it's not completely friendly that's fine with me.
Expected Color Palette and Image - Just black and white, no other colors. Maybe greyscale, but that's about it.
Type of Post - Store merchant speech/item list, for a NPC character.
Freebie or Nah? - Freebie.
The Star - A scrollable black speech box with white border and a small, black button below it called 'Items' which triggers a drop-down revealing another scrollable box, this time with frames on the far left (where the item images supposedly appear) and room for text on the right of the frame. A variant with inverted colors and color patterns would be nice, too, but it's mainly optional.
 
FactionGuerrilla said:
Huh, my bad. Something musta happened to my post. Regardless, thanks in advance for noticing my request.

Mobile Priority - Mobile Compatible; I want to be flexible with it regardless of PC or phone, but if it's not completely friendly that's fine with me.
Expected Color Palette and Image - Just black and white, no other colors. Maybe greyscale, but that's about it.
Type of Post - Store merchant speech/item list, for a NPC character.
Freebie or Nah? - Freebie.
The Star - A scrollable black speech box with white border and a small, black button below it called 'Items' which triggers a drop-down revealing another scrollable box, this time with frames on the far left (where the item images supposedly appear) and room for text on the right of the frame. A variant with inverted colors and color patterns would be nice, too, but it's mainly optional.
Click to expand...
it's fine. The site glitched out a bit, it seems. The ETA will be prob 1-2 weeks from now, if that's ok with you.
 
[class name=root] width: 100%; height: auto; position: relative; background-image: url('https://orig00.deviantart.net/f69c/f/2013/081/9/3/da_brocade_custom_box_background_by_gasara-d5ag4ls.gif'); background-color: rgb(218, 212, 218); background-blend-mode: multiply; overflow: hidden; [/class] [class name=flex] width: 100%; height: auto; position: relative; display: flex; flex-flow: row wrap; justify-content: stretch; align-items: start; [/class] [class name=image] height: 82vh; width: calc( 739/1374 * 82vh); background-image: url('https://www.rpnation.com/media/3822838135964a2c83e4ec0027-1499767526_waifu2x_art_noise3_tta_1-png.36357/full'); background-size: contain; background-position: center bottom; [/class] [class name=name] height: 3.5vh; width: 100%; position: absolute; top: calc(82vh - 3.5vh + 1px); left: 0; background-image: linear-gradient(to bottom, rgb(76, 102, 138) 30%, rgba(218, 212, 218, .5) 30%, rgba(218, 212, 218, .5) 50%, #313253 50%); background-position: bottom; background-size: 100% 3.5vh; background-repeat: no-repeat; z-index: 5; [/class] [class name=nameinside] position: absolute; bottom: 0; right: 1vw; height: auto; max-width: 100%; z-index: 6; font-size: 13.25vh; font-family: 'Cormorant Upright'; line-height: .77; padding-bottom: 3.5vh; text-align: right; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to bottom, #a52b4e, #e73359, #e73359, #a52b4e); [/class] [class name=container] min-height: 500px; height: 65vh; min-width: 300px; position: relative; flex: 1; display: flex; flex-flow: column nowrap; justify-content: stretch; align-items: stretch; [/class] [class name=tabs] position: relative; margin-top: 5vmin; display: flex; flex-flow: row wrap; justify-content: flex-end; font-size: initial; [/class] [class name=tab] position: relative; margin-right: 1.5vw; font-size: calc(1em + 3vh); font-family: 'Cormorant Upright'; line-height: 1; cursor: pointer; color: black; transition: all 1s; [/class] [class name=selected] color: #dc5c54; pointer-events: none; [/class] [class name=divide] width: 100%; height: 5px; margin-top: 5px; margin-left: -10%; padding-left: 10%; background-image: linear-gradient(to right, rgba(76, 102, 138, 0), rgb(76, 102, 138) 20%); [/class] [class name=contentholder] position: relative; margin: 0 15px; flex: 1; [/class] [class name=content] position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: initial; [/class] [class name=scroll] position: relative; width: 100%; height: 100%; padding-right: 250px; overflow-y: scroll; overflow-x: hidden; font-family: 'Philosopher'; font-size: 1.1em; color: black; [/class] [script=tab] hide content show Essentials [/script] [script class=tab version=2 on=click] (removeClass "selected" "tab") (addClass "selected") (fadeOut 1000 "content") (fadeIn 1000 (getText)) [/script] [div class=root] [div class=name][div class=nameinside]Emily Chevalier[/div][/div] [div class=flex] [div class=image][/div] [div class=container] [div class=tabs] [div class="tab selected"]Essentials[/div][div class=tab]Persona[/div][div class=tab]Physique[/div][div class=tab]Additional[/div] [/div] [div class=divide][/div] [div class=contentholder] [div class="content Essentials"][div class=scroll] Name:
Emily Chevalier​

Aliases:
The Receptionist
The Spellweaver​

Age:
20​

Gender:
Female​

Race:
Fellow​
an Elven Variant. No one's actually quite sure what happened to turn them into that, nor what they should actually be called, but they started appearing. All that they know is that they are more in line with humans than elves are.​

Class:
Spellweaver​
a type of Arcanist who creates spell through the use of keywords and phrases carrying a concept within a chant​
[/div][/div] [div class="content Persona"][div class=scroll] Sexuality:
Heterosexual​

High Concept:
She just wants to live easily, fashionably, and happily as she further her endeavors in Arcane Magic.​

Character Alignment:
Neutral Good​

Organizations\Affiliations:
Guild of Heroes​

Personality:
For the most part, Emily is a nice girl, if you don't do anything to provoke a reaction from her. She just wants to relax and have a good life in fashion, reading books to boost her arcane abilities. She's only really here for the books and for the salary, but she knows when to do her job properly. She doesn't really pay much mind to any of her consequences, since she can deal with any problem with magic that could be considered extreme for many in the realm. In anycase, don't damage her hair, or her outfit, or she would literally set the world on fire. Also don't touch the ears, or the earring, its sensitive. She does love a good gossip though.​

Backstory:
Emily Chevalier was born in a fairly well off family. Most of her family members were civil officials in the kingdom, often times working alongside court mages. While her life wasn't as luxurious as a noble's, she was given quite the amount of care. From the very beginning, it was shown that she had an aptitude for magic manipulation, and quickly had tutors showing her the way to use magic. Her talent for magic was quite remarkable, and soon she was taught the more higher level theories of magic.

One day a family member brought home a friend, a court mage, who decided to impress Emily with something of a parlor trick, who was 8 at the time. Being an arcanist himself, he showed her a spectacle of magic, something that shouldn't be possible using any formalized magic systems. Of course Emily didn't know that. Thoroughly impressed, she asked what it was. "Arcane Magic. Magic that uses the most fundamental parts of pure magic, parts that exist in all magic." And just like that, she became interested in Arcane Magic, and when she started to learn how to do it, she came across Spellweaving, a type of Arcane Magic.

Even though this all happened to her, she did live a life that a normal girl would, socializing, shopping, and just being a girl in general. Eventually, when her Spellweaving reach a point where the tutors weren't able to keep up, she decided to join the Guild of Heroes to continue her growth. Her first year was quite difficult on her, since she didn't like the quests. So after talking with the Guildmaster, it was determined that she would become the Proctor for combat exams and the Receptionist of the Guild, something that she was surprisingly quite fine with. With that, for a few years she grew her magic and welcomed other members into the guild, becoming a well known face in the Guild.​
[/div][/div] [div class="content Physique"][div class=scroll] Weapons & Armor:
Arcanist's Uniform
Yep. That's about it. She had it custom made from a tailor that often did the Guild's apparel. She designed it to fit her tastes. The original version of the uniform originally didn't offer much protection, so showing that tummy wouldn't hurt, would it? It comes with a nice cape. She likes that cap too. All of it is sewn with magical fibers that make it much more durable for combat.​

Items & Personal Belongings:
Earing
A common sight on fellows.​
Money
Oh how much she loves her money, oh how quickly it is used to buy new stuff.​
Books
The source of her knowledge. She has a variety of books, covering practically anything and everything she's interested in.​

Skills & Abilities:
Fashionable Gal
Trendy!!​
Good Pep Talk
"You're gonna go out there! You're gonna get that princess! You're gonna kiss her! You're gonna make out with her! Now go out there, accept that request so that I won't have to keep hearing you pine over her!"​
Receptionist
She deals with all sorts of people. She's most often the first person newcomers to the guild meet. She may play a minor role, but she handles a lot of the things for Fort Black when the Guildmaster can't.​
Arcanist
By her very nature, she has a deeply rooted understanding of the fundamentals of magic, although it can be confusing to others.​
Spellweaver
Because of the way her magic is formed, she is an avid reader, reading anything and everything she likes. She can engage in conversations about the most difficult topics regarding the state of mind.​

Spells & Magic:
Spellweaving
A type of Arcane Magic that involves the mixing of keywords and phrases carrying concepts and notions to invoke the phenomenon of magic. Because it is reliant on words and phrases carrying inherent meaning, Emily gets stronger the more she reads and the more she understands the underlying concepts. Unfortunately she can't just say random words and hope that something happens, she must actually understand the concepts behind each word and how they all interact to. There are certain words that carry more weight than others such as King, God, Star, Moon, etc. She can perform practically any magic as long as she has a firm understanding for it.​
Elemental Magic
She has a firm base in the fundamentals of elemental magic, so her spellweaving chants invoking these sorts of magic can be shortened up to a point.​

Weaknesses:
Difficulties of Language
She suffers from the problem that all chant magic have, chant duration.​
A Mage
She's squishy if you can make it past her magic.​
Intoxicated Chaos
Try not to get her drunk. Her magic becomes more volatile.​
[/div][/div] [div class="content Additional"][div class=scroll] Hobbies:
Shopping
Gossiping
Reading​

Quote\s:
"*yawn*, I'll be over there if you need me to blow something up or siege something else."
"A mage? You severely underestimate me."​

Theme:
[/div][/div] [/div] [/div] [/div] [/div]
 
Royal Character Card

This is a CS I made for a A Guild of Heroes: Song of Champions I'm currently in and very very very hyped about. This CS was quite nice and easy, especially after having done another CS, which you can find in the new BBCode Workshop I'm a part of   ¬ FEVERDREAMS ⸥ alt ? sugar (psst, go check it out. It's got far more advanced code than here does). This does use the old image ratio values, so do remember to change those and fit it to your needs.

NameThis is a quick and easy flexbox positioning + tabs, nothing special. The only thing of note would probably be the name. Here is the code for the name:
Code: 
[class name=name]
	height: 3.5vh;
	width: 100%;
	position: absolute;
	top: calc(82vh - 3.5vh + 1px);
	left: 0;
	background-image: linear-gradient(to bottom, rgb(76, 102, 138) 30%, rgba(218, 212, 218, .5) 30%, rgba(218, 212, 218, .5) 50%, #313253 50%);
	background-position: bottom;
	background-size: 100% 3.5vh;
	background-repeat: no-repeat;
	z-index: 5;
[/class]

[class name=nameinside]
	position: absolute;
	bottom: 0;
	right: 1vw;
	height: auto;
	max-width: 100%;
	z-index: 6;
	font-size: 13.25vh;
	font-family: 'Cormorant Upright';
	line-height: .77;
	padding-bottom: 3.5vh;
	text-align: right;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(to bottom, #a52b4e, #e73359, #e73359, #a52b4e);
[/class]
The positioning of it is quite simple, as long as we know the height of the image (which we set to 82vh), we can get it to align to the bottom of our 82vh. It will also be clean on mobile, as instead of a bottom: 0, we gave it a definitive position. The thing you're probably most interested in is how I got the gradient of the text to work. This makes use of a very special property called background-clip, which decides how the background image gets displayed. In this case, we set it to text, so the text is in fact the windows to the background image. I then just set the background image to a linear-gradient, and viola, we have a nice looking name text that has red on the inside and dark red at the edges. You can also use this for images.

Here is the full code:
Code: 
[nobr]
[class name=root]
	width: 100%;
	height: auto;
	position: relative;
	background-image: url('https://orig00.deviantart.net/f69c/f/2013/081/9/3/da_brocade_custom_box_background_by_gasara-d5ag4ls.gif');
	background-color: rgb(218, 212, 218);
	background-blend-mode: multiply;
	overflow: hidden;
	--image-w: 739;
	--image-h: 1374;
[/class]

[class name=flex]
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: stretch;
	align-items: start;
[/class]

[class name=image]
	height: 82vh;
	width: calc( var(--image-w)/var(--image-h) * 82vh);
	background-image: url('https://www.rpnation.com/media/3822838135964a2c83e4ec0027-1499767526_waifu2x_art_noise3_tta_1-png.36357/full');
	background-size: contain;
	background-position: center bottom;
[/class]

[class name=name]
	height: 3.5vh;
	width: 100%;
	position: absolute;
	top: calc(82vh - 3.5vh + 1px);
	left: 0;
	background-image: linear-gradient(to bottom, rgb(76, 102, 138) 30%, rgba(218, 212, 218, .5) 30%, rgba(218, 212, 218, .5) 50%, #313253 50%);
	background-position: bottom;
	background-size: 100% 3.5vh;
	background-repeat: no-repeat;
	z-index: 5;
[/class]

[class name=nameinside]
	position: absolute;
	bottom: 0;
	right: 1vw;
	height: auto;
	max-width: 100%;
	z-index: 6;
	font-size: 13.25vh;
	font-family: 'Cormorant Upright';
	line-height: .77;
	padding-bottom: 3.5vh;
	text-align: right;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(to bottom, #a52b4e, #e73359, #e73359, #a52b4e);
[/class]

[class name=container]
	min-height: 500px;
	height: 65vh;
	min-width: 300px;
	position: relative;
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	justify-content: stretch;
	align-items: stretch;
[/class]

[class name=tabs]
	position: relative;
	margin-top: 5vmin;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	font-size: initial;
[/class]

[class name=tab]
	position: relative;
	margin-right: 1.5vw;
	font-size: calc(1em + 3vh);
	font-family: 'Cormorant Upright';
	line-height: 1;
	cursor: pointer;
	color: black;
	transition: all 1s;
[/class]

[class name=selected]
	color: #dc5c54;
	pointer-events: none;
[/class]

[class name=divide]
	width: 100%;
	height: 5px;
	margin-top: 5px;
	margin-left: -10%;
	padding-left: 10%;
	background-image: linear-gradient(to right, rgba(76, 102, 138, 0), rgb(76, 102, 138) 20%);
[/class]

[class name=contentholder]
	position: relative;
	margin: 0 15px;
	flex: 1;
[/class]

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

[class name=scroll]
	position: relative;
	width: 100%;
	height: 100%;
	padding-right: 250px;
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: 'Philosopher';
	font-size: 1.1em;
	color: black;
[/class]

[script=tab]
hide content
show Essentials
[/script]

[script class=tab version=2 on=click]
(removeClass "selected" "tab")
(addClass "selected")
(fadeOut 1000 "content")
(fadeIn 1000 (getText))
[/script]

[comment][font=Cormorant Upright]font[/font][font=Philosopher]font[/font][/comment]

[div class=root]
	[div class=name][div class=nameinside]Emily Chevalier[/div][/div]
	[div class=flex]
		[div class=image][/div]
		[div class=container]
			[div class=tabs]
				[div class="tab selected"]Essentials[/div][div class=tab]Persona[/div][div class=tab]Physique[/div][div class=tab]Additional[/div]
			[/div]
			[div class=divide][/div]
			[div class=contentholder]
				[div class="content Essentials"][div class=scroll]
Essentials
				[/div][/div]

				[div class="content Persona"][div class=scroll]
Persona
				[/div][/div]

				[div class="content Physique"][div class=scroll]
Physique
				[/div][/div]

				[div class="content Additional"][div class=scroll]
Additional
				[/div][/div]
			[/div]
		[/div]
	[/div]
[/div]
[/nobr]
 
thank you for allowing these to be freebies

even if i am a programmer, i am not used to BBCode, and i don't really have the time.

python and c# are better anyway
 
question about the royal charcter card

i've been using and altering some of the code, but i cant get my personal image to work. how to fix?
 
[st: 8917214, member: 34809"]what do you mean specifically?[/QUOTE]
For the character on the left, i'm trying to use my own image.

https://www.rpnation.com/media/123213123123-png.36557/full

However, whenever I put into the code here

Code: 
[class name=image]

    height: 82vh;

    width: calc( var(--image-w)/var(--image-h) * 82vh);

    background-image: url('https://www.rpnation.com/media/123213123123-png.36557/full');

    background-size: contain;

    background-position: center bottom;

[/class]

The image seems to break and give my red Xs
 
Are you using RTE? You have to turn it off. The editor might be reading the link as an actual link instead of an image.

Fyuri said:
What is the RTE?
RTE stands for Rich Text Editor. It is a text editor that allows a person to see a "live" preview in the editor itself (for some things, such as built-in fonts, font color, etc).

How do I turn off the RTE?
You can easily swap back and forth between the RTE and the BBCode Editor; just click on the cog wheel! It will save this setting until you click it and swap it back.
Click to expand...
 
krekireftw said:
I've toggled it off, but it doesn't seem to work.
Any chance it maintain's it's rich elements even after toggle?
Click to expand...
Usually isn't, unless the code gets borked by the rich text. Does the image class still look the same?
 
Code: 
[nobr]
[class name=root]
    width: auto;
    height: auto;
    position: relative;
    background-image: url('https://www.wallpixa.com/wp-content/uploads/2018/03/Abstract-4k-background-HD-image-gray-hexagon-lost-between-black-ones-53075-1920x1200-1920x1200.jpg');
    background-color: rgb(255, 255, 255);
    background-blend-mode: multiply;
    overflow: hidden;
    --image-w: 739;
    --image-h: 1374;
[/class]

[class name=flex]
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    align-items: start;
[/class]

[class name=image]
    height: 82vh;
    width: calc( var(--image-w)/var(--image-h) * 82vh);
    background-image: url('https://www.rpnation.com/media/123213123123-png.36557/full');
    background-size: contain;
    background-position: center bottom;
[/class]

[/class]

This is what i've got regarding images and such. Is there anywhere I may need to adjust image sizes?
 
krekireftw said:
Code: 
[nobr]
[class name=root]
    width: auto;
    height: auto;
    position: relative;
    background-image: url('https://www.wallpixa.com/wp-content/uploads/2018/03/Abstract-4k-background-HD-image-gray-hexagon-lost-between-black-ones-53075-1920x1200-1920x1200.jpg');
    background-color: rgb(255, 255, 255);
    background-blend-mode: multiply;
    overflow: hidden;
    --image-w: 739;
    --image-h: 1374;
[/class]

[class name=flex]
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    align-items: start;
[/class]

[class name=image]
    height: 82vh;
    width: calc( var(--image-w)/var(--image-h) * 82vh);
    background-image: url('https://www.rpnation.com/media/123213123123-png.36557/full');
    background-size: contain;
    background-position: center bottom;
[/class]

[/class]

This is what i've got regarding images and such. Is there anywhere I may need to adjust image sizes?
Click to expand...
Ahh, I think I figured it out. You had the image privacy set so that only you could see it, so it wasn't rendering when it went through the proxies. You can adjust the image sizes using --image-w and --image-h
 
Alteras said:
Ahh, I think I figured it out. You had the image privacy set so that only you could see it, so it wasn't rendering when it went through the proxies. You can adjust the image sizes using --image-w and --image-h
Click to expand...
That fixxed it. I'm just getting a checkerboard going on now.
 
what you want to change is background-size:

It can take percentages.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 4 (members: 0, guests: 4)

Similar threads

CHUUYAS_HAT
Help What images to add in BBCode - FIXED
Replies
5
Views
175
Otto Levin
Otto Levin
DaydreamNarrator
Closed found the solution
Replies
0
Views
70
DaydreamNarrator
DaydreamNarrator
Bill123456789
Help How do I make code for Japanese
Replies
2
Views
132
Uxie
Uxie
Back
Top