this post was submitted on 18 Jun 2023
306 points (98.7% liked)

Lemmy.World Announcements

29079 readers
292 users here now

This Community is intended for posts about the Lemmy.world server by the admins.

Follow us for server news 🐘

Outages πŸ”₯

https://status.lemmy.world/

For support with issues at Lemmy.world, go to the Lemmy.world Support community.

Support e-mail

Any support requests are best sent to [email protected] e-mail.

Report contact

Donations πŸ’—

If you would like to make a donation to support the cost of running this platform, please do so at the following donation URLs.

If you can, please use / switch to Ko-Fi, it has the lowest fees for us

Ko-Fi (Donate)

Bunq (Donate)

Open Collective backers and sponsors

Patreon

Join the team

founded 2 years ago
MODERATORS
 

Reddit refugee here.

I have really started to like Lemmy and love the fact that it's free and open source, but I wasn't feeling so home with the UI, so I found nice looking style from https://userstyles.world/style/10345/lemmy-world but I personally prefer dark theme so I adjusted some colours and made the radiuses and margins bigger. I thought that maybe someone will find this useful and hence I decided to post it here. I am not a professional programmer, just a guy who likes to tinker with computers so this style may not be perfect. Critique, feedback and suggestions are welcome.

Edit: The colors are from reddit and if you want the colors to look more like the original lemmy, change the bg primary and default to hex #303030 and #222222. I really like this color scheme too

--bg-primary: #303030;
--bg-default: #222222;

Edit2: I have now made some small adjustments using the feedback and suggestion I got from you. I'm really grateful for the feedback :)

I also have now two styles, which have slightly different color scheme https://userstyles.world/user/VILPAUTOEE

Keep the feedback coming ;D Thx

top 50 comments
sorted by: hot top controversial new old
[–] [email protected] 19 points 1 year ago (1 children)

This is what’s beautiful in open source. I wonder if any one has had any luck making the old.Reddit nesting style yet

[–] [email protected] 16 points 1 year ago (1 children)

I really like it. But I also think that it's not a great idea to use colors similar to Reddit, it's best if Lemmy (or each instance) finds its original design for those

[–] [email protected] 3 points 1 year ago

Yeah I think so too, and that's why I created two styles with different color schemes. I just think that some reddit refugees might have gotten used to the reddit colors and find them more familiar

[–] [email protected] 11 points 1 year ago

Lemmy Enhance Suite when?

[–] [email protected] 11 points 1 year ago (1 children)

Thank you. I took your theme and "nordified" it a bit:

spoiler

Now it's in line with the rest of my web apps :)

[–] [email protected] 4 points 1 year ago

Looks really great. My first tought was steam

[–] [email protected] 10 points 1 year ago (2 children)

What's the best way to add this to my instance? I guess it's just additional css to the default css? Can I use the default css and add the userstyles css?

[–] [email protected] 2 points 1 year ago (1 children)

You can add a docker volume mount to app/extra_themes leading to a directory in your volumes directory and then add custom themes in there. Pull the CSS for the theme you want to base off of from lemmy-ui's github. Then add the custom CSS from above. Then set that theme as default for your instance in settings. I did that to my instance to make lemmy wider.

[–] [email protected] 2 points 1 year ago

