Cherp QoL Fixes

Fixes for the cherp.chat roleplaying website made with love by Éinín

Hey, I'm Éinín. I'm an avid user of the website cherp.chat, a multifandom roleplaying website focused on long-form replies. As much as I love the website-- and I really do-- there are some visual aspects that I personally find unpleasant or inconvenient; while they certainly do not make the site unusable, they bothered me enough that I was willing to make a change.

As a hobbyist "web designer" I got my start on Neopets, where I designed pet profile pages and user lookups-- as a result, I love messing with other people's code. Hence, when things about Cherp began to bother me, I took matters into my own hands the only way I know how.

Rules

The Quality of Life fixes available on this webpage are made possible through Stylus for Firefox. You will have to install the extension in order to use the fixes provided. They are desktop only. These fixes are unfortunately not available for mobile users, and as far as I'm aware, not to users of browsers other than Firefox and Chrome (Stylish for Google Chrome). I highly recommend using Firefox, as that is the browser I use myself; I cannot provide troubleshooting for issues with Google Chrome because I do not use it.

These changes are PURELY COSMETIC. They take advantage of existing CSS/HTML on the website and make stylistic changes to the website. They do not have any impact whatsoever on the "meta" of the website, it is exclusively visual. I do not advocate for people trying to change the directory meta. These codes are not capable of that.

I ask politely that you do not redistribute the codes by virtue of putting them on sites like Pastebin (unless you've made changes that you want to share specifically, in which case go wild). However, as much as they were put together by me, they were initially developed by somebody else, and are owned by the cherp.chat staff, so... also, like, do whatever you want, really. I can't do anything about it. But it'll make me sad.


How to use

This guide is written as if you know nothing about Stylus or the words "syntax" or "hex code," I wrote it as if I were trying to explain the process to my mother over the phone. I just want to cover all my bases and make it as easy to follow for any given person as possible.

Step one: Install Stylus for Firefox. Restart your browser, just for the sake of it. Make sure you have the shortcut icon for Stylus in the topbar on right hand side of your browser.

A screenshot of the top right part of your browser window.

Step two: Go to the cherp.chat website and click the Stylus icon in your topbar. A menu will pop up. At the bottom, select Write a style for...

A screenshot of the menu that appears when you click on the Stylus icon in your topbar.

Step three: Paste the code you want to use into the very big, unmissable, ostentatious box. If it recognizes the code, you will see the code with some words in different colors, as well as previews of the hex codes (representing colors) next to the numbers and letters.

A screenshoot of the Directory Fix code pasted into the Stylus input box. Some of the words have changed color to indicate the engine recognizes the code.

Step four: At the very bottom of the page, delete whatever URL is in the box (such as the URL https://cherp.chat/directory) and leave ONLY https://cherp.chat/. Nothing else. Make sure that the dropdown to the left says "URLS starting with."

A screenshot of the bottom of the Stylus page, where it says 'Applies to...' with the option 'URLS on the domain' selected and 'https://cherp.chat/' in the text box.

Step five: On the sidebar at the top left, you can change the name of the style to be more descriptive. This is for the directory button, so I named it Cherp.chat Directory Button Fix so I could find it later. Then click the "save" button. You're done! The style will now show up on Cherp, and no websites other than Cherp.

A screenshot of the sidebar of the Stylus page with 'Cherp.Chat Directory Button Fix' in the text box. The enable box is also checked.

If you're confident in your CSS knowledge, please feel free to change the colors or use inspect element to make additional changes to the code you use. If you make changes, I implore you to share the code with others freely! It would be really cool if you did.


The Fixes

A screenshot of the website with the fix applied.

Original Directory Buttons: The buttons for cherp.chat as I originally imagined them when posting in the Discord. These might be fun to customize to your liking.

Hovering over the buttons will turn the background color to the native header teal at the top of the page (behind the "CHERP" header image).

#content .tile2 ul.request_tags li a{ padding: 5px; box-shadow: 0 0 0 #fff; 
	border: 0; transition: 0.2s; }
#content .tile2 ul.request_tags li{ margin: 5px 0; }
#content .tile2 ul.request_tags li:first-of-type{ margin-top: 0; }
#content .tile2 ul.request_tags li a:hover{ 
    background: #4ea8c0; color: #eee !important;
    box-shadow: 0 0 0 #fff; border: 0 !important; filter: none; 
    transition: 0.4s; }

