this post was submitted on 18 Sep 2025
25 points (100.0% liked)

PieFed Meta

4798 readers
3 users here now

Discuss PieFed project direction, provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics.

Wiki

founded 2 years ago
MODERATORS
 

PieFed allows you to specity CSS in your settings so you can make it look however you like. What CSS do you use to improve your experience?

I whipped up some today to make the PWA better (for me) on mobile. It moves the post and comment action buttons to the right side, where your hand is (sorry lefties), puts the title below the preview for image/video posts, and makes previews full-width on mobile. Pretty minor, but it makes a big impact to me.

.post_utilities_bar .pull-right,  
.comment_actions .pull-right {  
  margin: 0;  
}  

.post_utilities_bar .voting_buttons_new,  
.comment_actions .voting_buttons_new {  
  order: -1;  
}  

.post_utilities_bar,  
.comment .comment_actions  {  
  justify-content: right !important;  
  flex-direction: row-reverse;  
}  

@media only screen and (max-width:990px) {  
  .post_teaser_image_preview,  
  .post_teaser_video_preview {  
    position: relative;  
    right: 13px;  
    width: 100vw;  
  }  

  .post_teaser_image_preview a,  
  .post_teaser_video_preview div {  
    border: none;  
    border-radius: 0;  
    max-width: 100vw;  
    max-height: 100vh;  
  }  

  .post_teaser_video_preview p {  
    margin-bottom: 0;  
  }  

  .post_teaser_body:has(.post_teaser_image_preview, .post_teaser_video_preview) {  
    display: flex;  
    flex-direction: column;  
  }  

  .post_teaser_body .post_teaser_image_preview,  
  .post_teaser_body .post_teaser_video_preview {  
    order: -1;  
  }  
}  

A screenshot of the frontpage of PieFed with the above css added in

Sidenote, I think the css feature might be doing some xml encoding or something because > doesn't seem to work in selectors. I didn't mess around enough to prove that definitively.

top 14 comments
sorted by: hot top controversial new old
[–] rimu@piefed.social 6 points 10 months ago (1 children)

Welcome to PieFed :)

Also pls see https://piefed.social/c/piefed_css there are many more CSS snippets.

I'll look into that > issue.

[–] chisel@piefed.social 1 points 10 months ago

Oh, sweet, thanks! I'll check it out.

[–] wjs018@crust.piefed.social 2 points 10 months ago

because > doesn’t seem to work in selectors

I learned this the other day when I was trying to troubleshoot some css. It gets html-encoded so it doesn't work anymore in the selector.

[–] sga@piefed.social 2 points 10 months ago* (last edited 10 months ago) (3 children)

i have the following applied on all websites (i can toggle with keybinds)


* { font-family: "iosevka-custom" !important; }  
* { border: black !important; }  
a { color: #2fafff !important; }  
a:visited { color: #44bc44 !important; }  
footer { display: none; }  
body {  
  /* padding: 0px !important; */  
  background-color: black !important;  
  background: black !important;  
  bg: black !important;  
  border-color: black !important;  
  border: black !important;  
  color-footer-background: black !important;  
  color-footer-border: black !important;  
  color-header-background: black !important;  
  color-header-border: black !important;  
  color: white !important;  
  font-size: 22 !important; 
  footer-background: black !important;  
  footer-border: black !important;  
  footer-foreground-color: black !important;  
  footer-text: black !important;  
  foreground-color: white !important;  
  header-background: black !important;  
  header-border: black !important;  
  main-bg: black !important;  
  meta-bg: black !important;  
  outside: black !important;  
  text: white !important;  
}  
#announcement, #headline, #menu, #menu a, #minitoc, background-color, blockquote, pre, code, footer, html, input, textarea, nav, nav .communities, th, tr, .AppHeader .AppHeader-globalBar .AppHeader-localBar .border .buttons .comment .content-item-container .content-item-footer .timestamp .file-header .gh-header .listingblock .news .alert .pull-info .side-bar .topnavbackground .topnavcontainer { background-color: black !important; }  

I get a very nice dark(black) theem

https://envs.sh/s/xLuhQYBDebgY3FtE-zr0xQ/ZRq.png

[–] rozodru@piefed.social 2 points 10 months ago (1 children)

great choice in font, makes it almost relaxing in a way.

[–] sga@piefed.social 1 points 10 months ago

thank you. yeah i prefer monospace fonts. and iosevka is a pretty good base font, and you can choose what exact design for each character do you want. my usual aim is to have simple shapes - either simple arcs or straight lines.

[–] rimu@piefed.social 2 points 10 months ago* (last edited 10 months ago) (1 children)

I like it.

Can I use this to make a PieFed theme? I mean copy it into the PieFed code.

[–] sga@piefed.social 1 points 10 months ago* (last edited 10 months ago) (1 children)

please go ahead. but this is very generic, so you can easily simplify and delete plenty of selectors/key-value pairs.

additionally, existing high contrast theme is very close, and you might just want to change that a bit.

if you want the font, i can share the iosevka config, and also compile to woff files (i currently only have ttfs)

[–] rimu@piefed.social 2 points 10 months ago (1 children)

Ahhh it's going to be more work to incorporate than I thought... Might save this for another day.

[–] sga@piefed.social 1 points 10 months ago

i will try to do it, i may ask matrix for help

[–] Blaze@lemmy.zip 1 points 10 months ago (1 children)
[–] sga@piefed.social 1 points 10 months ago (1 children)

but it is not piefed specific. would it be allowed (not sure about the word i used conveys what i feel)

[–] Blaze@lemmy.zip 1 points 10 months ago (1 children)

Ah, missed that. Have you tried using it in the custom CSS personal settings? If it works there, I don't see why not

[–] sga@piefed.social 2 points 10 months ago

it will work