|
|
Post by Brownie on Mar 11, 2024 18:44:39 GMT -5
BROWNIE'S CODING TUTORIALS << CLICK for a walkthru of The Basics Ayo I was picking through my drafts for code to recycle and came across a few wip -> finished product post headers that I thought might be helpful to share with those of yall trying to learn code. And it's just cool to see the gross boxes take shape into something actually usable. SO I thought I'd make a thread to share some of my thought process when making a post header, and how I squish my boxes into pretty shapes by sheer force of will. Do note, some of these are pretty complex (floats/z-index, using borders as backgrounds, messing with line height to float text, multiple columns ect). The simple code I usually finish in one go without needing drafts/wip saves for them (mostly because code without floats are kinda hard to break mid-way thru lmao) Anyways, please feel free to use this thread to work on your own code, ask questions, or generally talk about the process of making layouts/post headers. I'm pretty experienced and can answer most questions and hopefully give some direction to anyone looking to learn ^^ I'll also be adding a section of simpler code boxes for people to copy/paste and play around with, to learn how the individual parts function. HOT TIPS: Save code OFTEN, every major change should be posted and then re-edited, so you have a back-up if anything goes wrong. Also save COPIES, like the complex code below, with fall-back states that you can return to if you don't like the direction the code is going or break something and can't figure out how to fix it. This is double and triple necessary any time you're dealing with multiple columns, floats, or tables. These things are so prone to breaking and, in doing so, WILL delete any div they are related to, so please keep back-ups of previous versions so your floats don't eat your progress. Lay out all your boxes with bright colors. Easily evident in the owl post header example, it is so, so much easier to see which part is which when you make them all bright colors. Don't start with your color palette until the very end. Make sure every background is colored, so you know what div is nested where. NEVER let anything stay transparent, it will only lead to nesting mistakes later in the process.
|
|
|
|
Post by Brownie on Mar 11, 2024 18:44:52 GMT -5
Simple codes 1 My Den Welcome
>> Warning
>> Warning
>> . . .
>> This is just a simulation
>> Continue?
>> Y [div style="padding:10px;"][div style="width:75%;background:#000000;border-radius:30px;padding:40px;margin:auto;"][div style="border:solid 4px #2ef442;padding:4px;"][div style="border:1px solid rgb(46, 244, 66);padding:40px;"][span style="font-size:32px;color:#f861fb;font-family:Courier new;text-align:center;"]Welcome[/span]
[span style="line-height:22px;font-family:courier new;color:#6bf762;"]>> Warning
>> Warning
>> . . .
>> This is just a simulation
>> Continue?
>> [span style="color:#00faff;"]Y[/span][/span][/div][/div][/div][/div]
Simple post header [div style="width:70%;border:solid 4px #A5978B;padding:2px;margin:auto;line-height:0px;font-size:0px;"]@ryssa [div style="border:2px solid rgb(196, 187, 175);padding:15px 25px 25px;"][div style="width:70%;border-bottom:solid 4px #C4BBAF;margin:auto;"][div style="font-family:georgia;font-size:38px;color:#ee9e5f;text-align:center;line-height:38px;"]Windblaze[/div][div style="font-family:georgia;font-size:18px;color:#C4BBAF;text-align:center;line-height:26px;"]with [/div][/div]
[div style="font-family:georgia;font-size:18px;line-height:22px;color:#000000;"]
Text here[/div][/div][/div]
Blue Post header (the way I did the thick brackets using borders in the OOC is actually pretty cool tech) didn't know you could comment huh well it's not this is just a font size of 0px so it doesn't show. I could write a whole story in here that you couldn't see unless you quoted the code isn't that funny and cool. Secret messages amiright LMAO look at you reading my code Cloudsnarl uwu uwu INSERT OOC HERE uwu uwu [div style="margin:auto;width:65%;padding-right:10px;"]
[div style="width:5%;float:right;background:RGB(4, 42, 105);height:15px;box-shadow:RGB(58, 223, 183)0px 0px 10px 0px;font-size:0px;"].[/div][div style="width:5%;margin:auto;background:RGB(4, 42, 105);height:15px;box-shadow:RGB(58, 223, 183)0px 0px 10px 0px;font-size:0px;float:left;"]LMAO look at you reading my code[/div][div style="width:70%;margin:auto;background:RGB(4, 42, 105);padding-left:20px;padding-right:20px;font-family:Raleway;font-size:48px;height:15px;line-height:15px;color:RGB(58, 223, 183);text-align:center;box-shadow:RGB(58, 223, 183)0px 0px 10px 0px;"]Cloudsnarl[/div][/div]
[div style="width:70%;margin:auto;border-right:RGB(58, 223, 183) dotted 8px;line-height:0px;padding-right:10px;"] [div style="background:RGB(226, 237, 255);font-family:domine;font-size:11px;line-height:14px;color:RGB(4, 42, 105);border-top:6px solid RGB(58, 223, 183);padding-top:10px;padding-right:30px;padding-left:30px;padding-bottom:10px;line-height:20px;border-bottom:6px solid RGB(58, 223, 183);text-align:justify;"]INSERT IN CHARACTER HERE[/div][/div]
[div style="width:65%;margin:auto;line-height:0px;padding-right:10px;"] [div style="background:RGB(226, 237, 255);font-family:domine;font-size:11px;line-height:14px;color:RGB(4, 42, 105);border-top:6px solid RGB(58, 223, 183);padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;line-height:14px;border-bottom:6px solid RGB(58, 223, 183);"][div style="background:RGB(4, 42, 105);float:left;width:5%;font-size:0px;line-height:4px;"]uwu[/div][div style="background:RGB(4, 42, 105);float:right;width:5%;font-size:0px;line-height:4px;"]uwu[/div][div style="border-left:solid 5px RGB(4, 42, 105);border-right:solid 5px RGB(4, 42, 105);padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;"]INSERT OOC HERE[/div][div style="background:RGB(4, 42, 105);float:left;width:5%;font-size:0px;line-height:4px;"]uwu[/div][div style="background:RGB(4, 42, 105);float:right;width:5%;font-size:0px;line-height:4px;"]uwu[/div][/div][/div]
One box of a Granite Circle Character Bio sheet Name B. Date - D. Date
Clan :: Rank
[ ] [ ] [ ]
Short description
three , character , traits
Family Tree Parents :
Siblings :
Mate(s) :
Kits :
Notable Relatives : [div style="width:80%;border:solid 4px #ee9e5f;padding:2px;margin:auto;line-height:0px;font-size:0px;background:#353334;"] [div style="border:2px solid #a56838;padding:15px 25px 25px;"][div style="width:70%;border-bottom:solid 4px #a56838;margin:auto;"][div style="font-family:georgia;font-size:38px;color:#ee9e5f;text-align:center;line-height:38px;"]Name[/div][div style="font-family:georgia;font-size:18px;color:#C4BBAF;text-align:center;line-height:26px;"]B. Date - D. Date
Clan :: Rank
[span style="font-size:14px;color:#9e978f;"][ ] [ ] [ ][/span][/div][/div]
[div style="font-family:georgia;font-size:16px;line-height:22px;color:#dbb787;text-align:left;"]
Short description
[i] three , character , traits[/i][/div][div style="width:70%;border-bottom:solid 4px #a56838;margin:auto;"][div style="font-family:georgia;font-size:16px;line-height:22px;color:#C4BBAF;text-align:left;"]
[/div][/div]
[div style="width:70%;border-bottom:solid 4px #a56838;margin:auto;"][div style="font-family:georgia;font-size:24px;color:#ee9e5f;text-align:center;line-height:38px;"]Family Tree[/div]
[div style="font-family:georgia;font-size:16px;line-height:22px;color:#C4BBAF;text-align:center;"]Parents :
Siblings :
Mate(s) :
Kits :
Notable Relatives : [/div][/div][/div][/div]
|
|
|
|
Post by Brownie on Mar 11, 2024 18:45:12 GMT -5
simple codes 2 My Clan request layout CometClan The Diverse and Hardy About In this world, creatures called "cats" are not flesh-and-blood, but beings created from the elements themselves.
All cats in the world align to one of the Signs, not just CometClan. CometClan is known for being somewhat unique, having more than one type of Sign in the group: usually, other Clans or rogue bands limit their membership to a single Sign. CometClan cats see their diversity as a strength.
Within CometClan, there are three primary Signs: Fire, Growth or Earth. There are also three secondary types (Sand, Wood, and Stone) and three tertiary types (Copper, Salt, and Obsidian). Rarely, quaternary types may be present: (Glass, Blossom, Gemstone). Leader Wolfstar | 52 Moons | he/him | Sandsign A lithe tomcat, his form is made of a deep, reddish-brown shifting sand that is always warm to the touch. His eyes have dark sclera with red irises ringed with yellow. His tail and ears are long, twisting ribbons of sand. He’s fairly hot-headed and when he’s surprised or upset, a mane of fire erupts from his scruff. Like many Firesigns, Wolfstar can heat up his fangs and claws, hot enough to melt through some stones. [div style="background:#0C0910;width:75%;margin:auto;padding:30px;"][div style="background:#81523F;font-family:courgette;font-size:60px;padding:8px 8px 0px 8px;color:#F2D398;text-align:center;"]CometClan[/div][div style="background:#F2D398;font-family:georgia;font-size:18px;padding:4px;color:#81523F;text-align:center;border-right:100px solid #81523F;border-left:100px solid #81523F;border-bottom:20px solid #81523F;"]The Diverse and Hardy[/div]
[div style="background:#F2D398;padding:20px;"][div style="font-family:courgette;font-size:40px;color:#81523F;padding-left:50px;border-right:#81523F double 7px;border-left:#81523F double 7px;"][b]About[/b][/div][div style="background:#F2D398;padding:20px;border-right:#81523F double 7px;border-left:#81523F double 7px;border-bottom:#81523F double 7px;font-family:georgia;font-size:12px;line-height:18px;color:#81523F;text-align:justify;"]In this world, creatures called "cats" are not flesh-and-blood, but beings created from the elements themselves.
All cats in the world align to one of the Signs, not just CometClan. CometClan is known for being somewhat unique, having more than one type of Sign in the group: usually, other Clans or rogue bands limit their membership to a single Sign. CometClan cats see their diversity as a strength.
Within CometClan, there are three primary Signs: Fire, Growth or Earth. There are also three secondary types (Sand, Wood, and Stone) and three tertiary types (Copper, Salt, and Obsidian). Rarely, quaternary types may be present: (Glass, Blossom, Gemstone).[/div][/div]
[div style="width:50%;margin:auto;background:#F2D398;height:5px;border:#81523F solid 3px;"][/div]
[div style="background:#F2D398;padding:20px;"][div style="background:#81523F;font-family:courgette;font-size:40px;color:#F2D398;padding-left:30px;"][b]Leader[/b][/div][div style="width:70%;background:rgb(129, 82, 63);font-family:georgia;font-size:16px;padding:8px 8px 8px 30px;color:#F2D398;"]Wolfstar | 52 Moons | he/him | Sandsign[/div][div style="background:#F2D398;padding:10px;border-right:#81523F double 7px;border-left:#81523F double 7px;border-bottom:#81523F double 7px;font-family:georgia;font-size:12px;line-height:18px;color:#81523F;"]Text goes here[/div][/div][/div] |
|
|
|
Post by Brownie on Mar 11, 2024 18:45:33 GMT -5
Complex code 1 (owl header) Process save 1 [div style="width:65%;background-color:#a2a2a2;margin:auto;padding-top:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;"][div style="width:50%;float:left;"][div style="height:100px;width:100px;background-color:#b2b2b2;"]test[/div][/div][div style="width:50%;float:left;"][div style="width:70%;background-color:#ffffff;"]Testing testsing[/div][/div]
[/div]
[/div]Save 2 [div style="width:65%;background-color:#a2a2a2;margin:auto;padding-top:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;"][div style="width:40%;float:left;padding-top:30px;padding-left:30px;background-color:#cc0f80;"][div style="height:100px;width:100px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:40%;float:right;padding-top:20px;background-color:#13355c;"][div style="width:70%;background-color:#ffffff;float:right;"]Testing testsing[/div][/div]
[div style="height:6px;background-color:#ffff8d;width:65%;line-height:0px;"][/div]
[/div]
[/div]Save 3 [div style="width:65%;background-color:#a2a2a2;margin:auto;padding-top:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;height:200px;border-bottom:solid 30px #03642a;"][div style="width:30%;float:left;padding-top:30px;padding-left:30px;background-color:#cc0f80;"][div style="height:150px;width:150px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:20px;background-color:#13355c;"][div style="width:80%;background-color:#ffffff;float:right;height:30px;border-bottom:#5add8e solid 30px;"][/div][div style="width:90%;background-color:#ffffff;float:right;height:30px;border-bottom:#5add8e solid 30px;"][/div][div style="width:100%;background-color:#ffffff;float:right;height:30px;"][/div][/div]
[/div]
[/div]"Cleaned up" 3 [div style="width:65%;margin:auto;padding-top:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;height:200px;border-bottom:solid 30px #03642a;"][div style="width:30%;float:left;padding-top:30px;padding-left:30px;"][div style="height:150px;width:150px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:20px;"][div style="width:80%;background-color:#ffffff;float:right;height:30px;border-bottom:#19e64a solid 30px;"][/div][div style="width:90%;background-color:#ffffff;float:right;height:30px;border-bottom:#19e64a solid 30px;"][/div][div style="width:100%;background-color:#ffffff;float:right;height:30px;"][/div][/div]
[/div]
[/div]save 4 [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;height:200px;border-bottom:solid 30px #03642a;"][div style="width:30%;float:left;padding-top:30px;padding-left:30px;"][div style="height:150px;width:150px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:30px;"][div style="width:80%;background-color:#ffffff;float:right;height:30px;border-bottom:#19e64a solid 30px;"][/div][div style="width:90%;background-color:#ffffff;float:right;height:30px;border-bottom:#19e64a solid 30px;"][/div][div style="width:100%;background-color:#ffffff;float:right;height:30px;"][/div][/div][/div][div style="background-color:#19e64a;border-bottom:solid 10px #03642a;padding:40px;"]test[/div][/div]
[div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;height:200px;border-bottom:solid 30px #03642a;"][div style="width:30%;float:left;padding-top:30px;padding-left:30px;"][div style="height:150px;width:150px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:100%;background-color:#ffffff;float:right;height:15px;border-bottom:#19e64a solid 15px;font-size:32px;font-family:georgia;line-height:11px;text-align:center;"]Character[/div][div style="width:80%;background-color:#ffffff;float:right;height:8px;border-bottom:#19e64a solid 30px;font-size:20px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;"]Place[/div][div style="width:80%;background-color:#ffffff;float:right;height:10px;border-bottom:#19e64a solid 30px;font-size:25px;font-family:georgia;line-height:5px;text-align:center;"]Words[/div][div style="width:80%;background-color:#ffffff;float:right;height:10px;border-bottom:#19e64a solid 30px;font-size:25px;font-family:georgia;line-height:5px;text-align:center;"]Words[/div][/div][/div][div style="background-color:#19e64a;border-bottom:solid 10px #03642a;padding:40px;Font-size:12px;font-family:georgia;line-height:15px;"]test[/div][/div]pmuch done Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow. [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#19e64a;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#19e64a;height:200px;border-bottom:double 30px #03642a;"][div style="width:30%;float:left;padding-top:30px;padding-left:30px;"][div style="height:150px;width:150px;background-color:#b2b2b2;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:100%;background-color:#ffffff;float:right;height:15px;border-bottom:#19e64a solid 15px;font-size:32px;font-family:georgia;line-height:11px;text-align:center;"]Character[/div][div style="width:80%;background-color:#ffffff;float:right;height:8px;border-bottom:#19e64a solid 30px;font-size:20px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;"]Place[/div][div style="width:80%;background-color:#ffffff;float:right;height:10px;border-bottom:#19e64a solid 30px;font-size:25px;font-family:georgia;line-height:5px;text-align:center;"]Words[/div][div style="width:80%;background-color:#ffffff;float:right;height:10px;border-bottom:#19e64a solid 30px;font-size:25px;font-family:georgia;line-height:5px;text-align:center;"]Words[/div][/div][/div][div style="background-color:#19e64a;border-bottom:solid 10px #03642a;padding:40px;Font-size:12px;font-family:georgia;line-height:15px;"]Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow.[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#19e64a;width:85%;float:left;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#ffffff;width:75%;float:left;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#19e64a;width:65%;float:left;line-height:0px;"][/div][/div]There are changes other than color Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow. [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#dfbc9f;width:65%;float:right;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:right;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:right;line-height:0px;"][/div][div style="height:15px;"][/div][div style="background-color:#7f6854;height:200px;border-bottom:double 30px #b4cbcd;"][div style="width:30%;float:left;padding-top:25px;padding-left:25px;"][div style="height:150px;width:150px;background-color:#b4cbcd;float:left;"]test[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:100%;background-color:#b29c7d;float:right;height:15px;border-bottom:#7f6854 solid 15px;font-size:32px;font-family:georgia;line-height:11px;text-align:center;text-shadow:#050841 1px 1px;"]Character[/div][div style="width:80%;background-color:#b29c7d;float:right;height:8px;border-bottom:#7f6854 solid 60px;font-size:20px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Place[/div][div style="width:60%;background-color:#b29c7d;float:right;height:7px;border-bottom:#7f6854 solid 30px;font-size:15px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Words[/div][div style="float:left;height:2px;"]OWL[/div][/div][/div][div style="background-color:#7f6854;padding:40px;Font-size:13px;font-family:georgia;line-height:18px;text-align:justify;"]Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow.[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:left;line-height:0px;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:left;line-height:0px;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#dfbc9f;width:65%;float:left;line-height:0px;"][/div][/div]Straight and curvy Semi-final Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow. [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#dfbc9f;width:65%;float:right;line-height:0px;opacity:.6;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:right;line-height:0px;opacity:.7;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:right;line-height:0px;opacity:.9;"][/div][div style="height:15px;"][/div][div style="background-color:#7f6854;height:200px;border-bottom:double 30px #b4cbcd;"][div style="width:30%;float:left;padding-top:25px;padding-left:25px;"][div style="height:150px;width:150px;background-color:#b4cbcd;float:left;"]Character image[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:100%;background-color:#b29c7d;float:right;height:15px;border-bottom:#7f6854 solid 15px;font-size:32px;font-family:georgia;line-height:11px;text-align:center;text-shadow:#050841 1px 1px;"]Character[/div][div style="width:80%;background-color:#b29c7d;float:right;height:8px;border-bottom:#7f6854 solid 60px;font-size:20px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Place[/div][div style="width:60%;background-color:#b29c7d;float:right;height:7px;border-bottom:#7f6854 solid 30px;font-size:15px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Tags[/div][div style="float:left;height:2px;"]OWL[/div][/div][/div][div style="background-color:#7f6854;padding:40px;Font-size:13px;font-family:georgia;line-height:18px;text-align:justify;"]Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow.[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:left;line-height:0px;opacity:.9;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:left;line-height:0px;opacity:.7;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#dfbc9f;width:65%;float:left;line-height:0px;opacity:.6;"][/div][/div]Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow. [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#dfbc9f;width:65%;float:right;line-height:0px;opacity:.6;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:right;line-height:0px;opacity:.7;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:right;line-height:0px;opacity:.9;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:15px;"][/div][div style="background-color:#7f6854;height:200px;border-bottom:double 30px #b4cbcd;border-top-left-radius:20px;"][div style="width:30%;float:left;padding-top:25px;padding-left:25px;"][div style="height:150px;width:150px;background-color:#b4cbcd;float:left;border-radius:10px;"]Character image[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:100%;background-color:#b29c7d;float:right;height:15px;border-bottom:#7f6854 solid 15px;font-size:32px;font-family:georgia;line-height:11px;text-align:center;text-shadow:#050841 1px 1px;"]Character[/div][div style="width:80%;background-color:#b29c7d;float:right;height:8px;border-bottom:#7f6854 solid 60px;font-size:20px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Place[/div][div style="width:60%;background-color:#b29c7d;float:right;height:7px;border-bottom:#7f6854 solid 30px;font-size:15px;font-family:georgia;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Tags[/div][div style="float:left;height:2px;"]OWL[/div][/div][/div][div style="background-color:#7f6854;padding:40px;Font-size:13px;font-family:georgia;line-height:18px;text-align:justify;border-bottom-right-radius:20px;"]Tawnystripe gave Lichenpatch a reassuring smile as Beeswipe swiped the sparrow from between the older tom's paws and darted off to the nursery. "I'll make sure they don't get into too much trouble," the torbie queen promised, though she didn't know yet if she was referring to the kits or to the excited Beeswipe; probably both. "Go relax. I'll have Beeswipe fetch you when we need a break." Tawnystripe picked her own sparrow back up and followed where Beeswipe had disappeared into the tangled roots of the oak that housed OwlClan's nursery.
The path was familiar to her paws and she relaxed into it, rubbing her flank along the worn roots as she parted the already-green sedges and came into the nursery proper. The smells were familiar, though it lacked the warm, milky scent she'd remembered most vividly from her time here. She checked to make sure the kits were well in paw, then found a place to settle in and supervise the younger tom as she ate the sparrow.[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:left;line-height:0px;opacity:.9;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:left;line-height:0px;opacity:.7;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#dfbc9f;width:65%;float:left;line-height:0px;opacity:.6;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][/div]FINAL [div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#dfbc9f;width:65%;float:right;line-height:0px;opacity:.6;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:right;line-height:0px;opacity:.7;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:right;line-height:0px;opacity:.9;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:15px;"][/div][div style="background-color:#7f6854;height:200px;border-bottom:double 30px #b4cbcd;border-top-left-radius:20px;"][div style="width:20%;float:left;padding-top:25px;padding-left:25px;"][div style="height:150px;width:150px;background-color:#b4cbcd;float:left;border-radius:10px;"]Character image[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:95%;background-color:#b29c7d;float:right;height:12px;border-bottom:#7f6854 solid 25px;font-size:36px;font-family:Cinzel;line-height:12px;text-align:center;text-shadow:#050841 1px 1px;"]Character[/div][div style="float:left;height:0px;"][img src="https://i.imgur.com/36StBY7.png" style="max-width:80%;"][/div][div style="width:70%;background-color:#b29c7d;float:right;height:6px;border-bottom:#7f6854 solid 25px;font-size:20px;font-family:Mate SC;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Place[/div][div style="width:55%;background-color:#b29c7d;float:right;height:5px;font-size:15px;font-family:Mate SC;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Tags[/div][/div][/div][div style="background-color:#7f6854;padding:40px;Font-size:13px;font-family:Taviraj;line-height:20px;text-align:justify;border-bottom-right-radius:20px;"]Text[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:left;line-height:0px;opacity:.9;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:left;line-height:0px;opacity:.7;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#dfbc9f;width:65%;float:left;line-height:0px;opacity:.6;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][/div]
|
|
|
|
Post by Brownie on Mar 11, 2024 18:45:58 GMT -5
complex code 2
(YewClan's moon directory)
(This one was PAINFUL)
|
|
|
|
Post by Brownie on Mar 11, 2024 18:46:11 GMT -5
Complex code 3
(??? Save)
|
|
|
|
Post by Brownie on Mar 11, 2024 18:46:36 GMT -5
One more save, probably for layouts or mid-tier code projects
|
|
|
|
Post by Brownie on Mar 11, 2024 18:46:51 GMT -5
And last save, this one for things I'm actively tinkering with
|
|
|
|
Post by Brownie on Mar 11, 2024 18:48:24 GMT -5
okay, now time to fill this up.
I'll try and put the code in code boxes for yall, but remember you can quote my post and look at the code that way too (you might even find a few easter eggs that way xp I like to put funny quotes or comments in my null ranges so I can edit them easier)
|
|
|
|
Post by Brownie on Apr 8, 2024 12:26:30 GMT -5
Small bump cuz people are looking at the coding 101 page recently. Take a peek at the first code here and see if you can understand how it works
|
|
|
|
Post by Brownie on Jun 19, 2024 20:54:26 GMT -5
smol bump cuz a lot of people are asking how coding works~
|
|
Asexual
Worker in the Salt Mines
《🎄○●cøpper●○🎄》
The forums feel empty without Rain :(
Pronouns: they/them, it/its
|
Post by 《🎄○●cøpper●○🎄》 on Jun 23, 2024 21:10:08 GMT -5
Hey Brownie, if I gave you a page for my clan I made, could you make it so the text boxes scroll? Could you do that please?? I have no idea how
|
|
|
|
Post by Brownie on Jun 23, 2024 21:18:22 GMT -5
Scroll boxes need two things: a defined height (typically in px) and a simple code of "overflow-y:scroll;" inserted into the div. "overflow:auto;" and "overflow-y:auto;" also default to scroll HERE
hi [div style="height:100px;overflow-y:scroll;"]HERE
hi[/div]Playing with the other options for this haha. "hidden" vs "visible" vs "auto" (auto is the same as scroll, but only adds the scroll when needed; scroll will ALWAYS add a scroll even if the text does not occlude the box) Visible being able to go outside the box... might actually be useful, sometimes. In like, really complex and niche ways. Huh. Herb gathering was simply one of those tasks that needed to be done, and even if it wasn't particularly exciting being a medicine cat escort (he wasn't exactly hoping that his fighting skills would be needed on this trip, after all) the break from hunting and border patrols were nice.
Besides, Frozenlaurel has been thinking about StarClan more and more over the last few moons, especially after the entire rabbit poisonings and with Hayfeather's... uncomfortable amount of wounds that left his daughter in the healer's den.
Another reason these herb gathering missions were so important.
He'd rather ask Stormmask, all things considered. Everyone in YewClan agreed that she had a strong connection to their warrior ancestors--whatever that meant, Frozenlaurel wasn't quite sure yet--but he'd never found the right time to ask Stormmask about her experiences, whereas now, with Shadepatch, there wasn't much else to talk about. So as they trotted through the forest, he asked: "Hey, Shadepatch, what happens when you see StarClan? Like, how do you know you aren't just making it up in your head?" Herb gathering was simply one of those tasks that needed to be done, and even if it wasn't particularly exciting being a medicine cat escort (he wasn't exactly hoping that his fighting skills would be needed on this trip, after all) the break from hunting and border patrols were nice.
Besides, Frozenlaurel has been thinking about StarClan more and more over the last few moons, especially after the entire rabbit poisonings and with Hayfeather's... uncomfortable amount of wounds that left his daughter in the healer's den.
Another reason these herb gathering missions were so important.
He'd rather ask Stormmask, all things considered. Everyone in YewClan agreed that she had a strong connection to their warrior ancestors--whatever that meant, Frozenlaurel wasn't quite sure yet--but he'd never found the right time to ask Stormmask about her experiences, whereas now, with Shadepatch, there wasn't much else to talk about. So as they trotted through the forest, he asked: "Hey, Shadepatch, what happens when you see StarClan? Like, how do you know you aren't just making it up in your head?" Herb gathering was simply one of those tasks that needed to be done, and even if it wasn't particularly exciting being a medicine cat escort (he wasn't exactly hoping that his fighting skills would be needed on this trip, after all) the break from hunting and border patrols were nice.
Besides, Frozenlaurel has been thinking about StarClan more and more over the last few moons, especially after the entire rabbit poisonings and with Hayfeather's... uncomfortable amount of wounds that left his daughter in the healer's den.
Another reason these herb gathering missions were so important.
He'd rather ask Stormmask, all things considered. Everyone in YewClan agreed that she had a strong connection to their warrior ancestors--whatever that meant, Frozenlaurel wasn't quite sure yet--but he'd never found the right time to ask Stormmask about her experiences, whereas now, with Shadepatch, there wasn't much else to talk about. So as they trotted through the forest, he asked: "Hey, Shadepatch, what happens when you see StarClan? Like, how do you know you aren't just making it up in your head?" |
|
|
|
Post by lazzylake on Jun 23, 2024 22:29:31 GMT -5
Hmm let me test this out Dappleswipe was eating a squirrel near the nursery. She was watching Whorlkit making circles around the den, and purred in contentment. The ginger tom seemed to be causing a lot of mischief around camp, and Dappleswipe was caught as a victim of their rampage. Last moon she discovered prickles planted by the kitten in her nest! As Bubblingstar approached the youngster, the deputy finished her meal and trotted up, eager to make a scene.
“Ah, so you're the one who stuck thorns in my nest? You naughty kit! That's no way to treat your deputy! What do you think the proper verdict for Whorlkit will be, Bubblingstar? A moon of dawn patrols?” The deputy’s voice rang with laughter. She missed teasing the clan’s youngest members. A bit of tough love, if you will.
Carefully the tortoiseshell scooped Whorlkit up and began to gently wash their ruffled fur. “The best warrior in all the clan has to look the part!” She sighed as she breathed in their fresh scent.
Dappleswipe doted over the miniature version of her leader. It was incredible to look back and forth between Whorlkit and Bubblingstar. The innocence of youth contrasted with the burden of leadership and honor. A bittersweet note tugged at her heart. Hopefully she could spend a few more moons as deputy before the burden passes onto her shoulders. |
|
|
|
Post by lazzylake on Jun 23, 2024 22:40:06 GMT -5
Oh this is brilliant! I love snooping around in the coding threads. The scroll boxes will be very helpful for the fanclans I (someday) will make pages for. Thanks for coming to the rescue once again, Brownie
|
|
|
|
Post by Brownie on Jun 23, 2024 23:04:09 GMT -5
Oh this is brilliant! I love snooping around in the coding threads. The scroll boxes will be very helpful for the fanclans I (someday) will make pages for. Thanks for coming to the rescue once again, Brownie poking through code is a great way to learn new stuff~ if ya ever see something you don't know how they did it, just jump in here and I'll see if I can explain |
|