I tried this. I took the default dark theme and tried to add the custom css and it didnt work for me :( Not sure what i did wrong.

load more comments (1 replies)
[–] [email protected] 10 points 1 year ago (1 children)

I dont like the wasted vertical space at the top. Regardless, I think it does indeed look better overall, specially the visibility of the cards. Have you thought of doing a PR for this in lemmy-ui?

[–] [email protected] 2 points 1 year ago (1 children)

I haven't yet thought so far, because this was just a personal little project, but I will think about it. I will probably just keep tinkering with this and try to make it better and maybe try to document this little bit

[–] [email protected] 2 points 1 year ago (3 children)

I would honestly look into creating a new PR. Check to see if they would rather this as a new theme or just the default thing.. Please do it! Defaults are important, not many people are going to be adding a new CSS..

load more comments (3 replies)
[–] [email protected] 8 points 1 year ago

I tweaked margin and padding. Is just a lot of wasted space if you ask me. .post-listing + hr.my-3 { margin-block: 0.2ch !important; } .post-listing { padding: 0.4rem 1rem; } :root { --radius-1: 1px; --radius-2: 2px; --radius-3: 4px; --radius-4: 8px; }

^___^

[–] [email protected] 7 points 1 year ago (2 children)

Is there any way to get it working on Android?

load more comments (2 replies)
[–] [email protected] 7 points 1 year ago* (last edited 1 year ago)

This is just me but I missed the day when the site provided us to customize our profile page. Like friendster for example we can change the look of the buttons, we can change the size of the fonts and etc.

It shows us a little bit of our personality. But I know that it's no longer a thing. The closes experience I could think of is how we design our linux desktop. In windows it would be using rainmeter.

[–] [email protected] 6 points 1 year ago (1 children)

Hey! This looks awesome. Im a programmer working on a UI. I would really really really like to use this and work with you on completing my project.

load more comments (1 replies)
[–] [email protected] 6 points 1 year ago (1 children)

I like the way threaded comments are colored in the default scheme. Makes it very easy to see which subcomment belongs to which parent.

With a bunch of vertical lines, I quickly lose track.

But I very much appreciate all the crafting and tinkering going on! It's nice to see things grow.

[–] [email protected] 4 points 1 year ago

Tracing those lines was almost a wasted effort for some more complex threads lol. Start going cross eyed. I like the colors much more.

[–] [email protected] 6 points 1 year ago (1 children)

It requires tampermonkey, greasemonkey or any equivalent but this also works wonder to get a more compact look while fully utilizing the entire screen.

[–] [email protected] 3 points 1 year ago* (last edited 1 year ago)

Nice, thanks. I don't feel like installing Stylish but I do have a script manager so I prefer this solution. Had to comment a few lines because I didn't like how it was messing with font sizes, however.

[–] [email protected] 5 points 1 year ago (3 children)

Noob here. How can I use this?

load more comments (3 replies)
[–] [email protected] 4 points 1 year ago (5 children)

And what is it with the narrow aspects? I totally get the need for mobile support, but the default desktop view looks like it's trying to play nice with old 4:3 aspects. If that's the root design goal, I sure hope we can let that design goal die. In a 16:9 maximized window there is so much wasted real estate it pains me.

load more comments (5 replies)
[–] [email protected] 3 points 1 year ago

That's kinda how kbin looks like.

[–] [email protected] 3 points 1 year ago

The main problem with the Lemmy UI on desktop, IMO, is the cramped and narrow page width. There's so much wasted space on either side of the content.

I'm currently using a customized version of this one: https://github.com/HrBingR/Lemmy_CSS

[–] [email protected] 3 points 1 year ago

wow, this is light years ahead of my attempt

[–] [email protected] 3 points 1 year ago

I've only interacted with Lemmy a few times from a PC, but I can definitely say it looks better your way. I found the webUI frustrating - but it's still in its infantile stage so I can't fault the devs.

[–] [email protected] 2 points 1 year ago (1 children)

Just wanted to ask your opinion. Which is better color scheme. The reddit colors or the lemmy's?

Reddit:

Lemmy:

[–] [email protected] 3 points 1 year ago

Bottom looks better. It would be even better if you replaced the red buttons with blue (blue chrysanthemum shade).

[–] [email protected] 2 points 1 year ago

Very nice, can this be pushed mainstream so it is the default for everybody?

[–] [email protected] 2 points 1 year ago (2 children)

Is it supposed to look like this? Some of the text is hard to read and I can't switch to the dark theme, it's always bright.

[–] [email protected] 2 points 1 year ago

I think you have installed the original style that I then modified to my preferences. Try install this this style, which is the one I have modified. Hope this resolves the thing

load more comments (1 replies)
[–] [email protected] 2 points 1 year ago (1 children)
[–] [email protected] 3 points 1 year ago

Thanks, this means a lot to me. It's really great to share code

[–] [email protected] 2 points 1 year ago (2 children)

Looks great!, thanks for sharing!

load more comments (2 replies)
[–] [email protected] 2 points 1 year ago

Yes! I hate the default look that doesn't separate in "zones"

[–] [email protected] 2 points 1 year ago (1 children)

That is a very nice looking css for lemmy!

load more comments (1 replies)
[–] [email protected] 2 points 1 year ago* (last edited 1 year ago)

Thanks for sharing, need to try this tomorrow!

Edit: Just installed it now, looks perfect! Great job!

[–] [email protected] 2 points 1 year ago (1 children)

This looks really great. Is there an Eli5 on how to install this?

[–] [email protected] 5 points 1 year ago (1 children)

I tried to write some basic instructions on how to install this to the github page's readme file https://github.com/VILPAUTOEE/Lemmy_css

[–] [email protected] 2 points 1 year ago

Thank you! I have it installed and working great!

[–] [email protected] 1 points 1 year ago

I really like the look of that! Thanks for sharing!

[–] [email protected] 1 points 1 year ago

Oh nice! Never used any CSS or user.styles stuff before, but that was easy and worked.

Now watch me be too stupid to try an ever change anything about it for myself...

[–] [email protected] 1 points 1 year ago (1 children)
load more comments (1 replies)
load more comments
view more: next β€Ί