this post was submitted on 18 Mar 2026
3 points (100.0% liked)

PieFed CSS

1224 readers
3 users here now

Share CSS snippets that make your PieFed experience a wee bit different.

In your settings at https://your-instance.com/user/settings there is a field 'Additional CSS' where you can put snippets of CSS code.

founded 9 months ago
MODERATORS
 

I changed my theme to the Hercules 1982 theme. Its very nice, other than the colors are a bit off for my taste. I'd like to change those.

I managed to change the background color to what I wanted, by the cunning use of copypasting a part of a css tutorial thing. But turns out, copypasting doesn't work for everything. I'm a total newbie, I drive trucks for a living, I have no idea what I'm doing with these computing machine things lol.

Anyway, I'd like to change the text color and the title bar background color, the thing that has the Piefed logo, communities, explore, account and donate links. I tried looking for tutorials and such, but I think I'm looking for wrong things or maybe I'm just underestimating my own stupidity (very highly likely). Anyone wanna help me?

top 4 comments
sorted by: hot top controversial new old
[–] hendrik@palaver.p3x.de 2 points 5 days ago* (last edited 5 days ago) (1 children)

FYI: The browser's Web Developer Console is super helpful to poke at things. You right-click on an element and choose "Inspect". And a tab will open with something called Inspector or Elements. And you can then mess with the styles and change them around to see what you like. It's temporary changes, so a refresh will revert everything. Somewhere below the HTML there will also be an overview with how to access the element. Unfortunately it's not super straightforward to make sense of it without prior knowledge of CSS.

I'd say the navbar is something like this:

div.navbar { background-color: aqua; }  
.nav-link { color: red; }  
[–] HuudaHarkiten@piefed.social 3 points 5 days ago

The browser’s Web Developer Console is super helpful to poke at things. You right-click on an element and choose “Inspect”.

This much I knew, but sadly that's where my knowledge ended lol. Its all hieroglyphs for me haha. But I'll keep poking around and trying stuff, its not like I can break anything :-D

I’d say the navbar is something like this:

div.navbar { background-color: aqua; }

This worked, thanks!

[–] wjs018@piefed.social 1 points 5 days ago (1 children)

I see you already got the background color of the navbar sorted. As for the text color, if you really want to change the text color for pretty much everything that isn't a link (including stuff like icons), then you could do something like this (using red as an example):

* {  
    color: red;  
}  

However, you might want to be more selective and only change the text color in certain areas.

  • Post body and comments:
body {  
    color: red;  
}  
  • Text in the cards on the sidebar:
.card-body {  
    color: red;  
}  
  • The color of hyperlinks:
a {  
    color: red;  
}  
[–] HuudaHarkiten@piefed.social 2 points 5 days ago

Oh nice, that took care of most things. Thanks!

I'll see if I can figure out that "inspect" thing and use that to do the rest :)