• She/Her They/Them Fae/faer

Commie non-binary trans woman.


Kayin
@Kayin

Discord is truly a wretched app, and with each update they add more and more needless buttons, noise, and nonsense, likely at the behest of some talentless facebook middle manager that they hired, who makes more in a year than you've made in your entire life.

While nothing will fully stop the rapid enshittification of discord (and frankly other platforms), but we can mend the papercuts.

... At least on desktop.

Anyways in this, I'm going to talk about taking the above image, and using CSS to get to this.

We love CSS around here

We love CSS around cohost! We love CSS Crime. In the era where almost every "native" application is a webpage in some kind of wrapper, using CSS can become kinda punk. The visual nature of CSS leads to a lot of low stakes comedy, like the Github CSS Exploit. Malicious CSS attacks are possible, but generally speaking, CSS at worst is street graffiti.

If you're a developer, CSS kinda sucks, but that's another story. We're the proles today.

Discord, CSS, changing CSS on Discord, and Caution

Discord, as a desktop app, is, like mentioned above, merely a web browser. As such, it can be freely styled by CSS. Discord doesn't easily allow this by default, but we have a few options. All the major discord mods(things like BetterDiscord and VenCord) allow you to add CSS freely. Those things are cool and pretty safe, but also allow a lot of unsafe stuff. You almost certainly won't get banned for just using BetterDiscord or VenCord, but you could be banned, or even hacked, for many of the 3rd party plugins they allow. Discord doesn't check if you're using a modified client, but they do notice if you're making illegal API calls. Running custom javascript in discord is fun, but comes with a lot of risks. If you go this route, I recommend being extremely selective which what features you enable. That said, I might value my discord account more than a lot of you.

Instead, I'm going to talk about BeautifulDiscord, because it's what I use, because it does exactly what I want it to, and nothing more. It gives me a CSS file I can edit. The whole thing is like 800 lines of python, mostly in two files. If you're a coder and wanted to, you could read and understand the whole thing pretty reasonably. Slim and simple.

A 3rd option real quick is to enable the inspector in Discord. We'll get to using browser inspectors, but the inspector and console attached to it used to be used constantly for (honestly pretty obvious) scams. I have a friend who uses the inspector to set their custom CSS manually every time they restart discord. This would be the "100% legit" way to do things if you wanted, since you're not actually modifying the client at all.

Edit: A 4th option I keep seeing is openASAR, which rewrites parts of discord to be faster while giving options for themeing. This isn't one of those big plugin mods with a store system or something like BD or Ven, so while I haven't used it, I'd still recommend it as it has an easy install, performance gains, and nothing sketchy looking.

Regardless of which way you go, the parts after installing BeautifulDiscord should all be relevant.

Installing BeautifulDiscord

This is the slightly annoying part, especially for the average user. BeautifulDiscord requires python to install. You can install it through python.org or, if you're on windows(honestly, I'm not sure how some of this stuff works on Mac or Linux), use the Microsoft store. The Microsoft store version is largely fine and less confusing. It's the version I use, because I'm lazy.

Just search for python and pick the highest current version (3.11 at the time of this writing).

So now we could do a bunch of stuff on the command-line, but instead I'm going to have you make two .bat files. Just open notepad or whatever and put in.

py -i -m pip install -U https://github.com/leovoel/BeautifulDiscord/archive/master.zip

