Lemmy.World Announcements

29157 readers

424 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 info@lemmy.world e-mail.

Report contact

DM https://lemmy.world/u/lwreport
Email report@lemmy.world (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

ruud@lemmy.world

lwadmin@lemmy.world

lwCET@lemmy.world

jelloeater85@lemmy.world

Serinus@lemmy.world

lw_mod_notification@lemmy.world

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

submitted 2 years ago* (last edited 2 years ago) by dx1@lemmy.world to c/lemmyworld@lemmy.world

15 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 &gt; .mt-4 &gt; .container-lg hr.my-3 {
   display: none;
}
#app &gt; div &gt; .container-lg {
    max-width: 100% !important;
}
#app &gt; nav &gt; .container-lg {
    max-width: 100% !important;
}
.post-listing{
    background-color: rgba(255,255,255,0.04);
    margin: 0.25rem 0 !important;
    padding: 0.25rem 1rem !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 &gt; .mt-4 &gt; .container-lg {
    margin:0;
    padding:0;
}
/* post index layout */
#app &gt; .mt-4 &gt; .container-lg &gt; .row  {
    display: flex;
    flex-wrap:nowrap;
    margin: 0 !important;
}
#app &gt; .mt-4 &gt; .container-lg &gt; .row &gt; main {
    display: flex;
    flex-wrap:wrap;
    flex-basis:calc(100% - 450px);
    max-width:100%;
}
/* post layout */ 
#app &gt; .mt-4 &gt; .container-lg &gt; .row &gt; aside{
    display: flex;
    flex-basis:450px;
    font-size:0.7rem;
}
#app &gt; .mt-4 &gt; .container-lg &gt; .row &gt; .col-md-8 {
    width:calc(100% - 450px);
}
#app &gt; .mt-4 &gt; .container-lg &gt; .row &gt; .col-md-4 {
    width:450px;
}
.comment {
  margin-left: 1rem !important;
}
.comment .details > div > div > .md-div > p {
    font-size:0.9rem;
}

I'll probably keep tweaking these, stay tuned.

you are viewing a single comment's thread
view the rest of the comments

[–] blevok@startrek.website 1 points 2 years ago* (last edited 2 years 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.

[–] dx1@lemmy.world 1 points 2 years 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.

[–] blevok@startrek.website 1 points 2 years ago

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