A screenshot of the fix described.

Remove Directory Buttons: this is a fix to remove the new "button" style tags in the Directory. The code displays the tags roughly as they appeared before the fix.

Behaviors remain the same. Hovering over a tag makes the underline disappear. No other changes have been made.

#content .tile2 ul.request_tags { margin: 5px 0; }
#content .tile2 ul.request_tags:first-of-type { margin-top: 0; }
#content .tile2 ul.request_tags li { padding: 0; }
#content .tile2 ul.request_tags li:after { content: ", "; }
#content .tile2 ul.request_tags li:last-child:after { content: ""; }
#content .tile2 ul.request_tags li a, #content .tile2 ul.request_tags li.maturity a, 
#content .tile2 ul.request_tags li.warning a, #content .tile2 ul.request_tags li.fandom a, 
#content .tile2 ul.request_tags li.character a {
    color: #009;
    text-decoration: underline;
    background: none; border: none;
    box-shadow: 0 0 0 #fff;
    margin: 0;
    padding: 0;
    transition: none;
}
#content .tile2 ul.request_tags li.warning a { color: #f33; }
#content .tile2 ul.request_tags li.warning a:hover{ color: #f33 !important; text-decoration: none; }

#content .tile2 ul.request_tags li a:hover {
    color: #009 !important;
    text-decoration: none;
    filter: none;
    background: none !important;
    border: none !important;
    box-shadow: none;
    margin: 0;
    padding: 0;
    transition: none;
}

Credits and Additional Info

If you have a COSMETIC change you would like me to look into, or errors you would like to report, please message me on Tumblr, where I can be found at einin.tumblr.com. I do not take requests through Discord; anonymous questions are turned on and can be utilized if you do not have a Tumblr. Please keep in mind I will most likely release whatever fix you request for use by anyone on the internet.

Cherp.chat is owned and maintained by people other than me. To my knowledge, it was built by someone named Insolent, visually and technically based off of design and function of the now defunct cherubplay.co.uk. It is currently owned by TT. I'm just picky and intrusive with boundary issues and I like things to look the way I want them to look.

My name is Éinín. I'm a hobbyist who built and maintains moiraodeorain.com. My personal website is einin.gay (you're on it!). I've been doing CSS and HTML for most of my life now, starting out on Neopets around 2008-2009 after somebody told me my idea for a pet page was ugly as hell and that if I wanted it to exist, I had to make it myself. I did. It was ugly.

You may recognize me from the Cherp.chat Discord server, where I occasionally ask questions about tagging and complain about other people being bad at tagging. I also submitted the proposed changes to the button-style menu redesign of the Directory. That was also made in Stylus.

If you want to learn more about HTML and CSS, I suggest starting with freecodecamp to start. I highly recommend w3schools for reference. This webpage, and all my other webpages, were written by hand in Atom and/or Notepad++. I recommend going about web design literally any other way.

Changelog

July 31st (PART 2!)— Updated the remove boxes code because the way I did it made no sense. I literally have no clue what happened there. Anyway, it looks better now. Also fixed the date because for some reason I thought it was August.

July 31st — Updated to include the new "Remove Directory Buttons" code and "Original Directory Buttons" code, following the Cherp.chat update. "Better Directory Buttons" was removed as it was fixed by the devs in the update and therefore redundant. You love to see the devs responding to user concerns!!!

June 6th — Website was created with the original Directory Fix and Cherubplay.co.uk joke code, in anticipation of the update including the new buttons.