[attr="class","selkieomens"]

WO's skin started with me drafting a logo that changed based on the real-world lunar cycle and ended with me saying “go” on launch after being awake for 17 hours and i wouldn’t have wanted it any other way. what a helluva first skin to drop, LMAO. i’ve had the technical ability to create a skin for a good few years now, i think, but all of the sites i ended up spending a significant amount of time were run by hella talented coders, so i never really had the opportunity. still, i’m glad to have thrown my hat in the ring at least this once! it’ll probably be more tbh. i have been converted.

i’m also taking the opportunity to drop some of the more advanced things here as a demo, because i like how they turned out and tbh it’d make my day to see someone with a better eye for design build on this stuff. (forewarning, though ⁠— the language i’m using is very much “by coders, for coders”.)

miscellaneous technical features i like, in no specific order:

custom skin accents mask-image does a whooole heck of a lot of lifting with this. the rainbow animation when you load in as guest is pure css, and the skin additionally changes by the user’s member group. there’s also an option to input your own colors scheme to customize your own skin.

technical explanation: custom profile field filled out by user is pulled into a CSS variable on the main class. the rainbow effect is, again, mask-image + css animation. fallbacks to member groups are inlaid….somewhere. i think it’s in the CSS, but don’t quote me on that one.

content warning system this was something i’d had the idea for a loooooooong time ago and i think it came together super nice!


technical explanation and demo: users can add a <cw>list of triggers</cw> or <cw-toggle>list of triggers</cw-toggle> in threads or applications. with the latter, a pseudo-element from cw-toggle is used to toggle the visibility of anything wrapped in a <censor> class.

i,,,, haven’t actually tested this specific demo to see if it works, but hopefully the gist is gotten across!
basic CSS
cw-toggle {
 display: flex;
 width: 100%;
 place-items: center;
 place-content: center;
 text-align: center;
 position: relative;
 margin-top: 25px;
 margin-bottom: 50px;
 color: #000;
 font: 700 11px roboto;
 pointer-events: none;
}
cw {
 margin-bottom: 25px;
}
cw-toggle:before,
cw:before {
 content: "this post contains";
 font: 900 10px/90% roboto;
 text-transform: uppercase;
 position: absolute;
 top: -10px;
 color: #000;
}
.cwbuttonhidecontent:after,
.cwbuttonshowcontent:after {
 position: absolute;
 bottom: -20px;
 background: red;
 padding: 5px;
 border-radius: 5px;
 cursor: pointer;
 font: 900 10px/90% roboto;
 text-transform: uppercase;
 pointer-events: auto;
 color: #fff;
}
.cwbuttonshowcontent:after {
 content: "show sensitive content";
}
.cwbuttonhidecontent:after {
 content: "hide sensitive content";
}

.cwcensorshowcontent {
 background: initial !important;
 color: revert !important;
}

.cwcensorhidecontent {
 background: #111;
 color: #111;
}
.cwcensorhidecontent b, .cwcensorhidecontent i, .cwcensorhidecontent u, .cwcensorhidecontent a {
color: revert!important;
}
scripting (jquery will need to be enabled on the forum for this to work)
goes in the wrapper:
<script>$('cw-toggle').addClass('cwbuttonhidecontent');
$('censor').addClass('cwcensorshowcontent');</script>
goes in the post row:
<script>// censor toggle function
$(function(){
   $('cw-toggle').click(function() {
$(this).toggleClass('cwbuttonhidecontent cwbuttonshowcontent');
$("#pid_<!-- |pid| --> censor").toggleClass('cwcensorshowcontent cwcensorhidecontent');
   });
});</script>
goes in the main profile (i.e. for profile pages):
<script>$(function(){
   $('cw-toggle').click(function() {
$(this).toggleClass('cwbuttonhidecontent cwbuttonshowcontent');
$(this).siblings('censor').toggleClass('cwcensorshowcontent cwcensorhidecontent');
   });
});</script>

toggleable, responsive sidebar w/ custom links i’d conceptualized this skin from the start as having a toggleable sidebar, with the gist being “first sidebar is new-user-friendly, second sidebar is settled-in-user-friendly”. i think one of the issues with sidebars is that they can just become wasted space ⁠— once you’ve got a character nice n’ registered on site you’re probably not going to need links to the startup guide taking up valuable screen space, and so on. i attempted to counter this by adding in a “quicklinks” section which lets users quickly jump to their development, tracker, and testing threads, in addition to various forums around the site.

the other gambit w/ sidebars is that you have a lot more variation in screen size and stuff that looks great on some monitors looks like poo poo shit on others. i just went ahead and made both those bitches responsive:


custom user accents gist here is that there’s a custom profile field in which you can enter a hex code which will color the main profile and post row. the concept wasn’t mine, but i’m happy with the execution.