py -m pip tells python to use its native version of pip the python package manager. install -U [url] obviously is used to install the file at the given URL (as found on BeautifulDiscord's github). The -U means this will upgrade the package if it's out of date too. I have this file named updateBeautifulDiscordCore.bat, but you can save it as anything, as long as it ends in .bat.

Run it once. Now that the package is (hopefully) installed, we actually have to use it on discord. For that I make a second bat files.

py -i -m beautifuldiscord --css D:\bd\tweaks.css

Don't just fully copy and paste this one. This is where I put my files. I have this named as updateDiscordBD.bat

Change D:\bd\ to whatever you want. Change tweaks.css to whatever you want. You could do C:\Users[username]\Desktop\BeautifulDiscord\style.css if you want. I like to keep the bat files in the same folder, with the css file, but they don't have to be. You'll be able to change this later if you want by editing(I assume most cohosters are savvy, but if you're not, you can just open the bat with notepad again. Just drag the file onto an empty notepad window) and rerunning the script.

Run this, with discord open. It should close discord and reopen it and... nothing should be different?

I THINK BD will make the .css file for you, but if it doesn't just open notepad and make tweaks.css or style.css or whatever name you thought was cool

Also as a note, every time discord updates, your changes may go away. To restore them, run updateDiscordBD.bat again. If that doesn't work, discord might have pushed a major update, in which case, you run updateBeautifulDiscordCore.bat, then updateDiscordBD.bat again. I haven't had to run Core in years, but sometimes it can take a bit for updates to happen so you can go check the github if you're curious.

Figuring out CSS and what to Change

My recommendation here is to open up discord in a web browser(It works about the same in Firefox and Chrome). You could do the client inspector method above, but for ease of use, I usually test my changes in the browser first. Let's start with that annoying new button they added.

Shift + Right Click on it and then click Inspect

The inspector can be overwhelming at first, but what we want to do is click around the html near where the inspector opened until we find something that seems to select as much as the element we want to block (generally a div, span, or button) as possible. We then look over to the style editor, and look for one CSS Class comes up earliest (ignore element: {}, it's useful a lot of stuff, but not what we're doing right now). If you lose where you are, you can use the element picker button on the top left of the inspector to point to the element you want to see.

.channelAppLauncher_df39bd seems good, and the big yellow box shows us the margin. This is important because when an object is taking up so much space, we want to make sure we get that space back.

I add display: none; to the CSS and... poof. That easy.

Okay it's not that easy

First thing we need to do is copy all that into out tweaks.css(or the CSS editor of whatever mod you're using). All you should have to do is save the file and the results should appear in your client

.channelAppLauncher_df39bd {
  margin-left: var(--spacing-16);
  margin-bottom: 24px;
  align-content: flex-end;
  position: relative;
  display: none;
}

okay actually we don't need all that though. We then cut out everything else but what we actually changed.

.channelAppLauncher_df39bd {
  display: none;
}

That said, you can use this to change other values. Say you want a button to look SMALLER or something. I can't give you a whole CSS tutorial, but you have a lot of options.

You can also skip this step. If you unlock this feature in discord, you can hit CTRL+SHIFT+I to bring up the inspector, make your changes and simply... leave them there. You'll have to redo it when you restart discord but hey, the price of doing this with a vanilla install.

Not all things clean up easily. If you try and say remove the sticker button (you can post stickers from the emote menu why is it there!!!), you'll notice that...

... Oh shit that was all the buttons. Selecting the PRECISE element of something can be hard sometimes. If you mess up so bad you can't tell what's going on, you can always refresh the browser and try again.

So what do we do for these buttons? I like using aria labels, little accessibility hooks that are useful for reliably identifying certain elements. Instead of random lines of numbers and letters, you get names that get used by things like screen readers. This has the added benefit that you rarely have to redo these changes as discord updates.

button[aria-label="Send a gift"] { display: none; }
button[aria-label="Open GIF picker"] { display: none; }
button[aria-label="Open sticker picker"] { display: none; }
button[aria-label="Start an Activity"] { display: none; }
div[aria-label^="Add Super Reaction"] { display: none; }

These are the codes I use on my end to keep things clean, but you can remove ones you want to keep or even kill the emoji button if you want ("Select Emoji", if you so desire). An important part is you actually have to note what element the aria-label is in. Most of these are buttons, but Super Reaction, which appears in a different place, is a div. You just have to look at what the label is actually inside of.

Also hilarious I realize they removed that button anyways and I know longer need that line, but it still illustrates an important point!

To show some other examples, I find the message hover effect to be distracting so I have...

.theme-dark {
	--background-message-hover: rgba(255, 255, 255, 0.00) !important;
}

Which makes the darkening effect totally transparent, effectively hiding it. But also here is the !important. CSS stands for cascading stylesheets so if you have like....

body{
	background-color: red;
}

body{
	background-color: white;
}

The background color will be white because the last thing takes priority. If a hover effect is added dynamically to an element, its priority might be beneath our attempts to remove it. !important tells the CSS to not let anything override this property. The only thing that will override it is another, lower !important. This can be an important(lol) too when CSS hacking.

Edit: Also going to point to this comment which links to an excellent list of possible element ids to use to customize stuff

Anyways if you came into this unfamiliar with CSS and the inspector, this is a lot to take in but it's VERY learnable. Play around, break stuff, set horrible colors, make a mess. Mess with other websites! Use UBlockOrigin and these principles to block every annoying Twitter change! Download... god what do people use now, TamperMonkey??? Enforce your will upon your computer!

CSS is punk, and we should all strive to be a little more punk.



YuushaRuby
@YuushaRuby

My wife has been missing a lot of work due to illness plus their job hasn’t been paying them properly, and they’ve also been sending my wife home/not guaranteeing full time.

This new job has been a nightmare for us but luckily they’re going back to their old job soon.

However, my wife has set up a gofundme to raise money to help with lost wages/pay bills. Anything helps, thank you.

Edit: the goal has been set to $1000 now due to my wife being fired from their job today. They’ve been told not to return to work after being sent home. A kid was very sick and my wife suggested he be sent home or at least be swapped with someone else since my wife is immunocompromised. A coworker offered to take the kid and the boss was like “that’s not your decision to make” and sent my wife home.
They wouldn’t even test the kid for covid lol. This job has been such a shit show since they started.


YuushaRuby
@YuushaRuby

Still a lot left to go on this ;0; thank you whoever donated the $20 so far though!!!



Adell
@Adell

Finished cooking up my character for my Princess Wing game and will be playing Session 1 next tuesday

A dark skinned woman with freckles, large puffy green hair, glasses and a bored/disgruntled expression

Yasmin (she/her), is nearing her graduation at Fairy Tale academy, being a bit older than most of her peers (21). Although not a slacker or dissatisfied with the classes and her abilities, deep down she really wishes to have a plain, normal job like her parents - who are extremely excited about how special their little girl is.

For her armaments I went with the logic of "I have a gun, a bigger gun and then - you will never guess it - the biggest gun". She has a sniper rifle, a hellblast magnum adapted for close range, and wears the Match-Seller inspired Dress Code, which can be used to burst into a power flamethrower once per scenario.

this is the picrew I used btw


Adell
@Adell

Finished my one-shot of Princess Drive. Very interesting game, and also very breezy - we clocked around 2 hours for the full session, plus a little more for break and after-session chat.

The structure of the session emulates the feeling of an episode cartoon very well. You have a segment that's more or less Slice of Life, introducing the characters and the special participants that will be the center of the mystery. Since we played with a pre-made scenario, we had handouts detailing that certain PCs would have a established relationship with NPC 1 or 2, and split accordingly. All PCs get to have a small scene with their friend/rivals, playing out their relationship and also learning what is troubling them.

After having that initial scene and setting up the drama, we move to the Investigation Phase, where PCs dig into what's happening. To do so, we discard cards from our hands to make use of our Life Tags - these are personal details you choose when creating a character, like favorite food, part-time job, dreams, etc. For example, I used my favorite food "Pizza" to get together with one of the troubled NPCs and relax with her, while learning that she was having issues with her little sister and giving some sage advice. Other PCs do the same, and if all goes according to the plan, we learn not only details about this mystery, but also earn special mystery Tags related to the problem at hand.

When all PCs have done their investigation actions, we draw back to the full hand and move to combat. Even that is pretty straightforward, the map is fairly small (I think 8x8) and there's not much resistances or stats to keep track off. You can still pull off some impressive combos, if you know how to set them up (one of the players attacked 3 times in the same turn by managing to discard almost their entire hand with some clever equipment), plus there's incentive for players to "team up" by exchanging cards and setting up better attacks. You can also use a Joker card to have an all out attack, where all players attack in that same turn. With the main boss defeated, we close the combat up with attempting to purify them, and using the previously acquired mystery Tags that we learned about during our investigation to do so, solving the issue at hand.

The battle felt a bit too easy, maybe due to having 4 people when the game is really meant to have 2 or 3 PCs, but it was still a lot of fun. We all had some good fun scenes, emotional moments, and I got to set everything on fire (for justice)


Adell
@Adell

Had one last game of Princess Wing tonight. This one felt even lighter, now that we were all far more acquainted with the mechanics. If I had more time, I'd definitely be talking about this game in servers, or even hosting my own tables, given how easy it is to pick up and play, the pre-made scenarios really work with the episodic anime feeling.

Roses of today's session:

  • Our resident dog girl jumping at her besties over how happy she feels when meeting them

  • Our tactician making the best speeches whether it is to Princess On! or engage with a dramatic situation

  • The GM guiding the session well and putting a lot of voice work into the characterization of the NPCs

Personal Star:

  • Doing a quadruple attack as the finisher on the boss, with a Sniper Rifle, Hellblast Magnum and Avalon Rifle (fired twice), while saying that I would take the NPC back home with the power of friendship and this gun I found


Camryn
@Camryn

I'll give it to y'all straight. We're in some serious financial trouble right now. We've been having to skip some of our less essential prescriptions in order to make sure we can afford food.

First, I had a colonoscopy.

Then, a storm blew down large chunks of our fence.

Then, we had to get two tires replaced.

Then, I had to get a two week supply of xifaxan for over 1,080 bucks

THEN, Pandi hurt her leg again and we had to pay a bunch of vet bills for x-rays and special stomach-safe doggy painkillers

And lastly, we can't rely on my grandma for help because she's being investigated by the IRS because merill lynch fucked her over by transferring all her money out of her account WITHOUT DEDUCTING TAXES. They did this without informing us whatsoever. We're pretty sure it's because we started a beef with one of the managers over there. Yes, we're considering filing a lawsuit, but that's going to come much later.

So, in other words, everything sucks. Bad.

I couldn't afford my estradiol this week.

In total, we need about $3,250 to cover everything and get back in the black.

Please share this around to everyone you can.

And please donate. Even if it's just two bucks, every little piece helps.

How to donate:

https://www.paypal.me/camrynaisling (please ignore the deadname)

https://cash.app/$CamrynAisling

#Trans Healthcare#US healthcare#american healthcare#financial aid#finance#finances#financials#financial aid request#financial assistance#financial crisis#money woes#give me money#donate#donation#donations#donation post#donation link#donation drive#mutual#mutual aid#mutual aid request#trans mutual aid#queer mutual aid#trans crowdfund#Trans creator#trans creators#crowd#Fund#funding#fundraiser#fundraising#Trans Crowd Fund#crowdfund#crowdfunding#crowd funding#furry crowdfunding#trans crowdfunding#mutual aid network#mutual aid groups#direct#aid#direct aid#direct action#direct aid request#need help#need money#help#help me#help needed#help post#all#every#global#global feed#The Cohost Global Feed#Cohost Global Feed#The Global Cohost Feed#the global feed#global timeline#the global timeline#Cohost Global Timeline#disaster#disasters#vet bills#vet#bill#bills#monthly bills#pet pics#Pet#Pets Of Cohost#my pets#pet photos#dog#dogs#dogs of cohost#pets#pics#pic#animal#animals#cute animals#cute#medical stuff#medical bills#medical insurance#wind#storm#storms#health#healthcare#pet health#debt#medical debt#debt relief#paypal#gofundme#pay#PAL#cash app#cash#app#cashapp#charity#Charity Event#charity drive#furries#furries of cohost#disabled#Disability#Disabled artist#Queer#gay#Lesbian#trans#trans girl#trans woman#transgender#The Cohost Global Feed (Transgender)#queer artist#polyamory#polyam#polycule#polycules#Lesbian polycule#polycule posting#meta#cohost meta#dog dog dog#doggo#pupper#ibs#IBS Gang#hot girls with ibs#IBS moment#antibiotics#medicine#medical#medication#estrogen#hrt#ayudame#underwater#pictures#cool picture#pet pictures#photo#photos#photography#own photo#fence#post#posting#chosting#rechost#rechosting#Disability justice#disability pride#Disability Crowd Fund#Disabled Mutual Aid#disabled crowdfund#The cohost mutual aid feed#cohost#chost#eggbug#money#day#night#stars#star#space#coolstation#coolstatio#italian#American#america#paisano#Juicer#italy#ss13#repair#home#home repair#homestuck#feed#timeline#please#reading#xifaxan#gastroenterologist#gastrointestinal issues#house#IRS#bank#income#low income#poor#Broke#broke bitch#mortgages#mortgage#audit#judas priest#amogus#among us#amongus#sus#video games#video game#gaming#retro gaming#tag#tags#tagslug#car repair#car#cars#tire#tires#prescription drugs#prescriptions#prescription#estradiol#share#shares#mutuals#Please rechost#please rechost for visibility#Please rechost if you don't mind!!#food#investment#investigation#investing#holp#mario#luigi#camryn#pandi#pandora#lab#labrador#retriever#labrador retriever#doggie#doggy#wood#woodworking#yard#yardwork#gamer#Gamers#cohost gamer#cohost gamers#hello gamers#PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE

Camryn
@Camryn

$2,995 still to go.

Thank you all for your generosity thus far. We greatly appreciate it.

There's still a long way to go, but I believe we can get there.