GitHub - VILPAUTOEE/Lemmy_css
github.com
Contribute to VILPAUTOEE/Lemmy_css development by creating an account on GitHub.

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

  • lenninscjay@lemmy.worldEnglish
    181·
    2 years ago

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

  • Krusty@feddit.itEnglish
    203·
    2 years ago

    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

    • 1337tux@lemmy.worldOPEnglish
      41·
      2 years 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

  • Sören@iusearchlinux.fyiEnglish
    11·
    2 years ago

    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?

    • key@lemmy.keychat.orgEnglish
      2·
      2 years ago

      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.

      • Sören@iusearchlinux.fyiEnglish
        2·
        2 years 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.

    • 1337tux@lemmy.worldOPEnglish
      21·
      2 years ago

      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?

  • wit@lemmy.worldEnglish
    121·
    2 years ago

    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?

    • 1337tux@lemmy.worldOPEnglish
      31·
      2 years ago

      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

      • wit@lemmy.worldEnglish
        2·
        2 years ago

        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…

  • lebkuchen@lemmy.worldEnglish
    101·
    2 years 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; }

    ___

  • andobando@lemmy.worldEnglish
    8·
    2 years ago

    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.

    • 1337tux@lemmy.worldOPEnglish
      1·
      2 years ago

      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 :)

  • Tsunami45chan@lemmy.worldEnglish
    7·
    2 years 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.

      • the_right_god@lemmy.worldEnglish
        1·
        2 years ago

        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

  • Spzi@lemmy.clickEnglish
    6·
    2 years ago

    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.

    • MiddleWeigh@lemmy.worldEnglish
      4·
      2 years 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.

  • delnac@lemmy.oneEnglish
    6·
    2 years ago

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

    • Spirou@exploding-heads.comEnglish
      3·
      2 years 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.

        • 1337tux@lemmy.worldOPEnglish
          2·
          2 years ago

          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

      • kilmister@lemmy.mlEnglish
        1·
        2 years ago

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

  • McBinary@kbin.social
    51·
    2 years 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.