CHUUYAS_HAT
A Swing For One, A Swing For Two
I didn't name mine to be traditional >.<
-
This section is for roleplays only.
ALL interest checks/recruiting threads must go in the Recruit Here section.
Please remember to credit artists when using works not your own.
Fandom Exeggutor Contest OOC
- Thread starter CloudySkyLoftyMoon
- Start date
Extra123
Junior Member
Fair enough; I just like giving nicknames.
Extra123
Junior Member
We don't need to be using codes for the rp, do we? I um... don't exactly know how to do fancy codes and the like well...
CHUUYAS_HAT
A Swing For One, A Swing For Two
I'm not sure which pokemon to use in battle round because I have a feeling ____ will be having loads of weakness overpowering em
CHUUYAS_HAT
A Swing For One, A Swing For Two
that would be absurd to be a need!
Extra123
Junior Member
I've decided on my appeals mon, and am between two pokemon for the battle round.
CHUUYAS_HAT
A Swing For One, A Swing For Two
appeals round, honestly I think I just want good impressions, not too worried.
I have 3 - one is too common in tournaments so no, but the two might just have too many weaknesses...
I am depending on ___ for now
CHUUYAS_HAT
A Swing For One, A Swing For Two
This is like one of the 3 rp's that caught my attention from the first second- but now I'm too energetic?! 
CloudySkyLoftyMoon
『Teamate』
So there are two options on this one. I mentioned it in the Interest Check but this RP is actually apart of a larger verse, so there's a 'main' RP that you could certainly join if you'd like to do more than contests.
Alternatively, you can stick to just contests and other events. I created these side-threads to allow other people to join the RP for episodic events like contests, tournaments, etc.
So to that ends, I've already got an entire list of Contest dates and themes lined up for the future.
Nope, absolutely no need for it. Though if you'd like something simple like mine I don't mind sharing the code.
CloudySkyLoftyMoon
『Teamate』
If you'd like to use my code then here's the template for it.
I left in the details for my own character mostly so I could illustrate how the code is used. For a beginner, the only parts you need to concern yourself with are:
These are close to the top, you shouldn't need to scroll too far to find them. The variables are labeled but a few might require explanation.
I don't recommend changing any of the sizes, but feel free to change the colors. BBcode (the code used in the forum) accepts three (technically four) ways to declare a color: hex codes, HSL (Hue, Saturation, Lightness), RGB (Red, Green, Blue), and colors names. The first three are the preferred since they allow you a more customizable color and the recommended way to use them is to google search "Hex-code for Green" or something similar. Usually, you'll get something like this:
Remember you need the '#' sign followed by six digits for hex-code to work.
e.g. #276221
You can use color names like Red, Blue, Green, but the shade might not be exactly what you want.
Back to the variables
You might be wondering why this is three digits instead of six, and the answer is #fff is short-hand for #ffffff. When all the digits are the same you can get away with just the first three digits (sorta).
Now just below all those are the Pokemon on the side-bar.
We use variables for these and you can declare a variable by doing:
--variable_name: variable_value;
example:
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
This is a variable called 'PyrImg', which is short for Pyrrha Image, and the value is url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png) which is a url link to Jangmo-o's sprite.
The next variables at the Hex-code colors for Pyrrha's Primary Type and Secondary Type, a variable for her Gender, and a url link to the item she's holding.
Since I have more than 6 Pokemon I find it easier to declare the details for all my OCs pokemon and then copy-paste them into the variables called P1, P2, P3, etc.
Those are the values actually used in the code and represent their position in the side-bar, P1 is first Pokemon, P2 is second Pokemon, etc.
You can see that here:
So Pyrrha's variables go into P1 to put her in slot one, and P2 is Halay, my OC's Houndour.
You can, of course, skip the extra variables and directly add your pokemon's information to P1, P2, etc. You can even skip the colors if it makes things easier, just grab a sprite/image and put that link between the url parantheses.
Once you're done all your edits, save it somewhere so you can re-use it as often as you'd like. You can remove the Lorem Ipsum dummy text and put your actual post there.
This is a kind of a lot, so if you'd like I'm totally willing to edit things for you and then hand over the finished code so you can skip the hassle. ^^
You can also check out Uxie's great guide to getting started with BBCode:
www.rpnation.com
Code:
[div=/*SECTION - Design Container */
box-sizing: border-box; padding: 2.5%; position: relative;
display: flex;
width: 100%; height: var(--height);
background: repeat center/auto var(none);
cursor: url(https://archives.bulbagarden.net/media/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png), pointer;
/*ANCHOR - Font Sizes */
--fs-header: calc(var(--fs-body) * 1.5);
--fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em);
--fs-mini: calc(var(--fs-body) * 0.6);
/*ANCHOR - Code Size */
--height: 800px;
/*ANCHOR - Accent Color */
--accent-c: #A27EFA;
--shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000;
/*ANCHOR - Text Color */
color: #fff;
/*ANCHOR - Character Image */
--char-img: url(https://i.imgur.com/mDaFSk0.png);
/*SECTION - Pokémon */
/*ANCHOR - Pyrrha */
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
--PyrPrimType: #A27EFA;
--PyrSecType: #7D58D6;
--PyrGender: var(--female);
--PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);
/*ANCHOR - Halay-Alae */
--HalImg: url(https://play.pokemonshowdown.com/sprites/gen5/houndour.png);
--HalPrimType: #A29288;
--HalSecType: #9C531F;
--HalGender: var(--female);
--HalItem: url();
/*ANCHOR - Pari */
--PariImg: url(https://play.pokemonshowdown.com/sprites/gen5/munna.png);
--PariPrimType: #FA92B2;
--PariSecType: #A13959;
--PariGender: var(--female);
--PariItem: url();
/*ANCHOR - Ciera */
--CieImg: url(https://play.pokemonshowdown.com/sprites/gen5/bounsweet.png);
--CiePrimType: #A7DB8D;
--CieSecType: #57913A;
--CieGender: var(--female);
--CieItem: url();
/*ANCHOR - L'Basseau */
--SusuImg: url(https://play.pokemonshowdown.com/sprites/gen5/surskit.png);
--SusuPrimType: #C6D16E;
--SusuSecType: #506899;
--SusuGender: var(--female);
--SusuItem: url();
/*ANCHOR - Kasriel */
--KasImg: url(https://play.pokemonshowdown.com/sprites/gen5/zigzagoon-galar.png);
--KasPrimType: #A29288;
--KasSecType: #6D6D4E;
--KasGender: var(--male);
--KasItem: url();
/*ANCHOR – Istha */
--IstImg: url(https://play.pokemonshowdown.com/sprites/gen5-shiny/feebas.png);
--IstPrimType: #9DB7F5;
--IstSecType: #4A66AB;
--IstGender: var(--female);
--IstItem: url();
/*ANCHOR – Jecroix */
--JeImg: url(https://play.pokemonshowdown.com/sprites/gen5/drifloon.png);
--JePrimType: #A284A2;
--JeSecType: #58789B;
--JeGender: var(--male);
--JeItem: url();
/*ANCHOR - P1 */
--P1Img: var(--PyrImg);
--P1PrimType: var(--PyrPrimType);
--P1SecType: var(--PyrSecType);
--P1Gender: var(--PyrGender);
--P1Item: var(--PyrItem);
/*ANCHOR - P2 */
--P2Img: var(--HalImg);
--P2PrimType: var(--HalPrimType);
--P2SecType: var(--HalSecType);
--P2Gender: var(--HalGender);
--P2Item: var(--HalItem);
/*ANCHOR - P3 */
--P3Img: var(--JeImg);
--P3PrimType: var(--JePrimType);
--P3SecType: var(--JeSecType);
--P3Gender: var(--JeGender);
--P3Item: var(--JeItem);
/*ANCHOR - P4 */
--P4Img: var(--CieImg);
--P4PrimType: var(--CiePrimType);
--P4SecType: var(--CieSecType);
--P4Gender: var(--CieGender);
--P4Item: var(--CieItem);
/*ANCHOR - P5 */
--P5Img: var(--SusuImg);
--P5PrimType: var(--SusuPrimType);
--P5SecType: var(--SusuSecType);
--P5Gender: var(--SusuGender);
--P5Item: var(--SusuItem);
/*ANCHOR - P6 */
--P6Img: var(--IstImg);
--P6PrimType: var(--IstPrimType);
--P6SecType: var(--IstSecType);
--P6Gender: var(--IstGender);
--P6Item: var(--IstItem);
/*!SECTION */]
[div=/*SECTION - Post Container */
box-sizing: border-box; margin: auto; height: 95%; width: 88%;
background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%);
border-radius: 15px; border: solid 2px #fff;
position: relative;]
[div=/*SECTION - Char Img */
box-sizing: border-box;
border-radius: 100px; box-shadow: var(--shadow);
background: var(--char-img) no-repeat center/90%;
height: clamp(55px, calc(4.5em + 5%), 125px); aspect-ratio: 1;
position: absolute; left: -50px; top: 75px; z-index: 2;
/*!SECTION */][/div]
[div=/*SECTION - Header */
border: 1px solid transparent; border-radius: 15px;
position: absolute; top: 0px;
box-sizing: border-box;
max-width: 100%; min-width: 250px; height: 125px; width: 100%;
line-height: 1.5; letter-spacing: 1px;
margin: 0px auto; padding: 0px;
display: flex; flex-direction: column;
box-shadow: 0px 2px 2.5px var(--accent-c);
font-family: Laila, Georgia;
background: linear-gradient(350deg, rgba(255,255,255,0.6) 2.5%, rgba(22,176,238,0.6) 60%);]
[div=/*ANCHOR - Location */
box-sizing: border-box; font-size: var(--fs-header); margin: auto; padding-left: 50px;] PokéCenter [div=box-sizing: border-box; font-size: var(--fs-mini);] Seafolk Village [Poni Island], Alola[/div][/div]
[div=/*ANCHOR - Date/Time & Mention/Interactions */
box-sizing: border-box; font-size: var(--fs-mini); margin: -15px 0 20px 0; padding-left: 55px;]August, 11[div=box-sizing: border-box; font-variant-position: super; display: inline;]th[/div] | 8:15 a.m. [/div]
[div=/*ANCHOR - Weather Icon */
box-sizing: border-box;
padding: 0px;
/* List
Harsh Sun
fa-solid fa-sun
Regular Sun
fa-regular fa-sun
Clear Night
fa-solid fa-moon
Snow
fa-solid fa-snowflake
Foggy
fa-solid fa-smog
Windy
fa-solid fa-wind
Cloudy
fa-solid fa-cloud-sun
fa-solid fa-cloud-moon
Thunder Storm Bolt
fa-solid fa-cloud-bolt
Sparse Rain
fa-solid fa-cloud-sun-rain
fa-solid fa-cloud-moon-rain
Heavy Rain
fa-solid fa-cloud-showers-heavy */
/*ANCHOR - Sun/Moon Colors */
--sun-color: #FFFD37;
--evening-sun-color: #FFA500;
--moon-color: #dcdcdc;
--icon-f-s: 2em;
--r-r: rotate(-45deg);
color: var(--evening-sun-color);
font-size: var(--icon-f-s);
font-weight: bold;
line-height: 1;
transform: var(--r-r);
position: absolute; top: max(5%, 5px); right: min(2.5%, 30px);][fa]fa-regular fa-sun[/fa][/div]
[div=/*!SECTION */][/div][/div]
[div=/*SECTION - Pokémon Section */
--p-height: 45px;
--p-micro: calc(var(--p-height)/2.5);
--bg-color: transparent;
--p-size: 150%;
--held-right: -7.5px;
--gen-left: -7.5px;
box-sizing: border-box; display: flex; width: calc(10px + var(--p-height)); position: absolute; bottom: 20%; left: -30px; font-size: var(--fs-mini); justify-content: space-evenly; border-radius: 15px; flex-flow: column nowrap; gap: 5px; align-items: center;
background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%);
box-shadow: var(--shadow);
/*ANCHOR Gender Images */
--male: #89CFF0; url(https://i.imgur.com/4FI7ot0.png);
--female: #F4C2C2; url(https://i.imgur.com/wpBhCjV.png);]
[div=/*SECTION - Pokemon 1 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P1Img) var(--P1PrimType); border: 2px solid var(--P1SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P1PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P1Gender); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P1Item) var(--bg-color); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 2 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P2Img) var(--P2PrimType); border: 2px solid var(--P2SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P2PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P2Gender); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P2Item) var(--bg-color); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 3 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P3Img) var(--P3PrimType); border: 2px solid var(--P3SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P3PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P3Gender); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P3Item) var(--bg-color); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 4 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P4Img) var(--P4PrimType); border: 2px solid var(--P4SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P4PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P4Gender); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P4Item) var(--bg-color); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 5 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P5Img) var(--P5PrimType); border: 2px solid var(--P5SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P5PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P5Gender); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P5Item) var(--bg-color); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*SECTION - Pokemon 6 */
box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P6Img) var(--P6PrimType); border: 2px solid var(--P6SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P6PrimType);]
[div=/*ANCHOR - Gender */
background: no-repeat center/85% var(--P6Gender); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div]
[div=/*ANCHOR - Held Item */
background: no-repeat center/85% var(--P6Item) var(--bg-color); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div]
[/div]
[div=/*!SECTION */ display: none;][/div][/div]
[div=/*ANCHOR - Text Section */
--esther-c: #f05656;
--shayan-c: #b22222;
border: transparent;
position: absolute; top: 175px;
box-sizing: border-box;
padding: 15px 25px 15px 50px;
font-size: var(--fs-body);
line-height: 1.5; letter-spacing: 1px; height: 75%;
display: block;
overflow: scroll;
scrollbar-width: none;
white-space: collapse; text-align: justify;
font-family: 'Nunito', Georgia;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat.
Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur.
[/div]
[div=/*!SECTION */][/div][/div]
[div=/*!SECTION */][/div][/div]I left in the details for my own character mostly so I could illustrate how the code is used. For a beginner, the only parts you need to concern yourself with are:
Code:
/*ANCHOR - Font Sizes */
--fs-header: calc(var(--fs-body) * 1.5);
--fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em);
--fs-mini: calc(var(--fs-body) * 0.6);
/*ANCHOR - Code Size */
--height: 800px;
/*ANCHOR - Accent Color */
--accent-c: #b42222;
--shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000;
/*ANCHOR - Text Color */
color: #fff;
/*ANCHOR - Character Image */
--char-img: url(https://i.imgur.com/mDaFSk0.png);These are close to the top, you shouldn't need to scroll too far to find them. The variables are labeled but a few might require explanation.
I don't recommend changing any of the sizes, but feel free to change the colors. BBcode (the code used in the forum) accepts three (technically four) ways to declare a color: hex codes, HSL (Hue, Saturation, Lightness), RGB (Red, Green, Blue), and colors names. The first three are the preferred since they allow you a more customizable color and the recommended way to use them is to google search "Hex-code for Green" or something similar. Usually, you'll get something like this:
Remember you need the '#' sign followed by six digits for hex-code to work.
e.g. #276221
You can use color names like Red, Blue, Green, but the shade might not be exactly what you want.
Back to the variables
Text color
Is of course, the color of the text and #fff (what it's set to right now) is the hex-code for white.You might be wondering why this is three digits instead of six, and the answer is #fff is short-hand for #ffffff. When all the digits are the same you can get away with just the first three digits (sorta).
Accent Color
Is all shadows and gradients in the code, it's currently set to red because that's my characters color and here's what it would look like if I changed the accent color to purple:
Code:
--accent-c: #A27EFA; (This is the Hex-code for the shade of purple I'm using)Character Image
Called char-img in the code, this is the URL link to whatever picture represents your character. The code works best with direct links (links that end in .png or .jpeg) and as long as you put your link between the parentheses.Now just below all those are the Pokemon on the side-bar.
Code:
/*ANCHOR - Pyrrha */
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
--PyrPrimType: #A27EFA;
--PyrSecType: #7D58D6;
--PyrGender: var(--female);
--PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);We use variables for these and you can declare a variable by doing:
--variable_name: variable_value;
example:
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
This is a variable called 'PyrImg', which is short for Pyrrha Image, and the value is url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png) which is a url link to Jangmo-o's sprite.
The next variables at the Hex-code colors for Pyrrha's Primary Type and Secondary Type, a variable for her Gender, and a url link to the item she's holding.
Since I have more than 6 Pokemon I find it easier to declare the details for all my OCs pokemon and then copy-paste them into the variables called P1, P2, P3, etc.
Those are the values actually used in the code and represent their position in the side-bar, P1 is first Pokemon, P2 is second Pokemon, etc.
You can see that here:
Code:
/*ANCHOR - P1 */
--P1Img: var(--PyrImg);
--P1PrimType: var(--PyrPrimType);
--P1SecType: var(--PyrSecType);
--P1Gender: var(--PyrGender);
--P1Item: var(--PyrItem);
/*ANCHOR - P2 */
--P2Img: var(--HalImg);
--P2PrimType: var(--HalPrimType);
--P2SecType: var(--HalSecType);
--P2Gender: var(--HalGender);
--P2Item: var(--HalItem);So Pyrrha's variables go into P1 to put her in slot one, and P2 is Halay, my OC's Houndour.
You can, of course, skip the extra variables and directly add your pokemon's information to P1, P2, etc. You can even skip the colors if it makes things easier, just grab a sprite/image and put that link between the url parantheses.
Once you're done all your edits, save it somewhere so you can re-use it as often as you'd like. You can remove the Lorem Ipsum dummy text and put your actual post there.
This is a kind of a lot, so if you'd like I'm totally willing to edit things for you and then hand over the finished code so you can skip the hassle. ^^
You can also check out Uxie's great guide to getting started with BBCode:
Tutorial - 𝚌𝚛𝚊𝚜𝚑 𝚌𝚘𝚞𝚛𝚜𝚎 💥 — a guide to using code
boom! it's crash course title body ----title---- crash course ----header---- ----* * * text starts here---- hi, it's me again! i'm back! let's talk asap... would you do me a favour and read this ( . .) ----header end---- ----body text---- ----* * * text starts...
www.rpnation.com
CHUUYAS_HAT
A Swing For One, A Swing For Two
This is why you're the bestIf you'd like to use my code then here's the template for it.
Code:[div=/*SECTION - Design Container */ box-sizing: border-box; padding: 2.5%; position: relative; display: flex; width: 100%; height: var(--height); background: repeat center/auto var(none); cursor: url(https://archives.bulbagarden.net/media/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png), pointer; /*ANCHOR - Font Sizes */ --fs-header: calc(var(--fs-body) * 1.5); --fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em); --fs-mini: calc(var(--fs-body) * 0.6); /*ANCHOR - Code Size */ --height: 800px; /*ANCHOR - Accent Color */ --accent-c: #A27EFA; --shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000; /*ANCHOR - Text Color */ color: #fff; /*ANCHOR - Character Image */ --char-img: url(https://i.imgur.com/mDaFSk0.png); /*SECTION - Pokémon */ /*ANCHOR - Pyrrha */ --PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png); --PyrPrimType: #A27EFA; --PyrSecType: #7D58D6; --PyrGender: var(--female); --PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png); /*ANCHOR - Halay-Alae */ --HalImg: url(https://play.pokemonshowdown.com/sprites/gen5/houndour.png); --HalPrimType: #A29288; --HalSecType: #9C531F; --HalGender: var(--female); --HalItem: url(); /*ANCHOR - Pari */ --PariImg: url(https://play.pokemonshowdown.com/sprites/gen5/munna.png); --PariPrimType: #FA92B2; --PariSecType: #A13959; --PariGender: var(--female); --PariItem: url(); /*ANCHOR - Ciera */ --CieImg: url(https://play.pokemonshowdown.com/sprites/gen5/bounsweet.png); --CiePrimType: #A7DB8D; --CieSecType: #57913A; --CieGender: var(--female); --CieItem: url(); /*ANCHOR - L'Basseau */ --SusuImg: url(https://play.pokemonshowdown.com/sprites/gen5/surskit.png); --SusuPrimType: #C6D16E; --SusuSecType: #506899; --SusuGender: var(--female); --SusuItem: url(); /*ANCHOR - Kasriel */ --KasImg: url(https://play.pokemonshowdown.com/sprites/gen5/zigzagoon-galar.png); --KasPrimType: #A29288; --KasSecType: #6D6D4E; --KasGender: var(--male); --KasItem: url(); /*ANCHOR – Istha */ --IstImg: url(https://play.pokemonshowdown.com/sprites/gen5-shiny/feebas.png); --IstPrimType: #9DB7F5; --IstSecType: #4A66AB; --IstGender: var(--female); --IstItem: url(); /*ANCHOR – Jecroix */ --JeImg: url(https://play.pokemonshowdown.com/sprites/gen5/drifloon.png); --JePrimType: #A284A2; --JeSecType: #58789B; --JeGender: var(--male); --JeItem: url(); /*ANCHOR - P1 */ --P1Img: var(--PyrImg); --P1PrimType: var(--PyrPrimType); --P1SecType: var(--PyrSecType); --P1Gender: var(--PyrGender); --P1Item: var(--PyrItem); /*ANCHOR - P2 */ --P2Img: var(--HalImg); --P2PrimType: var(--HalPrimType); --P2SecType: var(--HalSecType); --P2Gender: var(--HalGender); --P2Item: var(--HalItem); /*ANCHOR - P3 */ --P3Img: var(--JeImg); --P3PrimType: var(--JePrimType); --P3SecType: var(--JeSecType); --P3Gender: var(--JeGender); --P3Item: var(--JeItem); /*ANCHOR - P4 */ --P4Img: var(--CieImg); --P4PrimType: var(--CiePrimType); --P4SecType: var(--CieSecType); --P4Gender: var(--CieGender); --P4Item: var(--CieItem); /*ANCHOR - P5 */ --P5Img: var(--SusuImg); --P5PrimType: var(--SusuPrimType); --P5SecType: var(--SusuSecType); --P5Gender: var(--SusuGender); --P5Item: var(--SusuItem); /*ANCHOR - P6 */ --P6Img: var(--IstImg); --P6PrimType: var(--IstPrimType); --P6SecType: var(--IstSecType); --P6Gender: var(--IstGender); --P6Item: var(--IstItem); /*!SECTION */] [div=/*SECTION - Post Container */ box-sizing: border-box; margin: auto; height: 95%; width: 88%; background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%); border-radius: 15px; border: solid 2px #fff; position: relative;] [div=/*SECTION - Char Img */ box-sizing: border-box; border-radius: 100px; box-shadow: var(--shadow); background: var(--char-img) no-repeat center/90%; height: clamp(55px, calc(4.5em + 5%), 125px); aspect-ratio: 1; position: absolute; left: -50px; top: 75px; z-index: 2; /*!SECTION */][/div] [div=/*SECTION - Header */ border: 1px solid transparent; border-radius: 15px; position: absolute; top: 0px; box-sizing: border-box; max-width: 100%; min-width: 250px; height: 125px; width: 100%; line-height: 1.5; letter-spacing: 1px; margin: 0px auto; padding: 0px; display: flex; flex-direction: column; box-shadow: 0px 2px 2.5px var(--accent-c); font-family: Laila, Georgia; background: linear-gradient(350deg, rgba(255,255,255,0.6) 2.5%, rgba(22,176,238,0.6) 60%);] [div=/*ANCHOR - Location */ box-sizing: border-box; font-size: var(--fs-header); margin: auto; padding-left: 50px;] PokéCenter [div=box-sizing: border-box; font-size: var(--fs-mini);] Seafolk Village [Poni Island], Alola[/div][/div] [div=/*ANCHOR - Date/Time & Mention/Interactions */ box-sizing: border-box; font-size: var(--fs-mini); margin: -15px 0 20px 0; padding-left: 55px;]August, 11[div=box-sizing: border-box; font-variant-position: super; display: inline;]th[/div] | 8:15 a.m. [/div] [div=/*ANCHOR - Weather Icon */ box-sizing: border-box; padding: 0px; /* List Harsh Sun fa-solid fa-sun Regular Sun fa-regular fa-sun Clear Night fa-solid fa-moon Snow fa-solid fa-snowflake Foggy fa-solid fa-smog Windy fa-solid fa-wind Cloudy fa-solid fa-cloud-sun fa-solid fa-cloud-moon Thunder Storm Bolt fa-solid fa-cloud-bolt Sparse Rain fa-solid fa-cloud-sun-rain fa-solid fa-cloud-moon-rain Heavy Rain fa-solid fa-cloud-showers-heavy */ /*ANCHOR - Sun/Moon Colors */ --sun-color: #FFFD37; --evening-sun-color: #FFA500; --moon-color: #dcdcdc; --icon-f-s: 2em; --r-r: rotate(-45deg); color: var(--evening-sun-color); font-size: var(--icon-f-s); font-weight: bold; line-height: 1; transform: var(--r-r); position: absolute; top: max(5%, 5px); right: min(2.5%, 30px);][fa]fa-regular fa-sun[/fa][/div] [div=/*!SECTION */][/div][/div] [div=/*SECTION - Pokémon Section */ --p-height: 45px; --p-micro: calc(var(--p-height)/2.5); --bg-color: transparent; --p-size: 150%; --held-right: -7.5px; --gen-left: -7.5px; box-sizing: border-box; display: flex; width: calc(10px + var(--p-height)); position: absolute; bottom: 20%; left: -30px; font-size: var(--fs-mini); justify-content: space-evenly; border-radius: 15px; flex-flow: column nowrap; gap: 5px; align-items: center; background: linear-gradient(180deg, #292A2D 10%, var(--accent-c) 100%); box-shadow: var(--shadow); /*ANCHOR Gender Images */ --male: #89CFF0; url(https://i.imgur.com/4FI7ot0.png); --female: #F4C2C2; url(https://i.imgur.com/wpBhCjV.png);] [div=/*SECTION - Pokemon 1 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P1Img) var(--P1PrimType); border: 2px solid var(--P1SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P1PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P1Gender); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P1Item) var(--bg-color); border: 2px Ridge var(--P1SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 2 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P2Img) var(--P2PrimType); border: 2px solid var(--P2SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P2PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P2Gender); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P2Item) var(--bg-color); border: 2px Ridge var(--P2SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 3 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P3Img) var(--P3PrimType); border: 2px solid var(--P3SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P3PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P3Gender); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P3Item) var(--bg-color); border: 2px Ridge var(--P3SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 4 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P4Img) var(--P4PrimType); border: 2px solid var(--P4SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P4PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P4Gender); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P4Item) var(--bg-color); border: 2px Ridge var(--P4SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 5 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P5Img) var(--P5PrimType); border: 2px solid var(--P5SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P5PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P5Gender); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P5Item) var(--bg-color); border: 2px Ridge var(--P5SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*SECTION - Pokemon 6 */ box-sizing: border-box; background: no-repeat center/var(--p-size) var(--P6Img) var(--P6PrimType); border: 2px solid var(--P6SecType); border-radius: 50px; height: var(--p-height); aspect-ratio: 1; position: relative; color: var(--P6PrimType);] [div=/*ANCHOR - Gender */ background: no-repeat center/85% var(--P6Gender); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; left: var(--gen-left);][/div] [div=/*ANCHOR - Held Item */ background: no-repeat center/85% var(--P6Item) var(--bg-color); border: 2px Ridge var(--P6SecType); border-radius: 50px; height: var(--p-micro); aspect-ratio: 1; box-sizing: border-box; position: absolute; bottom: 0; right: var(--held-right); /*!SECTION */][/div] [/div] [div=/*!SECTION */ display: none;][/div][/div] [div=/*ANCHOR - Text Section */ --esther-c: #f05656; --shayan-c: #b22222; border: transparent; position: absolute; top: 175px; box-sizing: border-box; padding: 15px 25px 15px 50px; font-size: var(--fs-body); line-height: 1.5; letter-spacing: 1px; height: 75%; display: block; overflow: scroll; scrollbar-width: none; white-space: collapse; text-align: justify; font-family: 'Nunito', Georgia;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et odio a ante pellentesque pretium. Integer venenatis ex non ipsum malesuada euismod sit amet ut ante. Duis posuere diam sit amet orci viverra condimentum. Nulla non lobortis orci. Vestibulum erat ante, aliquam eget arcu id, iaculis convallis lorem. Pellentesque rutrum dolor ut sapien tincidunt iaculis. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Convallis hendrerit semper. Suspendisse a leo consectetur, vulputate sem quis, laoreet lorem. Sed in eros quis odio convallis tempor. Etiam lectus felis, sollicitudin at auctor a, elementum non erat. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. Etiam molestie enim rutrum, iaculis est eu, tincidunt dolor. Phasellus ullamcorper risus ac libero ornare, ut tincidunt nisi efficitur. [/div] [div=/*!SECTION */][/div][/div] [div=/*!SECTION */][/div][/div]
I left in the details for my own character mostly so I could illustrate how the code is used. For a beginner, the only parts you need to concern yourself with are:
Code:/*ANCHOR - Font Sizes */ --fs-header: calc(var(--fs-body) * 1.5); --fs-body: clamp(10px, calc(0.75em + 0.25vw), 1.2em); --fs-mini: calc(var(--fs-body) * 0.6); /*ANCHOR - Code Size */ --height: 800px; /*ANCHOR - Accent Color */ --accent-c: #b42222; --shadow: 5px 2px 5px var(--accent-c), -5px 2px 5px #000; /*ANCHOR - Text Color */ color: #fff; /*ANCHOR - Character Image */ --char-img: url(https://i.imgur.com/mDaFSk0.png);
These are close to the top, you shouldn't need to scroll too far to find them. The variables are labeled but a few might require explanation.
I don't recommend changing any of the sizes, but feel free to change the colors. BBcode (the code used in the forum) accepts three (technically four) ways to declare a color: hex codes, HSL (Hue, Saturation, Lightness), RGB (Red, Green, Blue), and colors names. The first three are the preferred since they allow you a more customizable color and the recommended way to use them is to google search "Hex-code for Green" or something similar. Usually, you'll get something like this:
View attachment 1193543
Remember you need the '#' sign followed by six digits for hex-code to work.
e.g. #276221
You can use color names like Red, Blue, Green, but the shade might not be exactly what you want.
Back to the variables
Text color
Is of course, the color of the text and #fff (what it's set to right now) is the hex-code for white.
You might be wondering why this is three digits instead of six, and the answer is #fff is short-hand for #ffffff. When all the digits are the same you can get away with just the first three digits (sorta).
Accent Color
Is all shadows and gradients in the code, it's currently set to red because that's my characters color and here's what it would look like if I changed the accent color to purple:
Code:--accent-c: #A27EFA; (This is the Hex-code for the shade of purple I'm using)
Character Image
Called char-img in the code, this is the URL link to whatever picture represents your character. The code works best with direct links (links that end in .png or .jpeg) and as long as you put your link between the parentheses.
Now just below all those are the Pokemon on the side-bar.
Code:/*ANCHOR - Pyrrha */ --PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png); --PyrPrimType: #A27EFA; --PyrSecType: #7D58D6; --PyrGender: var(--female); --PyrItem: url(https://archives.bulbagarden.net/media/upload/thumb/6/60/Dream_Everstone_Sprite.png/200px-Dream_Everstone_Sprite.png);
We use variables for these and you can declare a variable by doing:
--variable_name: variable_value;
example:
--PyrImg: url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png);
This is a variable called 'PyrImg', which is short for Pyrrha Image, and the value is url(https://play.pokemonshowdown.com/sprites/gen5/jangmo-o.png) which is a url link to Jangmo-o's sprite.
The next variables at the Hex-code colors for Pyrrha's Primary Type and Secondary Type, a variable for her Gender, and a url link to the item she's holding.
Since I have more than 6 Pokemon I find it easier to declare the details for all my OCs pokemon and then copy-paste them into the variables called P1, P2, P3, etc.
Those are the values actually used in the code and represent their position in the side-bar, P1 is first Pokemon, P2 is second Pokemon, etc.
You can see that here:
Code:/*ANCHOR - P1 */ --P1Img: var(--PyrImg); --P1PrimType: var(--PyrPrimType); --P1SecType: var(--PyrSecType); --P1Gender: var(--PyrGender); --P1Item: var(--PyrItem); /*ANCHOR - P2 */ --P2Img: var(--HalImg); --P2PrimType: var(--HalPrimType); --P2SecType: var(--HalSecType); --P2Gender: var(--HalGender); --P2Item: var(--HalItem);
So Pyrrha's variables go into P1 to put her in slot one, and P2 is Halay, my OC's Houndour.
You can, of course, skip the extra variables and directly add your pokemon's information to P1, P2, etc. You can even skip the colors if it makes things easier, just grab a sprite/image and put that link between the url parantheses.
Once you're done all your edits, save it somewhere so you can re-use it as often as you'd like. You can remove the Lorem Ipsum dummy text and put your actual post there.
This is a kind of a lot, so if you'd like I'm totally willing to edit things for you and then hand over the finished code so you can skip the hassle. ^^
You can also check out Uxie's great guide to getting started with BBCode:
Tutorial - 𝚌𝚛𝚊𝚜𝚑 𝚌𝚘𝚞𝚛𝚜𝚎 💥 — a guide to using code
boom! it's crash course title body ----title---- crash course ----header---- ----* * * text starts here---- hi, it's me again! i'm back! let's talk asap... would you do me a favour and read this ( . .) ----header end---- ----body text---- ----* * * text starts...
