gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 21:15:19 GMT -7
[nospaces] [attr="class","pie2"]
these codes are FREE TO USE on MOONRISE. ping me on discord if you have any questions, and feel free to let me know if you have any code requests!
[newclass=".pie2"]background: var(--secondbg);color: var(--iconcolor); font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:2em;text-align:justify; box-sizing:border-box;} .pie2 a { text-transform:uppercase; font-size:0.8em; [/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 21:24:20 GMT -7
[nospaces] [attr="class","pie"] GENERAL POSTING TEMPLATES {CLICK FOR INSTRUCTIONS & CODE}
GENERAL TEMPLATE: to edit the colour of the bolded font, change the user-id in div[rel=user-22] to your character's id, and replace var(--hydra) with the coven colour of choice (e.g. var(--sybaris)) or hex colour.
[nospaces][div][attr="class","pie"]
POST HERE.
[div][attr="class","notes"]notes go here[/div]
[div][attr="class","pietag"]@tag[/div]
[/div][newclass=".pie"]background: var(--secondbg);color: var(--iconcolor); font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:4em;text-align:justify; box-sizing:border-box;} .pie a { text-transform:uppercase; display:inline-block; background-color:var(--mainbg); padding:0.6em 0.8em;font-size:10px;} .pie .notes { display: block;font-size: 10px;letter-spacing: 0.05em;padding: 4em 4em 0 4em;text-align: center;border-top: 1px solid var(--mainbg); margin-top: 4em; } .pietag { margin-top:4em; text-align:center; } div[rel=user-22] .pie b { color: var(--hydra); [/newclass][break]
TO ADD MASS TAGS: remove the * from the newclass and attr and paste below existing template. replace the pietag div with the piemasstag div.
[div][*attr="class","piemasstag"]@tag @tag[/div]
[newclass*=".piemasstag"] margin: 2.5em 4em 0 4em; text-align: center; display:flex; flex-flow: row wrap; justify-content:center; align-content:stretch; gap:0.2em; } .piemasstag span a { padding:0; margin-top:0; } .piemasstag span[itemtype="http://schema.org/Person"] { flex-basis: auto; text-transform: uppercase; margin: 0 auto; display: block; background-color: var(--mainbg); padding: 0.5em 0.8em; flex: 1 1 auto; font-size: 10px; [/newclass]
TEMPLATE W/ NOTES ADD-ON: same as above for changing bold colours. remove * from roll or delete if necessary.
[nospaces][div][*attr="class","fish"]
POST HERE
[div][*attr="class","fishgrid"]
[*roll*] [div][*attr="class","fishtext"] NOTES & TAGS HERE [/div]
[/div] [spoiler]{charname is currently using...} [div][*attr="class","fishspellhide"]
[b]SPELLNAME[/b] spell description from inventory here.
[/div][/spoiler][/div]
[*newclass=".fish"] background: var(--secondbg); color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 475px; margin: 0 auto; padding: 5em 4em 4em 4em; text-align: justify; box-sizing: border-box; } .fishgrid { display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--mainbg); margin-top: 4em; padding-top: 3em; } div[rel=user-22] .fish b { color:var(--hydra); } .fish .vdice-box { border: 0px; box-shadow: none; background-color: var(--mainbg); text-align: center; width: 80px; } .fish .vdice-value { padding-top: 20px; font: bold 25px 'Jost', sans-serif; } .fishtext { max-height: 80px; overflow: auto; width: calc(100% - 80px); box-sizing: border-box; margin-left: 1em; scrollbar-width: thin; scrollbar-color: var(--mainbg) var(--boardbg); font-size: 0.9em; padding-right: 1em; } .fishtext a { background-color: var(--mainbg); padding: 0.2em 0.5em; text-transform: lowercase; width: fit-content; font-size: 0.8em; white-space:nowrap; } .fishtext a:before { content: '# '; [/newclass]
[*newclass=".fish .sptitle"]display: block; text-align:right; width: 100%; margin: 0 auto; box-sizing:border-box; color: var(--hovericoncolor); cursor: pointer; transition: all .6s; text-transform:lowercase; font-size: 12px; letter-spacing: 0.05em; height: 20px; margin-bottom: 1em; margin-top:3em; white-space: nowrap;} .fishspellhide { height: 100px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--thirdbg) var(--boardbg) ; box-sizing:border-box; padding: 0 1.5em; margin-top:3em; text-align:justify; font-size:0.9em; } .fishspellhide b { background-color:var(--hovericoncolor); margin-right:0.5em; color:var(--secondbg) !important; padding:0em 0.5em; } .fish .sptitle:before { content: ''; width:50%; background-color:var(--mainbg); height:1px; display:inline-block; float:left; margin-top:12px; [/newclass]
[break]
to just use the reskinned dice roll, simply add the following newclass to your post. remember to remove the * and change the .pie div if you're using it with another template.
[*newclass=".pie .vdice-box"]border: 0px; box-shadow: none; background-color: var(--mainbg);} .pie .vdice-value { padding-top: 20px;font: bold 25px 'Jost',sans-serif;[/newclass]
[break] [attr="class","pie"] A modified blockquote. Bold text looks like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [attr="class","notes"]notes go here [newclass=".pie"]background: var(--secondbg);color: var(--iconcolor); overflow:hidden; font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:4em;text-align:justify; box-sizing:border-box;} .pie a { text-transform:uppercase; display:inline-block; background-color:var(--mainbg); padding:0.6em 0.8em;font-size:10px;} .pie .notes { display: block;font-size: 10px;letter-spacing: 0.05em;padding: 4em 4em 0 4em;text-align: center;border-top: 1px solid var(--mainbg); margin-top: 4em; } .pietag { margin-top:4em; text-align:center; } div[rel=user-22] .pie b { color: var(--hydra); [/newclass] [break] [attr="class","pie"] A modified blockquote with an alternative tag display. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [newclass=".piemasstag"] margin: 2.5em 4em 0 4em; text-align: center; display:flex; flex-flow: row wrap; justify-content:center; align-content:stretch; gap:0.2em; } .piemasstag span a { padding:0; margin-top:0; } .piemasstag span[itemtype="http://schema.org/Person"] { flex-basis: auto; text-transform: uppercase; margin: 0 auto; display: block; background-color: var(--mainbg); padding: 0.5em 0.8em; flex: 1 1 auto; font-size: 10px; [/newclass] [break] [attr="class","fish"] A modified blockquote with an additional notes section. Bold text looks like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [attr="class","fishgrid"] Ihjj9pWx[attr="class","fishtext"] lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. this part scrolls actually! maddox ruchbah{maddox is currently using...} [attr="class","fishspellhide"]
ABCD RUNES: KENAZ A basic guide to a beginner's runic alphabet. 'Kenaz,' meaning "Torch" is the illumination rune. By itself, Kenaz glows intensely and can be used to light up a room, or to create a small flame. Its secondary meaning is "ulcer" — a rune associated with decay, or weakening something else. Used this way, it may also enhance something's destructive potential or weaken an object.
[newclass=".fish"] background: var(--secondbg); color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 475px; margin: 0 auto; padding: 5em 4em 4em 4em; text-align: justify; box-sizing: border-box; } .fishgrid { display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--mainbg); margin-top: 4em; padding-top: 3em; } div[rel=user-22] .fish b { color:var(--hydra); } .fish .vdice-box { border: 0px; box-shadow: none; background-color: var(--mainbg); text-align: center; width: 80px; } .fish .vdice-value { padding-top: 20px; font: bold 25px 'Jost', sans-serif; } .fishtext { max-height: 80px; overflow: auto; width: calc(100% - 80px); box-sizing: border-box; margin-left: 1em; scrollbar-width: thin; scrollbar-color: var(--mainbg) var(--boardbg); font-size: 0.9em; padding-right: 1em; } .fishtext a { background-color: var(--mainbg); padding: 0.2em 0.5em; text-transform: lowercase; width: fit-content; font-size: 0.8em; white-space:nowrap; } .fishtext a:before { content: '# '; [/newclass] [newclass=".fish .sptitle"]display: block; text-align:right; width: 100%; margin: 0 auto; box-sizing:border-box; color: var(--hovericoncolor); cursor: pointer; transition: all .6s; text-transform:lowercase; font-size: 12px; letter-spacing: 0.05em; height: 20px; margin-bottom: 1em; margin-top:3em; white-space: nowrap;} .fishspellhide { height: 100px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--thirdbg) var(--boardbg) ; box-sizing:border-box; padding: 0 1.5em; margin-top:3em; text-align:justify; font-size:0.9em; } .fishspellhide b { background-color:var(--hovericoncolor); margin-right:0.5em; color:var(--secondbg) !important; padding:0em 0.5em; } .fish .sptitle:before { content: ''; width:50%; background-color:var(--mainbg); height:1px; display:inline-block; float:left; margin-top:12px; [/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:19:12 GMT -7
[nospaces] [attr="class","pie"] DEV TEMPLATES {CLICK FOR INSTRUCTIONS & CODE}
the image dimension for the header image is 600x275.
[nospaces][div][attr="class","loccont"]
[div style="background-image:url(IMAGEURLHERE);"][attr="class","loctitle"]
TITLEGOESHERE
[/div]
[div][attr="class","locbody"][span]tag 1[/span] [span]tag 2[/span] [span]tag 3[/span][break][break]
DESCRIPTION HERE.[break][break]
[span style="margin-left:0;"][attr="class","sleft"]optional[/span] [span][attr="class","sleft"]row[/span] [span][attr="class","sleft"]of[/span] [span][attr="class","sleft"]tags[/span][break][break]
[/div]
[/div][newclass=".loccont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width:520px; margin: 0 auto; box-sizing: border-box; } .loctitle { text-align:center; font-weight:bold; font-size:20px; border-bottom:1px solid var(--thirdbg); color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 0.1em; box-sizing: border-box; padding:2em; margin-bottom:1em; box-shadow: inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; } .locbody { padding:2em 3em 3em 3em; text-align:justify; } .locbody span { background-color:var(--mainbg); padding:0.2em 1em; float:right; margin:0 0.2em; } .locbody span:first-child { margin-right: 0;} .locbody b { color:var(--hovericoncolor);[/newclass]
[break]
the image dimensions for the timeline are 600x275. remove all *s from attrs and newclass.
[nospaces][div][*attr="class","chartl"]
[div style="background-image:url(IMAGEURLHERE);"][*attr="class","chartltitle"]name's timeline[/div]
[div][*attr="class","chartl-item"][b]title[/b] description of the event here.[/div]
[/div]
[newclass*=".chartl"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width:500px; margin: 0 auto; padding: 0; box-sizing: border-box; } .chartl-item { border-left:5px solid var(--hovericoncolor); padding:3em 3em 0.5em 3em; text-align:justify; } .chartl-item:last-child { padding-bottom:3em; } .chartl-item::before { content:''; height:10px; width:10px; border-radius:100%; background-color:var(--secondbg); border:5px solid var(--hovericoncolor); float:left; margin-left:-4em; } .chartl-item b { color:var(--hovericoncolor); text-transform:uppercase; margin-right:1em; } .chartltitle { text-align:center; font-weight:bold; font-size:20px; padding:2em; box-shadow: inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 0.1em; box-sizing: border-box;[/newclass]
[break] [attr="class","loccont"] [attr="class","loctitle"]
the ruchbah forge
[attr="class","locbody"]
the docks hydra-friendly tag 3[break][break]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bold text looks like this. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[break][break]
[attr="class","sleft"]optional [attr="class","sleft"]row [attr="class","sleft"]of [attr="class","sleft"]tags[break][break]
[newclass=".loccont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width:520px; margin: 0 auto; box-sizing: border-box; } .loctitle { text-align:center; font-weight:bold; font-size:20px; border-bottom:1px solid var(--thirdbg); color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 0.1em; box-sizing: border-box; padding:2em; margin-bottom:1em; box-shadow: inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; } .locbody { padding:2em 3em 3em 3em; text-align:justify; } .locbody span { background-color:var(--mainbg); padding:0.2em 1em; float:right; margin:0 0.2em; } span.sleft { background-color: var(--mainbg); padding: 0.2em 1em; float: left; margin: 0 0.2em; margin-left: 0.2em;} span.sleft:first-child { margin-left: 0;} .locbody span:first-child { margin-right: 0;} .locbody b { color:var(--hovericoncolor);[/newclass] [break] [attr="class","chartl"] [attr="class","chartltitle"]name's timeline [attr="class","chartl-item"]title description of the event here. [attr="class","chartl-item"]title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [attr="class","chartl-item"]
title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [newclass=".chartl"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width:500px; margin: 0 auto; padding: 0; box-sizing: border-box; } .chartl-item { border-left:5px solid var(--hovericoncolor); padding:3em 3em 0.5em 3em; text-align:justify; } .chartl-item:last-child { padding-bottom:3em; } .chartl-item::before { content:''; height:10px; width:10px; border-radius:100%; background-color:var(--secondbg); border:5px solid var(--hovericoncolor); float:left; margin-left:-4em; } .chartl-item b { color:var(--hovericoncolor); text-transform:uppercase; margin-right:1em; } .chartltitle { text-align:center; font-weight:bold; font-size:20px; padding:2em; box-shadow: inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 0.1em; box-sizing: border-box;[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:33:36 GMT -7
[nospaces] [attr="class","pie"] PLOTTER / WANTED TEMPLATE {CLICK FOR INSTRUCTIONS & CODE}
image dimensions are 250x350. to add a new character, copy everything from [*div style="margin-top:2em;"] to the two closing [/*div]s after the hook description.
[nospaces][div][attr="class","plotcont"]
[div style="height:100%;"][attr="class","plotstats"]
brief blurb about the overall ad or writer can go here.
[/div]
[div style="margin-top:2em;"][attr="class","plotflex"]
[div style="background-image:url(IMAGEURLHERE);"][attr="class","plotname"][/div]
[div][attr="class","plotstats"]
[h1]CHARNAME HERE[/h1]
[h2]age / coven / domain[/h2]
description here. [break][break]
[h1]connections[/h1]
[u]hook name[/u] hook description.
[/div][/div]
[/div][newclass=".plotcont"] color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 505px; margin: 0 auto; padding: 2em; text-align: justify; box-sizing: border-box; border:10px solid var(--bannerbgcolor); } .plotname { padding:1em; box-shadow:inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size:cover; background-position:center; color:white; font-size:20px; text-transform:uppercase; letter-spacing:0.1em; width:150px; height:250px; box-sizing:border-box; } .plotstats { box-sizing:border-box; height:250px; width:100%; overflow:auto; background-color:var(--secondbg); border:2.5em solid transparent; padding-right:1em; scrollbar-width:thin; scrollbar-color:var(--boardbg) var(--bannerbgcolor) ; } .plotstats h1 { text-transform:lowercase; font-weight:bold; font-size:20px; letter-spacing:0.05em; border-bottom:10px solid var(--mainbg); height:17px;margin-bottom:1em; } .plotstats h2 { text-transform:uppercase; font-weight:300; font-size:9px; letter-spacing:0.05em; text-align:right;margin-bottom: 1em; } .plotstats u { text-transform:lowercase; font-weight:bold; text-decoration:none; border-bottom:7px solid var(--mainbg); height:14px; display:inline-block; } .plotflex:nth-child(odd) {flex-direction: row-reverse;} .plotflex { display:flex; justify-content:center; align-items:center; width:100%; box-sizing:border-box;[/newclass]
[break] [attr="class","plotcont"] [attr="class","plotstats"]
hello! i'm lav and i like writing dramatic indulgent plots and fun shenanigans, with bonus points for anything revolving around characters dabbling in the mysterious and forbidden. i'm not the best at getting around to plotter replies so please do feel free to poke me over discord if you've got any ideas!
[attr="class","plotflex"] [attr="class","plotname"] [attr="class","plotstats"]
maddox ruchbah
twenty-three / hydra / enchanter
a craftsman and odd-job witch, it's easiest to find maddox in his family's blacksmith shop by the docks. he's happy to walk you through the basics of choosing a weapon or take a request for a custom work, be it a blade or a finer piece of jewellery.[break][break]
to the right people in the right circles, he's been known to reliably pass along a message. don't worry, he's good at keeping secrets. [break][break]
connections
hook name lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[break][break]
hook name lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[break][break]
hook name lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[break][break]
[attr="class","plotflex"] [attr="class","plotname"] [attr="class","plotstats"]
serafim strix
twenty-eight / pegasus / alchemist
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[newclass=".plotcont"] color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 505px; margin: 0 auto; padding: 2em; text-align: justify; box-sizing: border-box; border:10px solid var(--bannerbgcolor); } .plotname { padding:1em; box-shadow:inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size:cover; background-position:center; color:white; font-size:20px; text-transform:uppercase; letter-spacing:0.1em; width:150px; height:250px; box-sizing:border-box; } .plotstats { box-sizing:border-box; height:250px; width:100%; overflow:auto; background-color:var(--secondbg); border:2.5em solid transparent; padding-right:1em; scrollbar-width:thin; scrollbar-color:var(--boardbg) var(--bannerbgcolor) ; } .plotstats h1 { text-transform:lowercase; font-weight:bold; font-size:20px; letter-spacing:0.05em; border-bottom:10px solid var(--mainbg); height:17px;margin-bottom:1em; } .plotstats h2 { text-transform:uppercase; font-weight:300; font-size:9px; letter-spacing:0.05em; text-align:right;margin-bottom: 1em; } .plotstats u { text-transform:lowercase; font-weight:bold; text-decoration:none; border-bottom:7px solid var(--mainbg); height:14px; display:inline-block; } .plotflex:nth-child(odd) {flex-direction: row-reverse;} .plotflex { display:flex; justify-content:center; align-items:center; width:100%; box-sizing:border-box;[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:36:31 GMT -7
[nospaces] [attr="class","pie"] QUEST TEMPLATE {CLICK FOR INSTRUCTIONS & CODE}
image dimensions are 550x250.
[nospaces][div][attr="class","questcont"]
[div style="background-image:url(IMAGEURLHERE);"][attr="class","questname"][b]quest name[/b][/div]
[div][attr="class","queststats"]
[div][attr="class","questh"]BASICS[/div][break]
[b]participants:[/b] how many participants will it need? Is it a site-wide quest or a personal journey?[break]
[b]threads:[/b] how many threads will it need? estimates are fine.[break]
[b]sponsor:[/b] what coven, group, person, etc is sponsoring this quest ICly? Was it initiated spontaneously or?[break]
[b]objective:[/b] please give a concise objective statement for the quest.[break]
[b]danger level:[/b] from initiate to master, how dangerous is this quest?[break]
[b]moderation:[/b] would you like to enable moderation for this quest?[break][break]
[div style="text-align:right;"][attr="class","questh"]DETAILS[/div][break]
[b]ic description:[/b] give a more elaborate description of the quest, or touch upon the premise of each thread if many are required.[break][break]
[div][attr="class","questtalk"][img src="https://cdn.discordapp.com/attachments/292274811185397770/976988564682313808/a25.png"] [span][i]optional quest-giver dialogue box.[/i][/span][/div][break]
[div][attr="class","questblock"]
optional excerpt / blockquote area. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div]
[break]
[b]ooc description:[/b] how would you like this quest set up? what can staff do to make this happen?[break]
[b]suggested reward:[/b] if you would like, you can use this space to suggest a reward for the quest -- eg. receiving an heirloom item after a personal quest, or a specific type of item, or a specific advanced spell. you can also leave this blank!
[/div]
[/div]
[newclass=".questcont"]color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 520px; margin: 0 auto; padding: 2em; text-align: justify; box-sizing: border-box; border:10px solid var(--bannerbgcolor); } .questname { padding:1em; box-shadow:inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size:cover; background-position:center; color:white; font-size:20px; text-transform:uppercase; letter-spacing:0.1em; } .questh { text-transform: lowercase; font-weight: bold; font-size: 22px; letter-spacing: 0.05em; border-bottom: 10px solid var(--mainbg); height: 22px; margin-bottom: 1em;} .queststats b { color:var(--hovericoncolor); } .questtalk { display: flex;justify-content: flex-start;align-items: center;background-color: var(--mainbg);height:60px;box-sizing:border-box;overflow:hidden; } .questtalk img { width: 60px;padding-right: 1em;opacity: 0.6;} .questtalk span { font-size: 0.9em; padding: 0 1em 0 0; } .questblock { border-left:1px solid var(--thirdbg); padding-left:1.5em; } .queststats { box-sizing:border-box; margin-top:2em; padding:3em; background-color:var(--secondbg); [/newclass]
[break] [attr="class","questcont"] [attr="class","questname"]quest name [attr="class","queststats"] [attr="class","questh"]BASICS [break] participants: how many participants will it need? Is it a site-wide quest or a personal journey?[break] threads: how many threads will it need? estimates are fine.[break] sponsor: what coven, group, person, etc is sponsoring this quest ICly? Was it initiated spontaneously or?[break] objective: please give a concise objective statement for the quest.[break] danger level: from initiate to master, how dangerous is this quest?[break] moderation: would you like to enable moderation for this quest?[break][break] [attr="class","questh"]DETAILS [break] ic description: give a more elaborate description of the quest, or touch upon the premise of each thread if many are required.[break][break] [attr="class","questtalk"]  optional quest-giver dialogue box.[break] [attr="class","questblock"]
optional excerpt / blockquote area. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [break] ooc description: how would you like this quest set up? what can staff do to make this happen?[break] suggested reward: if you would like, you can use this space to suggest a reward for the quest -- eg. receiving an heirloom item after a personal quest, or a specific type of item, or a specific advanced spell. you can also leave this blank! [newclass=".questcont"]color: var(--iconcolor); font-family: 'Jost'; font-size: 13px; line-height: 1.8; width: 520px; margin: 0 auto; padding: 2em; text-align: justify; box-sizing: border-box; border:10px solid var(--bannerbgcolor); } .questname { padding:1em; box-shadow:inset 0 0 0 1000px rgba(18, 18, 30, 0.7); background-size:cover; background-position:center; color:white; font-size:20px; text-transform:uppercase; letter-spacing:0.1em; } .questh { text-transform: lowercase; font-weight: bold; font-size: 22px; letter-spacing: 0.05em; border-bottom: 10px solid var(--mainbg); height: 22px; margin-bottom: 1em;} .queststats b { color:var(--hovericoncolor); } .questtalk { display: flex;justify-content: flex-start;align-items: center;background-color: var(--mainbg);height:60px;box-sizing:border-box;overflow:hidden; } .questtalk img { width: 60px;padding-right: 1em;opacity: 0.6;} .questtalk span { font-size: 0.9em; padding: 0 1em 0 0; } .questblock { border-left:1px solid var(--thirdbg); padding-left:1.5em; } .queststats { box-sizing:border-box; margin-top:2em; padding:3em; background-color:var(--secondbg); [/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:41:47 GMT -7
[nospaces] [attr="class","pie"] DELPHI ORACLE COMMENTS {CLICK FOR INSTRUCTIONS & CODE}
image dimensions are 50x50, but any square icon will work.
[nospaces][div][attr="class","comments-cont"]
[div][attr="class","comments-left"]
[img src="IMAGEURLHERE"]
[span]READER[/span]
[/div]
[div][attr="class","comments-right"]
[span]rotisserie[/span][break]
ok oracle commenter dmitristan you clearly enjoy only the most hinged of men
[div][attr="class","comments-stats"]reply • share • report [/div]
[div][attr="class","comment-reply"]
[span]dmitristan[/span][break]
it’s always “poor little meow meow” or “evil bastard” or “I could make him worse” what about men who are normal 🙄what about men who pay taxes and are well adjusted individuals and not at all insane
[/div][/div][/div]
[newclass=".comments-cont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 500px; margin: 0 auto; padding: 4em 3em 3em 3em; text-align: justify; box-sizing: border-box; font-family: "Jost", sans-serif; display:flex; justify-content:center; align-items:center; } .comments-left { width:60px; text-align:center; margin-right:20px; box-sizing:border-box; } .comments-left span { opacity:0.8; } .comments-left img { width:60px; border-radius:100%; } .comments-right { width: 420px; padding-left:1.5em; box-sizing:border-box; border-left:1px solid var(--mainbg); } .comments-right span { text-transform:uppercase; font-weight:700; color:var(--hovericoncolor); } .comments-stats { margin-top:1em; opacity:0.8; font-size:0.9em; } .comment-reply { border-top:1px solid var(--mainbg); padding-left:1em; margin-top:2em; padding-top:1em; margin-left:1em; } .comment-reply span:before { content:'↳ '; color:var(--hovericoncolor);[/newclass]
[break] [attr="class","comments-cont"] [attr="class","comments-left"]  READER [attr="class","comments-right"] rotisserie[break] ok oracle commenter dmitristan you clearly enjoy only the most hinged of men [attr="class","comments-stats"]reply • share • report [attr="class","comment-reply"]
dmitristan[break]
it’s always “poor little meow meow” or “evil bastard” or “I could make him worse” what about men who are normal 🙄what about men who pay taxes and are well adjusted individuals and not at all insane
[newclass=".comments-cont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 500px; margin: 0 auto; padding: 4em 3em 3em 3em; text-align: justify; box-sizing: border-box; font-family: "Jost", sans-serif; display:flex; justify-content:center; align-items:center; } .comments-left { width:60px; text-align:center; margin-right:20px; box-sizing:border-box; } .comments-left span { opacity:0.8; } .comments-left img { width:60px; border-radius:100%; } .comments-right { width: 420px; padding-left:1.5em; box-sizing:border-box; border-left:1px solid var(--mainbg); } .comments-right span { text-transform:uppercase; font-weight:700; color:var(--hovericoncolor); } .comments-stats { margin-top:1em; opacity:0.8; font-size:0.9em; } .comment-reply { border-top:1px solid var(--mainbg); padding-left:1em; margin-top:2em; padding-top:1em; margin-left:1em; } .comment-reply span:before { content:'↳ '; color:var(--hovericoncolor);[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:47:17 GMT -7
[nospaces] [attr="class","pie"] TEXTING ADD-ONS original spellchat template by juno. {CLICK FOR INSTRUCTIONS & CODE}
these are just little add-ons, please refer to juno's original thread for the original template codes! otherwise, just add the newclass to the bottom of your post if you're using them.
[div][attr="class","msgreply"][i style="margin-right:1em;white-space:nowrap;"]tag[/i] quoted message here[/div]
[div][span]2:51AM[/span]
reply to quoted message
[/div]
[div][attr="class","typingdiv"][span][attr="class","typing"]MADDOX IS TYPING...[/span]
[/div]
[newclass=".msgreply"] border-left: 1px solid var(--thirdbg); background-color: transparent !important; border-radius: 0 !important; font-size: 0.8em; color: var(--iconcolor) !important; margin-bottom: -0.8em !important; } .msgreply i:before { content:"@"; } .imbody .typingdiv .typing { display: inline-block; text-transform: uppercase; font-size: 10px; overflow: visible; white-space: nowrap; width: 0; height: 0; transform: translate(-110px,-7px); color: var(--tiny); opacity: .75; } .typingdiv { background: transparent !important; padding: 5px 0px !important; margin-right: -10px !important; } .imdivider { background-color:var(--mainbg);height:1px;margin-top:2em;margin-bottom:1em; width:100%;[/newclass]
[break] [googlefont=Jost|Yantramanav][newclass=".spellchat-hydra"] background: var(--secondbg); font: 13px 'Jost'; color: var(--paper); width: 320px; margin: 20px auto; padding: 20px 30px; } .spellchat-hydra .contact { padding-bottom: 20px; border-bottom: 1px var(--hydra) solid; } .spellchat-hydra .contact h1 { font: 36px 'Yantramanav'; margin: 15px 0 auto; } .spellchat-hydra .contact i { color: var(--hydra); margin: 0 5px; } .spellchat-hydra .contact a { font: inherit; color: var(--tiny) !important; font-weight: normal; margin-right: 5px; } .spellchat-hydra .imbody { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 100%; margin: 15px 0 10px 0; } .spellchat-hydra .imbody div { display: flex; flex-basis: 0; background: var(--mainbg); color: var(--paper); padding: 5px 10px; margin: 10px 0 0 50px; border-radius: 5px; } .spellchat-hydra .imbody div span { display: inline-block; text-transform: uppercase; font-size: 10px; overflow: visible; white-space: nowrap; width: 0; height: 0; transform: translate(-50px, 2px); color: var(--tiny); opacity: .75; } .spellchat-hydra .imbody img { display: block; max-width: 300px; border-radius: 5px; margin: 10px 0 0 50px; } .spellchat-hydra .imbody h2 { display: block; align-self: center; font: 13px 'Jost'; text-transform: uppercase; color: var(--tiny); background: transparent; } .spellchat-hydra .imbody h2::before, .spellchat-hydra .imbody h2::after { content: ' - '; [/newclass] [newclass=".msgreply"] border-left: 1px solid var(--thirdbg); background-color: transparent !important; border-radius: 0 !important; font-size: 0.8em; color: var(--iconcolor) !important; margin-bottom: -0.8em !important; } .msgreply i:before { content:"@"; } .imbody .typingdiv .typing { display: inline-block; text-transform: uppercase; font-size: 10px; overflow: visible; white-space: nowrap; width: 0; height: 0; transform: translate(-110px,-7px); color: var(--tiny); opacity: .75; } .typingdiv { background: transparent !important; padding: 5px 0px !important; margin-right: -10px !important; } .imdivider { background-color:var(--mainbg);height:1px;margin-top:2em;margin-bottom:1em; width:100%;[/newclass] [attr="class","spellchat-hydra"] [attr="class","contact"]
contact name
@tag
[attr="class","fas fa-phone-alt"][attr="class","fas fa-video"][attr="class","fas fa-comments"]
[attr="class","imbody"] 2:50AM
just adding a little quote section hehe
[attr="class","msgreply"]tag quoted message here 2:51AM
reply to quoted message
[attr="class","typingdiv"][attr="class","typing"]MADDOX IS TYPING...
[attr="class","imdivider"] [attr="class","imbody"] 2:55AM
boop
|
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 6, 2022 22:54:29 GMT -7
[nospaces] [attr="class","pie"] MISC SNIPPETS {CLICK FOR INSTRUCTIONS & CODE}
warning box:
[div][*attr="class","blockalert"]warning / alert / impt notice box[/div]
[*newclass=".blockalert"]background: var(--mainbg);color: var(--iconcolor); padding:1em; margin-bottom:1em; font-weight: bold; color: var(--hovericoncolor); text-transform: uppercase; } .blockalert::before { content: "!"; margin-right: 0.8em; color: var(--secondbg); background-color: var(--hovericoncolor); font-weight: bold; width: 25px; height: 25px; display: inline-block; text-align: center; font-size: 15px; border-radius: 50%;[/newclass]
[break]
dialog box with icon:
[div][*attr="class","questtalk"][img src="IMAGEURLHERE"] [span][i]dialogue box with icon.[/i][/span][/div]
[*newclass=".questtalk"] display: flex;justify-content: flex-start;align-items: center;background-color: var(--mainbg);height:60px;box-sizing:border-box;overflow:hidden; } .questtalk img { width: 60px;padding-right: 1em;opacity: 0.6;} .questtalk span { font-size: 0.9em; padding: 0 1em 0 0;[/newclass]
divider:
[div style="background-color:var(--boardbg);height:1px;margin-top:3em;margin-bottom:3em;"][/div]
location stamp:
[div][*attr="class","threaddeets"][b]location[/b][/div]
[*newclass=".threaddeets b"] clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%); font-weight: 500; text-transform: uppercase; font-size: 10px; background-color: var(--boardbg); padding: 2px 8px; color:var(--iconcolor) !important; } .threaddeets { display: flex; justify-content: flex-end; align-content: center; margin-right: -4em;margin-bottom: 1.5em;margin-top: -3em;} .threaddeets b::before { content: "\f14e"; font-family: "Font Awesome 5 Free"; margin: 0 6px 0 2px; color:var(--hovericoncolor);[/newclass]
[break] [attr="class","pie"] [attr="class","threaddeets"]location a little location stamp for threads.[break][break] [attr="class","blockalert"]warning / alert / impt notice box useful for things like alerts, tws, etc. [break][break] [attr="class","questtalk"] dialogue box with icon.[break] a little dialog box with an icon. handy for little npc cameos and the like. a subtle divider for your long posts or stuff. [newclass=".blockalert"]background: var(--mainbg);color: var(--iconcolor); padding:1em; margin-bottom:1em; font-weight: bold; color: var(--hovericoncolor); text-transform: uppercase; } .blockalert::before { content: "!"; margin-right: 0.8em; color: var(--secondbg); background-color: var(--hovericoncolor); font-weight: bold; width: 25px; height: 25px; display: inline-block; text-align: center; font-size: 15px; border-radius: 50%;[/newclass] [newclass=".questtalk"] display: flex;justify-content: flex-start;align-items: center;background-color: var(--mainbg);height:60px;box-sizing:border-box;overflow:hidden; } .questtalk img { width: 60px;padding-right: 1em;opacity: 0.6;} .questtalk span { font-size: 0.9em; padding: 0 1em 0 0;[/newclass] [newclass=".threaddeets b"] clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%); font-weight: 500; text-transform: uppercase; font-size: 10px; background-color: var(--boardbg); padding: 2px 8px; } .threaddeets { display: flex; justify-content: flex-end; align-content: center; margin-right: -4em;margin-bottom: 1em;margin-top: -2em;} .threaddeets b::before { content: "\f14e"; font-family: "Font Awesome 5 Free"; margin: 0 6px 0 2px; color:var(--hovericoncolor);[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 27, 2022 21:46:56 GMT -7
[nospaces] [attr="class","pie"] WANT AD II { CLICK FOR INSTRUCTIONS & CODE} the VERTICAL IMAGE can be any dimensions that are vaguely vertical, with a recommended minimum height of 280px. it'll auto-resize according to the amount of tags placed there as well.[break][break] to replace the ICON, go to fontawesome and select an icon of your choice. replace the existing i class with the details of the chosen icon, e.g. replace fa-solid fa-masks-theater with fa-solid fa-bell to get a bell icon. [nospaces][div][attr="class","sidequestscont"]
[div][attr="class","sidequestsheader"][img src="SMALLICONHERE"] [span]TITLE OF AD HERE[/span][/div]
[div][attr="class","sidequestsabout"] [div][attr="class","sidequestsflavour"][div][attr="class","sidequestsline"][/div]
[span][h3]a small quote.[/h3]
a flavour text kind of blurb. keep it short and sweet![/span]
[div][attr="class","sidequestsline"][/div]
[/div]
[h2]HEADER HERE[/h2]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[h4]A DOT POINT OR SOMETHING[/h4] more words go here.
[/div]
[div][attr="class","sidequeststags"][span]DESC TAG[/span]
[span]LOCATION[/span]
[span]VIBES[/span]
[div style="background-image:url(VERTICLEIMAGEHERE);"][attr="class","sidequestsimg"][/div]
[/div]
[div][attr="class","sidequestscast"]
[div][attr="class","sidequestscastscroll"]
[div][attr="class","sidequestschar"][i][attr="class","fa-solid fa-masks-theater"][/i] [b]CHAR NAME[/b]
[u]npc[/u]
[span]a short one-line description.[/span]
[/div]
[div][attr="class","sidequestschar"][i][attr="class","fa-solid fa-anchor"][/i] [b]CHAR NAME[/b]
[u][a href="/"]profile[/a][/u]
[span]a short one-line description.[/span]
[/div]
[/div]
[/div]
[/div]
[newclass=".sidequestscont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 580px; margin: 0 auto; box-sizing: border-box; padding: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom:5px; text-align:justify; } .sidequestsheader { width: 580px; margin-bottom: 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; } .sidequestsheader img { width: 20px; height: auto; background-color: var(--mainbg); border-radius: 5px; padding: 5px; } .sidequestsheader span { text-transform: lowercase; display: block; padding-left: 5px; width: 100%; font-weight: bold; font-size: 24px; letter-spacing: 0.05em; border-bottom: 12px solid var(--mainbg); height: 25px; margin-left: 5px; } .sidequestsabout { width: 405px; background-color: var(--mainbg); box-sizing: border-box; box-sizing: border-box; overflow: auto; padding: 15px 20px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); text-align:justify; } .sidequestsabout, .sidequeststags { height:280px; } .sidequestsabout h2 { font-size:16px; text-transform:uppercase; border-bottom:4px solid var(--thirdbg); } .sidequeststags { width: 120px; display:flex; flex-direction:column; box-sizing: border-box; } .sidequeststags span { width:120px; display:block; text-align:center; background-color: var(--mainbg); margin-bottom:5px; padding:2px 5px; text-transform:lowercase; box-sizing:border-box; } .sidequestsimg { height:100%; width:120px; box-shadow: inset 0 0 0 300px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; } .sidequestscont b { color:var(--hovericoncolor); } .sidequestscast { width:540px; overflow-x:scroll; box-sizing: border-box; margin-top:5px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); } .sidequestscastscroll { display: flex; justify-content: flex-start; align-items: center; width:fit-content; flex-shrink: 0; overflow:visible; border-bottom:5px solid var(--secondbg); } .sidequestschar { width:220px; height:100px; text-align:justify; background-color:var(--mainbg); box-sizing:border-box; padding: 8px 10px 10px 10px; overflow:auto; margin-right:5px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); } .sidequestschar .fa-regular, .sidequestschar .fa-solid { color:var(--secondbg); background-color: var(--hovericoncolor); height: 50px; width: 50px; font-size: 16px; box-sizing: border-box; border-radius: 40%; text-align: center; margin-left: -30px; margin-top: -28px; line-height: 5px; padding:30px 5px 20px 22px; float:left; } .sidequestsabout h3, .sidequestsabout h2 { font-weight: bold; margin-bottom: 1em; margin-top: 1em; } .sidequestschar b { text-align:center; margin:0 auto; display:block; width:fit-content; border-bottom:2px solid var(--hovericoncolor); margin-bottom:10px; white-space:nowrap; text-transform:uppercase; color:var(--iconcolor); } .sidequestschar u { text-transform:uppercase; text-decoration:none; background-color:var(--hovericoncolor); color:var(--secondbg); font-weight:bold; padding:0 3px; font-size:0.8em; margin-right:5px; } .sidequestschar a { text-decoration:none; color:var(--secondbg); transition:0.2s ease; } .sidequestschar a:hover { color:var(--paper); } .sidequestsabout h3 { text-transform: uppercase; font-size:11px; text-align:center; } .sidequestsabout h4 { display:inline; border-bottom: 2px solid var(--hovericoncolor); margin-right:4px; } .sidequestsabout h3::before { content: '( '; color:var(--hovericoncolor); margin-right:4px; } .sidequestsabout h3::after { content: ' )'; color:var(--hovericoncolor); margin-left:4px; } .sidequestsflavour { border-top:var(--thirdbg); display:flex; flex-direction:column; align-items:center; justify-content:center; height:250px; overflow:hidden; box-sizing:border-box; } .sidequestsflavour span { margin:5px 0 10px 0; } .sidequestsabout::-webkit-scrollbar, .sidequestschar::-webkit-scrollbar, .sidequestscast::-webkit-scrollbar { width: 6px; height:6px; background-color:var(--mainbg); } .sidequestsabout::-webkit-scrollbar-thumb, .sidequestschar::-webkit-scrollbar-thumb, .sidequestscast::-webkit-scrollbar-thumb { background-color:var(--thirdbg); } .sidequestsline { width:2px; height:100%; background-color:var(--thirdbg);[/newclass][break] [attr="class","sidequestscont"] [attr="class","sidequestsheader"]  the white orchids[attr="class","sidequestsabout"] [attr="class","sidequestsflavour"] [attr="class","sidequestsline"] in which pygmalion's lover is a knife.
on this side of salem, you want one of ulla's proteges at your party. sure, they might be dangerous, but who in the vale isn't? besides, ulla sutherland gracing you with her presence means something far more — it means you're important. [attr="class","sidequestsline"] overview an elusive spy ring situated in the vale and surrounding areas, run by a woman named ulla sutherland, and historically backed by the caelestrix family. often associated with the leisure activities of high society and artistic endeavours: think ballet, opera, theatre, so on and so forth. acquisition the white orchid selects their students young. at no younger than eight, they are taken to one of the white orchid's several bases of operation, some of which take the shape of small orphanages. from there, they are trained in whatever manner of art and espionage deemed necessary. there is no 'minimum' age for when a spy takes on their first assignment, though generally training is only considered complete by the age of seventeen.[break][break] their training methods are brutal and merciless, but practical. whether they are cruel is a subjective matter, in ulla's opinion — there is no point in creating something that does not love you back. after all, most of the white orchid's operatives turn out rather loyal in the end.[break][break] historically, the white orchid filled its ranks with the children of nobility who never quite made the cut, so to speak. whatever the reason, the child was turned over to the care of the white orchid, with the promise that they would be turned into something useful.[break][break] in present times, it matters less. the spymaster will simply work with what she has been offered, and take what she has not. orphans, of course, are an easy target, though whether this is coincidental or contrived is another question entirely.[break][break] truth be told, the origin of the child is no matter, so long as there is talent. if there is no talent, then let there be hunger, and if there is no hunger, then sometimes the best thing a flower can do for them is die. reputation as per a typical espionage network, the white orchid is known only in a few select circles. the individual reputation of spies is also often subject to their assignments.[break][break] for example, some spies take on several short-term assignments. to better facilitate swapping between a multitude of faces, these spies often rely on fabricated reputations, corroborated against allied sources. [break][break] others may instead find themselves in long-term assignments, more akin to sleeper agent roles. they may develop a reputation for themselves more organically, and even be recognisable, such as in the arts.[break][break] ulla sutherland herself has a reputation within vale as a bit of an oddity among the nobility. despite marrying into a respectable family, it is not her proximity to nobility that secures her invites to events, but her shrewd wit, clever conversation, and exceptional eye for the arts. get on her good side, and rumor has it that she always has uncannily accurate predictions for which way the tide turns.[break][break] often, she frequents these gatherings surrounded by the artists that she so generously sponsors, or even the charming children she helps to charitably shelter. didn't you hear? the sutherland family made a grand donation to that orphanage by the eastern wall. well, naturally, she laughs, clear as a bell. children are our future after all, and we must take good care of our city. structure presently, the white orchid's activities are concentrated in the vale, though active operatives remain scattered around most of salem's major cities.[break][break] apart from the spymaster herself, there is no strict heirarchy within its ranks of the operatives, though experience often equates to respect. each operative is assigned a codename related to a type of orchid upon the commencement of their first assignment, and though their names will often change depending on assignment, will bear the same codename for the rest of their career until retirement.[break][break] while some operatives will have additional help in establishing their cover, such as sponsoring entry into a coven or setting up a small business, they are expected to maintain their cover independently with minimal support from the white orchid. plot hooks ear to the ground looking to cause a scandal? frame someone for something heinous? the white orchids may be of use, and have a long history of covering up the tracks of people in power. perhaps you're looking to cause problems, or perhaps ( and here i offer my condolences ), you have fallen victim to one of ulla sutherland's many schemes...[break][break] wallflower want to get in on some dramatic shenanigans? read: want to join the circus? the white orchid is always looking. [attr="class","sidequeststags"] spy ring the vale noble politics [attr="class","sidequestsimg"] [attr="class","sidequestscast"] [attr="class","sidequestscastscroll"] [attr="class","sidequestschar"][attr="class","fa-solid fa-masks-theater"] ulla sutherland
npc
the spymaster. a noblewoman from the vale.
[attr="class","sidequestschar"] [attr="class","fa-solid fa-anchor"] SERAFIM STRIX profile a rogue agent currently in hiding under an alias. [attr="class","sidequestschar"] [attr="class","fa-regular fa-snowflake"] MARIN KYOUKI profile a spy masquerading as a boutique seamstress in delphi. [attr="class","sidequestschar"][attr="class","fa-regular fa-circle-question"] NAME
tbd
Lorem ipsum is placeholder text commonly used for previewing layouts and visual mockups.
[newclass=".sidequestscont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 580px; margin: 0 auto; box-sizing: border-box; padding: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom:5px; text-align:justify; } .sidequestsheader { width: 580px; margin-bottom: 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; } .sidequestsheader img { width: 20px; height: auto; background-color: var(--mainbg); border-radius: 5px; padding: 5px; } .sidequestsheader span { text-transform: lowercase; display: block; padding-left: 5px; width: 100%; font-weight: bold; font-size: 24px; letter-spacing: 0.05em; border-bottom: 12px solid var(--mainbg); height: 25px; margin-left: 5px; } .sidequestsabout { width: 405px; background-color: var(--mainbg); box-sizing: border-box; box-sizing: border-box; overflow: auto; padding: 15px 20px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); text-align:justify; } .sidequestsabout, .sidequeststags { height:280px; } .sidequestsabout h2 { font-size:16px; text-transform:uppercase; border-bottom:4px solid var(--thirdbg); } .sidequeststags { width: 120px; display:flex; flex-direction:column; box-sizing: border-box; } .sidequeststags span { width:120px; display:block; text-align:center; background-color: var(--mainbg); margin-bottom:5px; padding:2px 5px; text-transform:lowercase; box-sizing:border-box; } .sidequestsimg { height:100%; width:120px; box-shadow: inset 0 0 0 300px rgba(18, 18, 30, 0.7); background-size: cover; background-position: center; } .sidequestscont b { color:var(--hovericoncolor); } .sidequestscast { width:540px; overflow-x:scroll; box-sizing: border-box; margin-top:5px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); } .sidequestscastscroll { display: flex; justify-content: flex-start; align-items: center; width:fit-content; flex-shrink: 0; overflow:visible; border-bottom:5px solid var(--secondbg); } .sidequestschar { width:220px; height:100px; text-align:justify; background-color:var(--mainbg); box-sizing:border-box; padding: 8px 10px 10px 10px; overflow:auto; margin-right:5px; scrollbar-width: thin; scrollbar-color: var(--boardbg) var(--mainbg); } .sidequestschar .fa-regular, .sidequestschar .fa-solid { color:var(--secondbg); background-color: var(--hovericoncolor); height: 50px; width: 50px; font-size: 16px; box-sizing: border-box; border-radius: 40%; text-align: center; margin-left: -30px; margin-top: -28px; line-height: 5px; padding:30px 5px 20px 22px; float:left; } .sidequestsabout h3, .sidequestsabout h2 { font-weight: bold; margin-bottom: 1em; margin-top: 1em; } .sidequestschar b { text-align:center; margin:0 auto; display:block; width:fit-content; border-bottom:2px solid var(--hovericoncolor); margin-bottom:10px; white-space:nowrap; text-transform:uppercase; color:var(--iconcolor); } .sidequestschar u { text-transform:uppercase; text-decoration:none; background-color:var(--hovericoncolor); color:var(--secondbg); font-weight:bold; padding:0 3px; font-size:0.8em; margin-right:5px; } .sidequestschar a { text-decoration:none; color:var(--secondbg); transition:0.2s ease; } .sidequestschar a:hover { color:var(--paper); } .sidequestsabout h3 { text-transform: uppercase; font-size:11px; text-align:center; } .sidequestsabout h4 { display:inline; border-bottom: 2px solid var(--hovericoncolor); margin-right:4px; } .sidequestsabout h3::before { content: '( '; color:var(--hovericoncolor); margin-right:4px; } .sidequestsabout h3::after { content: ' )'; color:var(--hovericoncolor); margin-left:4px; } .sidequestsflavour { border-top:var(--thirdbg); display:flex; flex-direction:column; align-items:center; justify-content:center; height:250px; overflow:hidden; box-sizing:border-box; } .sidequestsflavour span { margin:5px 0 10px 0; } .sidequestsabout::-webkit-scrollbar, .sidequestschar::-webkit-scrollbar, .sidequestscast::-webkit-scrollbar { width: 6px; height:6px; background-color:var(--mainbg); } .sidequestsabout::-webkit-scrollbar-thumb, .sidequestschar::-webkit-scrollbar-thumb, .sidequestscast::-webkit-scrollbar-thumb { background-color:var(--thirdbg); } .sidequestsline { width:2px; height:100%; background-color:var(--thirdbg);[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jul 29, 2022 8:23:05 GMT -7
[nospaces] [attr="class","pie"] PLAYLIST DEV {CLICK FOR INSTRUCTIONS & CODE}
image dimensions are 600x275.
[nospaces][div][attr="class","playlistcont"]
[div][attr="class","playlisthov"]
[img src="IMAGEHERE"]
[span][b]CHARACTER NAME[/b] A PLAYLIST[/span]
[/div]
[div][attr="class","playlistcontents"]
[h3]PLAYLIST SUBTITLE[/h3]
[div][attr="class","playlistscroll"]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[div][attr="class","playlistsong"]
[a href="/LINKHERE"][i][attr="class","fa-solid fa-play"][/i][/a] [span][b]song title[/b] artist name[/span]
[/div]
[/div]
[/div]
[/div]
[newclass=".playlistcont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 500px; height:500px; margin: 0 auto; box-sizing: border-box; overflow:hidden; } .playlisthov img { width:400px; height:auto; opacity:0.75; } .playlisthov::after { box-shadow: inset 0px -120px 50px -60px var(--mainbg); content: ' '; display: block; width:400px; height:200px; margin-top:-350px; position:absolute; } .playlisthov { width:400px; height:400px; border:50px solid var(--secondbg); background-color:var(--mainbg); transition-duration: 0.5s, 0.8s; transition-property: opacity, margin; } .playlisthov span { display:block; position:relative; z-index:3; margin:0 auto; margin-top:50px; height:100px; width:fit-content; font-size:13px; text-align:center; letter-spacing:1px; } .playlisthov span b { display:block; color:var(--paper); border-bottom:3px solid var(--hovericoncolor); font-size:26px; padding-bottom:5px; margin-bottom:10px; } .playlistcontents { padding:2em 3em; } .playlistcont:hover .playlisthov { margin-top:-500px; } .playlistcontents h3 { font-weight:700; font-size:24px; margin:0; border-bottom:6px solid var(--mainbg); margin-bottom:1em; } .playlistscroll { height:360px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--mainbg) var(--secondbg); } .playlistsong { display:flex; justify-content:flex-start; align-items:center; margin-bottom:5px; } .playlistsong:last-of-type { margin-bottom:0; } .playlistsong .fa-play { background-color:var(--mainbg); height:60px; width:60px; font-size:30px; padding:15px; box-sizing:border-box; text-align:center; transition:0.5s ease; } .playlistsong .fa-play:hover { background-color:var(--hovericoncolor); color:var(--paper); } .playlistsong:hover span { color:var(--paper); } .playlistsong span { background-color:var(--mainbg); height:60px; padding:15px; box-sizing:border-box; font-size:11px; text-transform:uppercase; margin-left:5px; width:100%; letter-spacing:0.5px; line-height:1; transition:0.5s ease; } .playlistsong span b { font-size:16px; display:block; margin-bottom:4px; } .playlistscroll::-webkit-scrollbar { width: 6px; background-color:var(--secondbg); } .playlistscroll::-webkit-scrollbar-thumb { background-color:var(--mainbg); } .playlistsong a { color:var(--hovericoncolor);[/newclass]
[break] [attr="class","playlistcont"] [attr="class","playlisthov"]  SERAFIM STRIX A PLAYLIST [attr="class","playlistcontents"] PLAYLIST SUBTITLE [attr="class","playlistscroll"] [newclass=".playlistcont"]background: var(--secondbg); color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 500px; height:500px; margin: 0 auto; box-sizing: border-box; overflow:hidden; } .playlisthov img { width:400px; height:auto; opacity:0.75; } .playlisthov::after { box-shadow: inset 0px -120px 50px -60px var(--mainbg); content: ' '; display: block; width:400px; height:200px; margin-top:-350px; position:absolute; } .playlisthov { width:400px; height:400px; border:50px solid var(--secondbg); background-color:var(--mainbg); transition-duration: 0.5s, 0.8s; transition-property: opacity, margin; } .playlisthov span { display:block; position:relative; z-index:3; margin:0 auto; margin-top:50px; height:100px; width:fit-content; font-size:13px; text-align:center; letter-spacing:1px; } .playlisthov span b { display:block; color:var(--paper); border-bottom:3px solid var(--hovericoncolor); font-size:26px; padding-bottom:5px; margin-bottom:10px; } .playlistcontents { padding:2em 3em; } .playlistcont:hover .playlisthov { margin-top:-500px;opacity:0; } .playlistcontents h3 { font-weight:700; font-size:24px; margin:0; border-bottom:6px solid var(--mainbg); margin-bottom:1em; } .playlistscroll { height:360px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--mainbg) var(--secondbg); } .playlistsong { display:flex; justify-content:flex-start; align-items:center; margin-bottom:5px; } .playlistsong:last-of-type { margin-bottom:0; } .playlistsong .fa-play { background-color:var(--mainbg); height:60px; width:60px; font-size:30px; padding:15px; box-sizing:border-box; text-align:center; transition:0.5s ease; } .playlistsong .fa-play:hover { background-color:var(--hovericoncolor); color:var(--paper); } .playlistsong:hover span { color:var(--paper); } .playlistsong span { background-color:var(--mainbg); height:60px; padding:15px; box-sizing:border-box; font-size:11px; text-transform:uppercase; margin-left:5px; width:100%; letter-spacing:0.5px; line-height:1; transition:0.5s ease; } .playlistsong span b { font-size:16px; display:block; margin-bottom:4px; } .playlistscroll::-webkit-scrollbar { width: 6px; background-color:var(--secondbg); } .playlistscroll::-webkit-scrollbar-thumb { background-color:var(--mainbg); } .playlistsong a { color:var(--hovericoncolor);[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Oct 15, 2022 7:33:21 GMT -7
[nospaces] [attr="class","pie"] MISC SNIPPETS III will update with instructions and code when it's not 1am or whenever i remember LOL until then quote for code / @ me on the discord if you need help![break] code for progress bars:[break][break] pick either variant from this: [div][attr="class","progressbarmax"]
[div style="width:0%;"][attr="class","progressbarfill"]0%[/div][span]progression status message[/span][/div]
[break]
[div][attr="class","progressbarmax"][div style="width:80%;"][attr="class","progressbarfill"]80%[/div]
[span style="float:left;color:var(--secondbg);padding-left:5px;"]progression status message[/span][/div][break] [attr="class","pie stamp"][attr="class","fa-solid fa-bookmark"] COVEN MISSION, CYCLE 000 [attr="class","pie stamp"][attr="class","fa-solid fa-clock"] MONTH 20XX[attr="class","fa-solid fa-map-location-dot"] AELMOR, THE WEST SALEM SEA [newclass=".pie.stamp"]margin-bottom:5px; padding:0; background-color:transparent; display:flex; justify-content:space-between; align-items:center; gap:5px; } .pie.stamp span { display:block; text-align:center; background-color:var(--secondbg); padding:6px 20px; font-size:12px; opacity:0.8;flex-grow: 1; } .pie.stamp span:first-of-type { width:40%; } .pie.stamp span:last-of-type { width:60%; } .pie.stamp span .fa-solid { color:var(--hovericoncolor); margin-right:5px;[/newclass] [attr="class","pie"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc. Tristique senectus et netus et malesuada fames ac turpis. Aliquet sagittis id consectetur purus ut faucibus. [attr="class","encounter"] [attr="class","encounterimg"] encounter title here A small in-post code for encounters or whatever. Bold text is automatically coloured into the default accent colour of the site, but you can change this under .encounter b. Minimum size for the image is 375x100, but it'll resize anything larger than that as well. Mi bibendum neque egestas congue quisque egestas. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Massa vitae tortor condimentum lacinia quis vel eros. Porttitor massa id neque aliquam vestibulum morbi blandit. [break] [attr="class","talkbox"] [attr="class","talkimg"]  [attr="class","talkright"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [break] [attr="class","progressbarmax"] [attr="class","progressbarfill"]0% progression status message[break] [attr="class","progressbarmax"] [attr="class","progressbarfill"]80% progression status message[newclass=".encounter"]margin-top:25px; border-top:4px solid var(--mainbg); padding:0 0 15px 0; border-bottom:4px solid var(--mainbg); } .encounterimg { background-image:url(https://cdn.discordapp.com/attachments/292274811185397770/988023158420439080/stars.png); height:100px; background-size:cover; background-position:center; margin-bottom:10px } .encounterimg h3 { margin:0; text-align:center; margin-top:-70px; font-size:18px; font-weight:bold; color:var(--paper); border-bottom:4px solid var(--hovericoncolor); width:20%; white-space:nowrap; margin-left:20px; opacity:0.8; letter-spacing:1px; } .encounterimg::before { content: ""; box-shadow: inset 0 0 0 1000px rgba(20, 21, 30, 0.35); background-image: linear-gradient(to bottom, transparent 50%, var(--secondbg)); z-index: 2; width:100%; height:100px; display:block; } .encounter b { color:var(--hovericoncolor) !important;[/newclass] [newclass=".talkbox"]display: flex; align-items: center; justify-content: space-between; flex-wrap:wrap; overflow:hidden; border-top:4px solid var(--mainbg); border-bottom:4px solid var(--mainbg); padding:15px 0; } .talkimg img { width: 40px; height: 40px; background-color: var(--mainbg); padding: 4px; border-radius: 100%; } .talkimg { box-sizing:border-box; width:20%; } .talkright { box-sizing:border-box; width:80%; } .talkimg::after{ position:absolute; content: ''; width: 0; height: 0; margin-top:15px; margin-left:-2px; border-left: solid 10px var(--mainbg); border-bottom: solid 10px transparent; border-top: solid 10px transparent;[/newclass] [newclass=".pie"]background: var(--secondbg);color: var(--iconcolor); overflow:hidden; font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:4em;text-align:justify; box-sizing:border-box;} .pie a { text-transform:uppercase; display:inline-block; background-color:var(--mainbg); padding:0.6em 0.8em;font-size:10px;} .pie .notes { display: block;font-size: 10px;letter-spacing: 0.05em;padding: 4em 4em 0 4em;text-align: center;border-top: 1px solid var(--mainbg); margin-top: 4em; } .pietag { margin-top:4em; text-align:center; } div[rel=user-22] .pie b { color: var(--hydra); [/newclass] [newclass=".progressbarmax"] background-color:var(--mainbg); width:100%; border-radius:10px; box-sizing:border-box; padding:5px; height:25px; overflow:hidden; } .progressbarmax span { float:right; margin-top:-16px; color:var(--hovericoncolor); font-weight:600; padding-right:5px; font-size:11px; text-transform:uppercase; } .progressbarfill { background-color:var(--hovericoncolor); border-radius:10px; height:15px; font-weight:600; color:var(--secondbg); font-size:11px; line-height:15px; text-transform:uppercase; text-align:right; box-sizing:border-box; padding-right:8px; white-space:nowrap; overflow:hidden; min-width:30px;[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Oct 24, 2022 6:10:25 GMT -7
[nospaces] [attr="class","pie"] PLOTTER II no instructions im lazy ok just @ me in the discord if something looks wonky [div][attr="class","p2cont"]
[div][attr="class","p2top"][div][attr="class","p2img"][img src="https://cdn.discordapp.com/attachments/292274811185397770/1034089495294906398/z1.png"][/div][div][attr="class","p2name"][b]serafim strix[/b][span]the shapeshifter[/span][/div][/div]
[div][attr="class","p2tags"][span]pegasus[/span] [span]alchemy[/span] [span]aquos[/span] [span]sentinel[/span][/div]
[div][attr="class","p2content"]
[div][attr="class","p2box"][i][attr="class","fa-solid fa-magnifying-glass"][/i] [h3]reputation[/h3]
how is the character perceived by others? in general? in certain circles?
[/div]
[div][attr="class","p2box"][i][attr="class","fa-solid fa-pen"][/i] [h3]developments[/h3]
what have they been up to lately? did they do something in a certain event?
[/div]
[div][attr="class","p2box"][i][attr="class","fa-solid fa-envelope"][/i] [h3]connections & plot hooks[/h3]
general spot for plot hooks and connections can go here.
[/div]
[/div]
[div][attr="class","p2tags"][span]status[/span] [span]alive and causing problems[/span][/div]
[/div]
[newclass=".p2cont"]color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 520px; margin: 0 auto; text-align: justify; box-sizing: border-box; } .p2content { min-height:50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px; background-color:transparent; margin-bottom:5px; } .p2box h3 { margin:0; border-bottom:2px solid var(--hovericoncolor); white-space:nowrap; margin-bottom:10px; padding-bottom:3px; position:relative; z-index:1; text-align:right;font-size: 15px;font-weight: bold; } .p2box { width:257.5px; background-color:var(--secondbg); padding:15px; box-sizing:border-box; overflow:auto; height:120px; scrollbar-width:thin; scrollbar-color:var(--mainbg) var(--secondbg); text-align:justify; line-height:150%; } .p2box b { color:var(--hovericoncolor); } .p2box:last-of-type { width:100%; height:180px; } .p2box .fa-solid { background-color:transparent; color:var(--thirdbg); border:3px solid var(--mainbg); position:relative; float:left; box-sizing:border-box; font-size:15px; border-radius:100%; z-index:0; height:40px; width:40px; padding:12px 8px 8px 11px; margin-top:-25px; margin-left:-25px; margin-right:-35px; } .p2top { border-bottom:5px solid var(--mainbg); box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; background-color:var(--secondbg); } .p2img img { width:80px; max-width:80px !important; opacity:0.9; } .p2img { width:80px; height:80px; padding:15px; border-right:5px solid var(--mainbg); } .p2name { width:100%; padding:15px; } .p2name b { display:block; width:100%; font-weight: bold; font-size: 24px; letter-spacing: 0.05em; border-bottom: 12px solid var(--mainbg); height: 25px; } .p2name span { text-align:right; display:block; text-transform:uppercase; font-size:11px; letter-spacing:1px; } .p2tags { border-bottom:5px solid var(--mainbg); background-color:var(--mainbg); display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:5px; } .p2tags:last-of-type { grid-template-columns: 1fr 3fr; } .p2box::-webkit-scrollbar { width: 4px; } .p2box::scrollbar { width: 4px; } .p2box::-webkit-scrollbar-track { background: var(--secondbg); } .p2box::-webkit-scrollbar-thumb { background: var(--thirdbg); } .p2tags span { background-color:var(--secondbg); text-align:center; padding:3px; text-transform:uppercase; font-size:10px; letter-spacing:1px;[/newclass]
[break] [attr="class","p2cont"] [attr="class","p2top"] [attr="class","p2img"]  [attr="class","p2name"]serafim strixthe shapeshifter [attr="class","p2tags"]pegasus alchemy aquos sentinel [attr="class","p2content"] [attr="class","p2box"][attr="class","fa-solid fa-magnifying-glass"] reputation
how is the character perceived by others? in general? in certain circles?
[attr="class","p2box"][attr="class","fa-solid fa-pen"] developments
what have they been up to lately? did they do something in a certain event?
[attr="class","p2box"][attr="class","fa-solid fa-envelope"] connections & plot hooks
general spot for plot hooks and connections can go here.
[attr="class","p2tags"]status alive and causing problems [newclass=".p2cont"]color: var(--iconcolor); font-family: "Jost"; font-size: 13px; line-height: 1.8; width: 520px; margin: 0 auto; text-align: justify; box-sizing: border-box; } .p2content { min-height:50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px; background-color:transparent; margin-bottom:5px; } .p2box h3 { font-size: 15px;font-weight: bold; margin:0; border-bottom:2px solid var(--hovericoncolor); white-space:nowrap; margin-bottom:10px; padding-bottom:3px; position:relative; z-index:1; text-align:right; } .p2box { width:257.5px; background-color:var(--secondbg); padding:15px; box-sizing:border-box; overflow:auto; height:120px; scrollbar-width:thin; scrollbar-color:var(--mainbg) var(--secondbg); text-align:justify; line-height:150%; } .p2box b { color:var(--hovericoncolor); } .p2box:last-of-type { width:100%; height:180px; } .p2box .fa-solid { background-color:transparent; color:var(--thirdbg); border:3px solid var(--mainbg); position:relative; float:left; box-sizing:border-box; font-size:15px; border-radius:100%; z-index:0; height:40px; width:40px; padding:12px 8px 8px 11px; margin-top:-25px; margin-left:-25px; margin-right:-35px; } .p2top { border-bottom:5px solid var(--mainbg); box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; background-color:var(--secondbg); } .p2img img { width:80px; max-width:80px !important; opacity:0.9; } .p2img { width:80px; height:80px; padding:15px; border-right:5px solid var(--mainbg); } .p2name { width:100%; padding:15px; } .p2name b { display:block; width:100%; font-weight: bold; font-size: 24px; letter-spacing: 0.05em; border-bottom: 12px solid var(--mainbg); height: 25px; } .p2name span { text-align:right; display:block; text-transform:uppercase; font-size:11px; letter-spacing:1px; } .p2tags { border-bottom:5px solid var(--mainbg); background-color:var(--mainbg); display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:5px; } .p2tags:last-of-type { grid-template-columns: 1fr 3fr; } .p2box::-webkit-scrollbar { width: 4px; } .p2box::scrollbar { width: 4px; } .p2box::-webkit-scrollbar-track { background: var(--secondbg); } .p2box::-webkit-scrollbar-thumb { background: var(--thirdbg); } .p2tags span { background-color:var(--secondbg); text-align:center; padding:3px; text-transform:uppercase; font-size:10px; letter-spacing:1px;[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Nov 5, 2022 0:42:15 GMT -7
[nospaces] [attr="class","pie2"] CHANGING HOVERS PER POST credit to icey for figuring out how to change the hovers ![break][break] to change hovers for a specific post, you'll have to post first, then edit the post afterwards.[break][break] - right click on post & select inspect element[break]
 - scroll up a little until you see a row that starts with something like tr id="post-12640"[break]
 - copy the number and append it to the start of your newclass code.[break]
[newclass="nullelem"]} #post-POSTIDNUMBER .mini-profile.user-IDNUMBER .mini-prof { background-image: url(NEWHOVERIMAGE)!important;[/newclass][newclass=".pie2"]background: var(--secondbg);color: var(--iconcolor); font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:2em;text-align:justify; box-sizing:border-box;} .pie2 a { text-transform:uppercase; font-size:0.8em; } div[rel=user-111] .pie2 b { color: var(--hovericoncolor); [/newclass] [newclass="nullelem"]} #post-16699 .mini-profile.user-111 .mini-prof { background-image: url(https://cdn.discordapp.com/attachments/292274811185397770/1038054590777659432/a162.png)!important;[/newclass] |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Nov 16, 2022 7:02:25 GMT -7
[nospaces] [attr="class","pie"] CUSTOM DICE ROLLS these are just styled variants of the default dice roll on the site -- let me know if you have any questions![break][break] to use, copy the relevant portion of code and replace [*ROLLHERE] with [r oll]. the additional hover for a roll bonus/penalty only works for the solo dice roll, and can be added via span tags, like so: [roll][span]+10[/span][b]reason[/b][break] { CLICK FOR CODE } [attr="class","codeblock"][div][attr="class","action2cont"]
[div][attr="class","action2status"][span][b]SERAFIM[/b] is currently using [b]SPELL 1, SPELL 2, SPELL 3[/b][/span][/div]
[*ROLLHERE][/div]
[newclass=".action2cont"] display: flex; justify-content: space-between; align-items: center; margin-top: 3em; gap:0; } .action2status { background-color:var(--mainbg); height:50px; font-size:11.5px; box-sizing:border-box; width:100%; padding:5px 12px; z-index:0; text-align:left; display:flex; padding-right:30px; justify-content:flex-start; align-items:center; line-height:120%; margin-right:-20px; border-radius:5px 0 0 5px; } .action2status b { color:var(--hovericoncolor); } .action2cont .vdice-box, .action2cont .fa-solid { width:40px !important; min-width:40px; height:40px !important; background-color: var(--mainbg) !important; border:5px solid var(--mainbg) !important; border-radius:100%; outline:4px solid var(--secondbg); display:flex; justify-content:center; align-items:center; z-index:1; } .action2cont .fa-solid { font-size: 20px; } .action2status span { max-height:30px; overflow:auto; scrollbar-width: none; } .action2status span::-webkit-scrollbar { width:0px; } .action2cont .vdice-value { padding:0; position:relative; display:inline; z-index:1; padding-top: 0px !important; font: bold 20px 'Jost',sans-serif !important; } .action2cont .vdice-box + span { background-color:var(--secondbg); outline:2px solid var(--mainbg); height:26px; width:26px; min-width:26px; line-height:26px; box-sizing:border-box; white-space:nowrap; border-radius:100%; font-size:8px; font-weight:bold; overflow:hidden; margin-left:-13px; margin-right:-13px; margin-top:-34px; position:relative; text-align:center; z-index:2; } .action2cont .vdice-box::before { content:''; background: url('https://cdn.discordapp.com/attachments/292274811185397770/1042420525806391386/d20.png'); height: 38px; width: 38px; background-size:cover; position: absolute; opacity:0.2;[/newclass]
[div align="center"][div][attr="class","customdice"][*ROLLHERE][/div][/div]
[newclass=".customdice"] text-align:center; width:fit-content; border:5px solid var(--mainbg); border-radius:100%; padding:8px;display: inline-block; } .customdice .vdice-box { border:0px; margin:0px; width:60px !important; height:60px !important; display:flex; justify-content:center; align-items:center; background-color:transparent; } .customdice .vdice-box::before { content:"\f6cf"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant: normal; text-rendering: auto; font-weight:900; color:var(--mainbg); font-size:60px; position:absolute; display:block; z-index:0; } .customdice span { position:absolute; background-color:var(--secondbg); outline:4px solid var(--mainbg); transition:0.5s ease; height:30px; width:30px; line-height:30px; box-sizing:border-box; white-space:nowrap; border-radius:100%; margin-top:-65px; margin-left:20px; font-size:10px; font-weight:bold; overflow:hidden; } .customdice span + b { position:absolute; margin-top:-62px; background-color:var(--hovericoncolor); color:var(--secondbg); font-size:12px; padding:0px 6px 0px 4px; margin-left:65px; white-space:nowrap; opacity:0; transition:0.5s ease; } .customdice span + b::before { content: ""; position:absolute; margin-top:-4px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--hovericoncolor); transform:rotate(-90deg); left: -11px; top: 10px; } .customdice:hover span + b { opacity:1; } .customdice:hover span { outline:4px solid var(--hovericoncolor); color:var(--paper); } .customdice .vdice-value { position:relative; z-index:1; width:60px !important; padding-top:0px; font-weight:bold; font: bold 22px "Jost", sans-serif;[/newclass]
[div][attr="class","actioncont"]
[*ROLLHERE]
[div][attr="class","actiondesc"][h3]SERAFIM ROLLS TO [b]ATTACK[/b][/h3]
[span]currently active: [b]FAMILIARIS[/b] - [b]WINGED[/b] & [b]PHYSIOLOGICAL[/b] variants, [b]ZOOLOGIST[/b] - crow & snow leopard[/span][/div]
[/div]
[newclass=".actioncont"] display: flex; justify-content: center; align-items: center; margin-top: 3em; gap:4px; } .actioncont .vdice-box { border: 0px; box-shadow: none; background-color: var(--mainbg); text-align: center; width: 80px; margin:0px; } .vdice-value {font-weight:bold !important;font-size: 25px !important;} .actiondesc { height: 80px; overflow: hidden; width: calc(100% - 80px); box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--mainbg) var(--boardbg); font-size: 12px; } .actiondesc h3 { margin:0; background-color:var(--mainbg); padding:0px 6px; font-size: 10px; letter-spacing: 1px; height: 22px; line-height: 22px; box-sizing: border-box; font-weight: bold; } .actiondesc h3::before { content:"\f6cf"; font-family: "Font Awesome 5 Free" !important; font-weight:900; color:var(--hovericoncolor); margin-right:6px; border-right:4px solid var(--secondbg); height:22px; display:inline-block; padding-right:4px; } .actiondesc h3 b { color:var(--hovericoncolor); } .actiondesc span { text-align:left; background-color:var(--mainbg); display:block; margin-top:4px; padding:10px; height:54px; box-sizing:border-box; line-height:140%; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--thirdbg) var(--mainbg); } .actiondesc span::-webkit-scrollbar { width: 4px; height:4px; background-color:var(--mainbg); } .actiondesc b { color:var(--hovericoncolor); } .actiondesc span::-webkit-scrollbar-thumb { background-color:var(--thirdbg);[/newclass] [break] [attr="class","pie"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Fermentum odio eu feugiat pretium nibh ipsum. Pretium viverra suspendisse potenti nullam ac tortor vitae. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. [attr="class","action2cont"] [attr="class","action2status"]SERAFIM is currently using SPELL 1, SPELL 2, SPELL 3 eK8QbqMt[break] [attr="class","action2cont"] [attr="class","action2status"]SERAFIM is currently using SPELL 1, SPELL 2, SPELL 3 +05[break] [attr="class","action2cont"] [attr="class","action2status"]SERAFIM is currently using SPELL 1, SPELL 2, SPELL 3. this part should scroll, but looks best if it's limited to two lines. [attr="class","fa-solid fa-moon"][break] [attr="class","customdice"] [attr="class","customdice"]+10skill: glass cannon [break] [attr="class","actioncont"] [attr="class","actiondesc"] SERAFIM ROLLS TO ATTACK
currently active: FAMILIARIS - WINGED & PHYSIOLOGICAL variants, ZOOLOGIST - crow & snow leopard[newclass=".pie"]background: var(--secondbg);color: var(--iconcolor); font-family: 'Jost';font-size: 13px;line-height: 1.8; width: 475px; margin: 0 auto; padding:5em 4em 4em 4em;text-align:justify; box-sizing:border-box;} .pie a { text-transform:uppercase; width:fit-content; margin:0 auto; display:inline-block; background-color:var(--mainbg); padding:0.6em 0.8em;font-size:10px;} .pie .notes { display: block;font-size: 10px;letter-spacing: 0.05em;padding: 4em 4em 0 4em;text-align: center;border-top: 1px solid var(--mainbg); margin-top: 4em; } .pie s { font-size:0.75em;text-transform:uppercase;letter-spacing:0.1em; font-weight:bold;color:var(--pegasus);text-decoration:none; } .pietag { margin-top:4em; text-align:center; } div[rel=user-61] .pie b { color: var(--pegasus); [/newclass] [newclass=".action2cont"] display: flex; justify-content: space-between; align-items: center; margin-top: 3em; gap:0; } .action2status { background-color:var(--mainbg); height:50px; font-size:11.5px; box-sizing:border-box; width:100%; padding:5px 12px; z-index:0; text-align:left; display:flex; padding-right:30px; justify-content:flex-start; align-items:center; line-height:120%; margin-right:-20px; border-radius:5px 0 0 5px; } .action2status b { color:var(--hovericoncolor); } .action2cont .vdice-box, .action2cont .fa-solid { width:40px !important; min-width:40px; height:40px !important; background-color: var(--mainbg) !important; border:5px solid var(--mainbg) !important; border-radius:100%; outline:4px solid var(--secondbg); display:flex; justify-content:center; align-items:center; z-index:1; } .action2cont .fa-solid { font-size: 20px; } .action2status span { max-height:30px; overflow:auto; scrollbar-width: none; } .action2status span::-webkit-scrollbar { width:0px; } .action2cont .vdice-value { padding:0; position:relative; display:inline; z-index:1; padding-top: 0px !important; font: bold 20px 'Jost',sans-serif !important; } .action2cont .vdice-box + span { background-color:var(--secondbg); outline:2px solid var(--mainbg); height:26px; width:26px; min-width:26px; line-height:26px; box-sizing:border-box; white-space:nowrap; border-radius:100%; font-size:8px; font-weight:bold; overflow:hidden; margin-left:-13px; margin-right:-13px; margin-top:-34px; position:relative; text-align:center; z-index:2; } .action2cont .vdice-box::before { content:''; background: url('https://cdn.discordapp.com/attachments/292274811185397770/1042420525806391386/d20.png'); height: 38px; width: 38px; background-size:cover; position: absolute; opacity:0.2;[/newclass] [newclass=".customdice"] text-align:center; width:fit-content; border:5px solid var(--mainbg); border-radius:100%; padding:8px;display: inline-block; } .customdice .vdice-box { border:0px; margin:0px; width:60px !important; height:60px !important; display:flex; justify-content:center; align-items:center; background-color:transparent; } .customdice .vdice-box::before { content:"\f6cf"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant: normal; text-rendering: auto; font-weight:900; color:var(--mainbg); font-size:60px; position:absolute; display:block; z-index:0; } .customdice span { position:absolute; background-color:var(--secondbg); outline:4px solid var(--mainbg); transition:0.5s ease; height:30px; width:30px; line-height:30px; box-sizing:border-box; white-space:nowrap; border-radius:100%; margin-top:-65px; margin-left:20px; font-size:10px; font-weight:bold; overflow:hidden; } .customdice span + b { position:absolute; margin-top:-62px; background-color:var(--hovericoncolor); color:var(--secondbg); font-size:12px; padding:0px 6px 0px 4px; margin-left:65px; white-space:nowrap; opacity:0; transition:0.5s ease; } .customdice span + b::before { content: ""; position:absolute; margin-top:-4px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--hovericoncolor); transform:rotate(-90deg); left: -11px; top: 10px; } .customdice:hover span + b { opacity:1; } .customdice:hover span { outline:4px solid var(--hovericoncolor); color:var(--paper); } .customdice .vdice-value { position:relative; z-index:1; width:60px !important; padding-top:0px; font-weight:bold; font: bold 22px "Jost", sans-serif;[/newclass] [newclass=".actioncont"] display: flex; justify-content: center; align-items: center; margin-top: 3em; gap:4px; } .actioncont .vdice-box { border: 0px; box-shadow: none; background-color: var(--mainbg); text-align: center; width: 80px; margin:0px; } .vdice-value {font-weight:bold !important;font-size: 25px !important;} .actiondesc { height: 80px; overflow: hidden; width: calc(100% - 80px); box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--mainbg) var(--boardbg); font-size: 12px; } .actiondesc h3 { margin:0; background-color:var(--mainbg); padding:0px 6px; font-size: 10px; letter-spacing: 1px; height: 22px; line-height: 22px; box-sizing: border-box; font-weight: bold; } .actiondesc h3::before { content:"\f6cf"; font-family: "Font Awesome 5 Free" !important; font-weight:900; color:var(--hovericoncolor); margin-right:6px; border-right:4px solid var(--secondbg); height:22px; display:inline-block; padding-right:4px; } .actiondesc h3 b { color:var(--hovericoncolor); } .actiondesc span { text-align:left; background-color:var(--mainbg); display:block; margin-top:4px; padding:10px; height:54px; box-sizing:border-box; line-height:140%; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--thirdbg) var(--mainbg); } .actiondesc span::-webkit-scrollbar { width: 4px; height:4px; background-color:var(--mainbg); } .actiondesc b { color:var(--hovericoncolor); } .actiondesc span::-webkit-scrollbar-thumb { background-color:var(--thirdbg);[/newclass] ···· |
|
gold
familiar Familiaratlas
played by OOC Namelav
prawndering the shrimplications
code monkey
|
Post by lav on Jan 15, 2023 7:31:21 GMT -7
[nospaces] [attr="class","post2"] CUSTOM SUMMARIES instructions + non-spoiler version pending. note that there is an existing spoiler bug where navigating between pages will result in code not loading properly due to the way that proboards handles page changes. refreshing the page will fix this. [break] [attr="class","post2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [attr="class","notes"] { notes}[break]
[attr="class","fa-solid fa-pen"] summary of actions.[break]
[attr="class","fa-solid fa-up-down-left-right"] character movements and locations.[break]
[attr="class","fa-solid fa-wand-magic-sparkles"] spells or items used.[break]
[attr="class","fa-solid fa-heart-pulse"] active statuses, injuries, etc.[newclass=".notes .fa-solid"]color: inherit; font-size:11px; width:18px; display:inline-block;[/newclass] [break] [attr="class","codeblock mini"][div style="padding:25px 50px 0 50px;"][attr="class","notes"]
[spoiler]{[h6]notes[/h6]}[break]
[b][i title="tl;dr"][attr="class","fa-solid fa-pen"][/i][/b] summary of actions.[break]
[b][i title="movement"][attr="class","fa-solid fa-up-down-left-right"][/i][/b] character movements and locations.[break]
[b][i title="using"][attr="class","fa-solid fa-wand-magic-sparkles"][/i][/b] spells or items used.[break]
[b][i title="status"][attr="class","fa-solid fa-heart-pulse"][/i][/b] active statuses, injuries, etc.[/spoiler][/div]
[newclass=".notes .fa-solid"]color: inherit; font-size:11px; width:18px; display:inline-block;[/newclass] [break] [attr="class","post2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [attr="class","notes"] gZtSaL0V [break] [attr="class","tldrscroll"][attr="class","fa-solid fa-pen"] summary of actions. this scrolls, since we all know keeping tl;drs short is a challenge. lorem ipsum dolor sit amet, consectetur adipiscing elit.[break]
[attr="class","fa-solid fa-up-down-left-right"] character movements and locations.[break]
[attr="class","fa-solid fa-wand-magic-sparkles"] spells or items used.[break]
[attr="class","fa-solid fa-heart-pulse"] active statuses, injuries, etc. [break] [attr="class","codeblock mini"][div][attr="class","notes"]
[div][attr="class","tldrscroll"][b][i title="tl;dr"][attr="class","fa-solid fa-pen"][/i][/b] summary of actions. this scrolls, since we all know keeping tl;drs short is a challenge. lorem ipsum dolor sit amet, consectetur adipiscing elit.[break]
[b][i title="movement"][attr="class","fa-solid fa-up-down-left-right"][/i][/b] character movements and locations.[break]
[b][i title="using"][attr="class","fa-solid fa-wand-magic-sparkles"][/i][/b] spells or items used.[break]
[b][i title="status"][attr="class","fa-solid fa-heart-pulse"][/i][/b] active statuses, injuries, etc.[/div][/div] |
|
