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 and immediately broke everything.

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.

Back to top

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.

Back to top

The Fixes

An animated gif of the fix described.

Better Directory Buttons: this is a fix to add additional styling to the directory navigation buttons in order to make the links easier to hit. The boxes have been updated to show that they are clickable when you hover over them. The borders in the dropdown menus have also been fixed.

Behaviors remain the same. No other changes have been made.

.dropdown button#dropdown-basic{ font-size: 12pt; padding: 3px; margin-top: 10px; cursor: pointer; }
    .dropdown-menu{ border-style: solid; }
    .dropdown-menu a{ text-decoration: none; font-size: 11pt; }
    .dropdown-menu a.dropdown-item:last-child{ border-bottom: none; }

Verified Circle Hider: this is a simple code to prevent the annoying pop-in of the verified circle whenever you reload the page. It simply keeps the circle from ever appearing.

.verifiedCheck{ display: none; }

Unverified Prompt Hider: a much-requested feature in the Cherp Discord, this fix is to hide prompts by unverified users in the directory. This fix allows you to browse only prompts from other verified users. If you wanted, you could modify this code to only show unverified prompts, as well. I guess. 

ul#chat_list .tile2.request.posted:not(.verified){ display: none; }

OOC Message Toggler: another frequently requested fix in the Cherp Discord, this code allows you to hide OOC posts on chat pages, providing you or your partner marked a message as OOC. This code will not work if the messages aren't marked as OOC. Nothing else has been changed.

I highly suggest making a separate toggle for this fix, using the method described above but calling it "OOC Message Toggler" so you can turn it on and off as needed. If I don't do this, I tend to forget that I have the OOC message toggler on and get confused as to why it says my chat is unanswered but I can't see anything. Save yourself the trouble and make a separate toggle.

.message_ooc{ display: none; }

Cherp Full Styling: Putting this here as an honorable mention because I absolutely will not be providing support for this when it inevitably breaks. This is not a fix, but rather custom color styling for all of Cherp, and it's super fucking broken and I know it and there's very little I can do about it. Known bugs are blocks of text on the homepage and Site Use page being illegible due to being the same color as the background and probably a bunch of other stuff I don't know about because I only look at my own chats.

I only recommend this for people with basic CSS knowledge already.This code is absolutely massive and commented thoroughly to hopefully make editing it a little easier, but again, I will not be providing support for editing this code because it's so huge and unwieldy. Use at your own discretion. If it breaks or doesn't look right, just delete everything and start again.

You can find the css for this styling here. Follow the same steps in the How to Use section.

Back to top

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 heyeinin.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. I have no affiliation, so please don't ask me any difficult questions.

My name is Éinín. I'm a hobbyist who built and maintains moiraodeorain.com. My personal website is heyeinin.com (you're on it!). 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.

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 Visual Studio Code. Absolutely do not do this.

Back to top

Changelog

January 21st 2022 — Updated the website for the first time in six months, haha. Removed the tags fix due to the toggle button being implemented. Added the Better Directory Button back because I wanted to. Added verified circle remover, unverified prompt hider, and ooc message toggler.

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.