Spyke
lemmyworld·Lemmy.World Announcementsby1337tux

An attempt to make Lemmy look better

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

https://github.com/VILPAUTOEE/Lemmy_cssOpen linkView original on lemmy.world
479
Comments92
Krusty
feddit.it

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

32
1337tuxreply
lemmy.world

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

6
Roman0
lemmy.world

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

::: spoiler spoiler :::

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

28
lenninscjay
lemmy.world

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

27
funkyb
lemmy.world

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.

19
T156reply
lemmy.world

Lemmy doesn't run very well on mobile either. It crashes and burns on my iPad (probably because it doesn't fully support whatever fancy JavaScript it relies on), and Kbin is the only way to connect with Lemmy communities, since their site does work.

3
cablepickreply
lemmy.cablepick.net

I think that’s the websocket connection that they are working on removing in the next version. Should make the loading issues on mobile go away.

4
Casreply
lemmy.world

That's weird. For me it is kbin that crashes all the time. Lemmy works fine. I like kbin's vibe and concept, I just figured it was still really buggy. Now I'm thinking maybe the problem is on my end.

3
T156reply
lemmy.world

Kbin does crash, but in my experience, that's more of an issue of server load than anything else. Whereas my issue with Lemmy seems to be a problem with the client/Web UI (since my iPad is a bit too old for any of the apps).

Avoiding Kbin during the times where the US is most active (since it seems like they're busiest around then) seems to help with the crashing issues.

1
1337tuxreply
lemmy.world

A funny "accident" I had with this is, that the first version of this style (which is in the screenshots) I created with a monitor that has an 4:5 aspect ratio. I then got some feedback and tested the style on my laptop that has 16:9 ratio and fixed some things. You can change the max-width in the line 222.

.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 150ch;
}

I would have liked that the max-width could have been in percents but that caused a weird bug on the nav-bar and it looked like this: Anyone know what could have caused this?

1
andobando
lemmy.world

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.

19
1337tuxreply
lemmy.world

You can use this freely and I'm open to improvements and changes to the code. You can for example make pull request to the github repo :)

3
lebkuchen
lemmy.world

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; }

^___^

13
Sören
iusearchlinux.fyi

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?

12
keyreply
lemmy.keychat.org

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.

2
Sörenreply
iusearchlinux.fyi

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.

2
1337tuxreply
lemmy.world

To be honest, I'm not really sure, because I don't have much experience with CSS and web developing in general. Maybe someone more experienced could know?

1
wit
lemmy.world

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?

12
1337tuxreply
lemmy.world

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

3
witreply
lemmy.world

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..

4
1337tuxreply
lemmy.world

Yeah I will look into that. Maybe there is some kind of official community or discord server for developing, where I could ask about this

1
witreply
lemmy.world

I know there is a matrix server. Not sure about discord.

1
minimarreply
lemmy.world

Use a browser that allows you to install extensions.

1
the_right_godreply
lemmy.world

Firefox and brave does not support it, unfortunately. Anyway I found an alternative which is the "thunder" app, although they still do not support comments/new posts. Apart from that it looks excellent and can recommend

1
appelduv1dereply
lemmy.world

Lemmy looks too much like New Reddit for me. Lots of wasted space and mobile-centric UI.

18
T156reply
lemmy.world

I am surprised that they went with such a modern-looking UI, as opposed to something older like Reddit's compact/old interface. Sure, Lemmy was not meant to be a Reddit replacement, exactly, but Old/Compact Reddit did have a nice, performance-friendly UI, even if it was a bit visually dated.

5
ayayareply
lemmy.dbzer0.com

Yep, I really miss the "old reddit" style. More information dense, I can see 10+ post on frontpage before I need to scroll.

Lemmy (and new reddit) only show 5-6 post on full screen laptop.

4
Spzi
lemmy.click

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.

10
MiddleWeighreply
lemmy.world

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

4
Tsunami45chan
lemmy.world

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.

8
1337tuxreply
lemmy.world

There should be instructions on my github

If you come across some problems you can dm me

3
kilmisterreply
lemmy.ml

Thanks! Should've checked out more carefully the Github before asking. It's already installed

1
1337tuxreply
lemmy.world

I haven't tested on real hardware, but when I switched to phone mode from the development tools, it kinda works, but some things behave weirdly because the resolution and aspect ration is so different from a desktop. If your on desktop, you can test by yourself, how it would look like on phone. Phone mode Chrome Firefox

2
delnac
lemmy.one

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

7
Spiroureply
exploding-heads.com

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.

4
McBinary
kbin.social

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.

6
cianmor
lemmy.world

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

5
1337tuxreply
lemmy.world

Hi, thanks for the feedback. The extension that userstyles.world redirects you to is Stylus not Stylish. It's a fork of Stylish and they even state on their web site that "Any and all analytics, telemetry, and data-collection have been removed completely. We'd rather not know what you're up to." https://add0n.com/stylus.html

I hope this clear things ;)

5
Kabe
lemmy.world

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

5
1337tux
lemmy.world

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

Reddit:

Lemmy:

4
rr7
lemmy.world

I love it! Any possibility to change the ugly teal/green link color to something else? Orange maybe?

4
1337tuxreply
lemmy.world

A quick fix to that is, if you change the theme from your lemmy settings to darkly-red. I will look into that ;)

3
rr7reply
lemmy.world

Great work, looking forward to it!

Also, is it possible to lower the overall (but not alla) font size? Some elements gets way too small though if I zoom out the entire page (ctrl+down). I think it is mostly titles and general text that could be lowered.

1
1337tuxreply
lemmy.world

Sure ;)

This should do the trick. Just add this to the style. It also changes the color of the links to orange, even if you have darkly theme. You can then adjust the size of the fonts according to your taste.

body {
  font-size: 0.8rem;
}

.h5, h5 {
  font-size: 1rem;
}

a {
  color: #ff8300;
}
2
rr7reply
lemmy.world

Thank you! I fiddled around with the values and this is what I came up with: 

body, .form-control {
  font-size: 0.8rem;
}
    
.h5, h5 {
  font-size: 1rem;
  font-weight: 600;
}

.small, .btn {
  font-size: 0.75rem;
}
 
.badge {
  font-size: 85%;
}

.text-warning {
  color: #ffdd55 !important
}

Btw, I noticed the arrows above and under the total votes wandered away. Is it possible to fix?

2
Zulasas
lemmy.world

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.

3
1337tuxreply
lemmy.world

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

3
Zulasasreply
lemmy.world

That resolved it indeed! Thanks :) Looks great now

1
lokireply
lemmy.fmhy.ml

I fixed it by switching to the light theme in Lemmy settings.

1
subzero12479
lemmy.world

I love it, thanks a lot. :) You could add feddit.de, it's the same but for German communities.

3
tomkatt
lemmy.world

How do you use these? This is pretty great.

Edit - nevermind, went to the github link, I get it now. Thanks!

2
supermurs
suppo.fi

Thanks for sharing, need to try this tomorrow!

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

2
Cantstopthesignal
lemmynsfw.com

I love this so much, but is there any way to either move the floating bar tighter to the top of the page so it doesn't obstruct posts as much, or turn off it's floating?

2
joshinya
lemmy.world

I think this could be really cool style if it blended some more of the lemmy UI elements like color-coded threaded replies. I also feel generally the info in the post tiles on frontpage is too spaced, both on this userstyle and lemmy's default styles. Obviously you don't want cramped design but I feel like the vertical space of the tile could contract like 30% without losing any information or looking cramped, then you could fit 30% more links on the screen at once.

1
that_ginger_one
feddit.uk

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...

1