technical explanation & demo: the custom user accent is stored as a profile field, which is pulled into a CSS variable. if no accent is entered, it falls back to the user’s member group color. this is done through CSS in the post row and the following script in the main profile:
<script>if ('<!-- |field_USERACCENT| -->' === '<i>No Information</i>') {
  $("profile").attr("style", "--custom:var(--group);");
}</script>
(where --group is stored in the skin as a variable dependent on the user’s member group so groupid-2 would have --group defined as red, groupid-3 with --group defined as green, so on and so forth)

with great power comes great responsibility, but i’ve shoved accessible-colors.com down the memberbase’s throats and they’ve honestly been fuckin’ killing it with readibility. regardless, there is, additionally, a setting in the UCP which disables this quote “rainbow bullshit”. that, plus a toggleable light mode, hopefully means that the skin is about as accessible color-wise as you can get?

usercp-hosted template system built-in post templates use custom profile fields to set lyrics and images. if those fields are left blank, they’re removed from the post entirely. this, for example, has nothing surrounding the text besides [*post2][*/post2]. usercp settings can also be overridden per-post for those sadstuck threads.


brief technical overview and demo: classes are standardized across templates, so lyric-1, lyric-2, post-image-1, are all targeted in jquery. these classes pull values from custom user profile fields and bbcodes have also been set up on the forum to override the default settings (this works by creating an override class i.e. lyric-1-override which replaces the initial instance). the scripting for this is notably shoestring due to it p. much pushing the limits of the custom profile field system in the first place, so i’m providing this as-is and won’t be offering support on implementing it.

scripting in post row ⁠—
<script>$("#pid_<!-- |pid| --> .lyric-1").text("<!-- |field_LYRIC1| -->");
$("#pid_<!-- |pid| --> .lyric-2").text("<!-- |field_LYRIC2| -->");
$("#pid_<!-- |pid| --> .post-icon").prepend('<img src="<!-- |field_SQUAREIMAGE| -->">');
$("#pid_<!-- |pid| --> .post-image-1").prepend('<img src="<!-- |field_LARGEIMAGE1| -->">');
$("#pid_<!-- |pid| --> .post-image-2").prepend('<img src="<!-- |field_LARGEIMAGE2| -->">');
if( $('#pid_<!-- |pid| --> .post-image-2-override').length )
{
$("#pid_<!-- |pid| --> .post-image-2").replaceWith($("#pid_<!-- |pid| --> .post-image-2-override"));
}
if( $('#pid_<!-- |pid| --> .post-image-1-override').length )
{
$("#pid_<!-- |pid| --> .post-image-1").replaceWith($("#pid_<!-- |pid| --> .post-image-1-override"));
}
if( $('#pid_<!-- |pid| --> .lyric-1-override').length )
{
$("#pid_<!-- |pid| --> .lyric-1").replaceWith($("#pid_<!-- |pid| --> .lyric-1-override"));
}
if( $('#pid_<!-- |pid| --> .lyric-2-override').length )
{
$("#pid_<!-- |pid| --> .lyric-2").replaceWith($("#pid_<!-- |pid| --> .lyric-2-override"));
}
if( $('#pid_<!-- |pid| --> .post-icon-override').length )
{
$("#pid_<!-- |pid| --> .post-icon").replaceWith($("#pid_<!-- |pid| --> .post-icon-override"));
}
</script>

scripting in wrapper ⁠—
<script>

// if no lyrics




$(".lyric-1:empty").remove();


$(".lyric-2:empty").remove();


// if no images


$(".post-image-1:empty").remove();


$(".post-image-2:empty").remove();


$(".post-icon:empty").remove();
$(".post-icon img[src='']").remove();
$(".post-image-1 img[src='']").remove();
$(".post-image-2 img[src='']").remove();
$(".post-image-1-override img[src='x']").remove();
$(".post-image-2-override img[src='x']").remove();
$(".post-icon-override img[src='x']").closest('.post-icon-override').hide();

</script>

the HTML of the template previewed above, as an example:
<div class="omens-post-template omens-post-2"><div class="post-image-2"><div class="lyric-1"></div><div class="lyric-2"></div></div><div class="post-body"><div class="post-icon"></div>(PARAM1)</div></div>

this does, as a downside, not play nice with jcink’s search function and topic summary while posting. the lyric lines also eat shit when there’s manual line breaks in them, but o well :’D.

if you're interested in utilizing any of the above demos, feel free to poke around on the live preview of the skin if that helps you learn better -- i'd really just request that you don't use anything ripped live from the skin in something actually published. (also if a skinner uses anything plsplspls link me i wanna seeeeeeeee)

...there's probably stuff i'm forgetting, but ye! if urban fantasy sounds like your thing, we're a pretty fun little group :hue:.

also if u join our server u get the :hellble: emote.



what more can u ask for tbh