RetroFed Forum
Your home away from modern life.
Lemmy/old Reddit styles
Post Reply
AuthorMessage
artifex piefed.social artifex@piefed.social
Joined: 2025-06-10
Quote

A screenshot of the PieFed interface with my custom CSS rules applied to make it look more like the Lemmy/Old Reddit interfaces.

I really like Piefed's pace of development, featureset, and the responsiveness of the dev team, but I find the main UI a little lacking. Thanks to custom CSS I was able to tweak in the following:

  • Use more screen real estate on larger viewports
  • Fix height of posts, regardless of whether there's an image/icon or not
  • Fix size of link images and thumbnails to always be the same
  • Anchor post options buttons to right and fix their order so you can quickly do a visual scan of replies and votes

I'm continually impressed by just how "flex" flexbox really is!

/* Use more width in larger viewports */  
.container-lg, .container-xl, .container-xxl {  
  max-width: 90% !important;  
}  

.col.post_teaser_body {  
  display: flex !important;  
  gap: 1rem !important;  
  align-items: flex-start !important;  
}  

/* Image in left column */  
.post_teaser_image_preview, .col_thumbnail {  
  order: -1 !important;  
  flex-shrink: 0 !important;  
  width: 160px !important;  
  height: 80px !important;  
  overflow: hidden !important;  
}  

/* New styles to anchor post_utilities_bar to the right */  
.post_utilities_bar {  
  display: flex !important;  
  flex-shrink: 0 !important;  
  justify-content: flex-end !important;  
  gap: 0 !important;  
  margin-left: auto !important;  
}  

/* Reorder the child elements */  
.cross_post_button { order: 1 !important; }  
.post_replies_link { order: 2 !important; }  
.voting_buttons_new { order: 3 !important; }  
.post_options_link { order: 4 !important; margin-left: auto !important; }  

/* Create a "virtual" right column using flex direction */  
.post_teaser_body > :not(.post_teaser_image_preview) {  
  flex: 1 !important;  
  min-width: 0 !important;  
  display: flex !important;  
  flex-direction: column !important;  
  gap: 0.3rem !important;  
  width: 100% !important;  
}  

/* Ensure the options dropdown stays properly aligned */  
.post_options_link.pull-right {  
  margin-left: 0 !important;  
}  
3   Original
Rimu Moderator rimu@piefed.social
Joined: 2024-01-04
#2 · Quote Reply

I've been thinking about moving the thumbnails to the left for a long time...

1
artifex piefed.social artifex@piefed.social
Joined: 2025-06-10
#3 · Quote Reply

I've been thinking about moving the thumbnails to the left for a long time...

I think the main thing for anyone who prefers an “old Reddit” interface is the consistency of posts. Same height, same element placement, use of placeholders when an element (like an image) isn’t present, etc. keep up the good work!

4
malfisya piefed.social malfisya@piefed.social
Joined: 2025-06-04
#4 · Quote Reply

I've been thinking about moving the thumbnails to the left for a long time...

I like it on the right. I guess I am more "new reddit" UI guy.

1
Post Reply
Back to top