this post was submitted on 13 Jun 2023

31 points (97.0% liked)

Lemmy.World Announcements

29098 readers

158 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

DM https://lemmy.world/u/lwreport
Email [email protected] (PGP Supported)

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

Join the team

founded 2 years ago

MODERATORS

[email protected]

Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com ()

submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/[email protected]

20 comments fedilink hide all child comments

h5, .h5{
  font-size: 1rem !important;
}
.post-title h5{
    font-size:0.9rem !important;
}
.btn {
  font-size:0.75rem !important;
}
#app > .mt-4 > .container-lg hr.my-3 {
   display: none;
}
#app > div > .container-lg {
    max-width: 100% !important;
}
#app > nav > .container-lg {
    max-width: 100% !important;
}
.post-listing{
    background-color: rgba(255,255,255,0.023);
    margin: 0.4rem 0 !important;
    padding: 0.3rem 1rem !important;
    border: solid 1px rgba(255,255,255,0.2);
    border-radius:0.5rem;
}
/* user profile listing */
.container-lg > .row > .col-12 > div > div > .comments > .comment {
    /*background-color: rgba(255,255,255,0.023);
    margin: 0.4rem 0 !important;
    padding: 0.3rem 1rem !important;
    border: solid 1px rgba(255,255,255,0.2);
    border-radius:0.5rem;*/
}
.container-lg > .row > .col-12 > div > div > .comments > .comment  > .details{
    /*padding:0 !important;
    margin:0 !important;*/
}
.container-lg > .row > .col-12 > div > div > .comments > .comment  > .details > div > div:first-child{
    display:flex !important;
    width:100%;
}
.container-lg > .row > .col-12 > div > div > .comments > .comment  > .details > div > div:first-child > a.mr-2{
    flex:1;
}
/* bottom row of post listing right (comments, star, etc.) */
.post-listing .row .col-12 .d-flex:last-child{
    margin-bottom:0 !important;
}
.post-listing picture img.rounded-circle{
    width:1.25rem;
    height:1.25rem;
}
.post-listing .d-none .row .col-sm-2 {
    max-width:150px;
}
.post-listing .d-none .row .col-sm-9 {
    display:flex;
    align-items:center;
}
#app > .mt-4.p-0.fl-1 {
    margin-top:0rem !important;
}
#app > .mt-4 > .container-lg {
    margin:0;
    padding:0;
}
/* post index layout */
#app > .mt-4 > .container-lg > .row  {
    display: flex;
    flex-wrap:nowrap;
    margin: 0 !important;
}
#app > .mt-4 > .container-lg > .row > main {
    display: flex;
    flex-wrap:wrap;
    flex-basis:calc(100% - 450px);
    max-width:100%;
}
/* post layout */ 
#app > .mt-4 > .container-lg > .row > aside{
    display: flex;
    flex-basis:450px;
    font-size:0.7rem;
}
#app > .mt-4 > .container-lg > .row > .col-md-8 {
    width:calc(100% - 450px);
}
#app > .mt-4 > .container-lg > .row > .col-md-4 {
    width:450px;
}
.comments .comments {
    border-left: solid 1px rgba(255,255,255,0.15);
}
.comment {
  margin-left: 1rem !important;
}
.comment .details > div > div > .md-div > p {
    font-size:0.9rem;
}
.comment .comment-node {
    background-color:rgba(255,255,255,0.028);
    border:solid 1px rgba(255,255,255,0.3);
    margin-bottom:3px;
    padding:0.25rem 0.5rem !important;
    border-radius:0.5rem;
}
.comment-node > .ml-2 { 
  margin:0 !important;
}
.main-content-wrapper{
    width:100%;
}
.vote-bar{
    max-width:80px;
}
.navbar-light .navbar-nav .nav-link {
  background-color: rgba(255,255,255,0.03);
  margin-right: 0.5rem;
}

I'll probably keep tweaking these, stay tuned.

top 18 comments

sorted by: hot top controversial new old

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

This is cool, have you considered contributing it to lemmy-ui as a theme? https://github.com/LemmyNet/lemmy-ui/tree/main/src/assets/css/themes

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

Worth a shot, bit of work to be done besides just the CSS

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

cheers for this

i detest having content centered, so having this style + 80% magnification definitely sates my burning hatred for modern ui design

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

Thanks. But how can we use this?

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

You use an extension like Stylish to graft the CSS onto your favorite Lemmy instance's CSS. Until they move everything around and it breaks at least.

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

This is great, thank you! It feels more like old-reddit, as you said, and I think having this option would make it even easier for people to transition to Lemmy. Well done!

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

Oh that's exactly what I've been wanting! Just added it into my instance's default theme. Thanks!

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

Note Lemmy has a serious lack of properly marked up HTML, things like ".post-listing .title" don't exist so there are nasty CSS selectors included here.

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

I added this to make the gap between posts smaller.

.my-3 {  
    margin-bottom: 0.2rem !important;
    margin-top: 0.2rem !important;
}

edit: For some reason this doesn't seem to work on some instances, not sure why.

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

If you're looking for the hr my CSS is actually hiding those and doing margin+padding on the posts:

#app > .mt-4 > .container-lg hr.my-3 {
   display: none;
}

although the selector may be too specific. IDK what "my-3" is but figured it might be too general.

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

Yeah it's the hr, which somehow i can still see. I have the same css on startrek.website and while it's still not hidden there, setting the margin does work, but not on lemmy.world for some reason. I can see that both sites have the same class for the hr (my-3), so i'm kinda stumped at the moment.

I also added the following to change the width and spacing of columns, and again it works on startrek.website, but not on lemmy.world. It's really strange.

.container,.container-lg,.container-md,.container-sm,.container-xl {
    max-width:1540px
}
.col-md-4 {
    flex: 0 0 25%;
    max-width: 25%
}
.col-md-8 {
    flex: 0 0 75%;
    max-width: 75%
}

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

Also you probably need semicolons on each line with a property assignment.

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

I can't believe i left out semicolons. Sadly it changed nothing though. But it's weird, as i continued to screw with it, i refreshed after some random change, and suddenly everything worked. Then i refreshed again and it went back to not working. No changes, just another refresh. And i do see my values in the live css in the inspector. That seems to indicate that reality as i perceive it is a lie and i'm likely the subject of an experiment that's being conducted by beings living in a reality that's outside the realm of my awareness or comprehension.

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

Honestly I, like most casual users, don't care about the drama. I'll go with both but mainly use whatever is more active and user friendly. I think it's silly how much stake into this the bandwagon has put into it. If you're not a developer or a mod that has put a lot of time into it it doesn't really affect the rest of us.

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

Might want to create a git repo for this (maybe other themes) and get it converted to a full fledged theme for lemmy. I tacked your changes onto the end of the darkly-red theme and seems to look nice. I was just too lazy to remove the bits from the original theme. A git repo would be good though since a lot of the responses suggest coming back for updates. Git will let people know if there is a change and they can see what they are as they change.

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

Yeah, I'm working on pushing some changes into lemmy-ui right now to make themes in general work. It might not even be far from there to getting user-contributed themes baked into the main lemmy-ui and being user selectable.

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

I personally like how things are currently. A local front page for the instance I’m apart of and a front page of communities I subscribe to. If I want to see what’s going on in other instances I can go visit those.

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

This doesn't change that, it's just that user styles only apply to a specific domain (usually).

load more comments