Comment background color separation for easy reading

Imo, It would be better if the body of the comment had a different color than the background and also a bit of spacing between the comments. It would be easy on the eyes and also help separating the comments. The lines only makes it feels busy…

I made a quick ccs tweak to show what I’m talking… Oh and rounded corners as a bonus… :slight_smile:

Example:

Thanks…

6 Likes

Perfect! This is what is missing here…

@bartv Please do it :smiley:

That looks waaaay more organized and readable.
I would definitely be for it, maybe there could be poll to see what the others think :thinking:

1 Like

Yeah… I believe most people would love to get it, but the admins seems to be ignoring it, and I don’t know why…
Sad…

Whoops sorry, I had missed this topic! Please see here how you can help make this happen:

I will add my vote to this. Holy crap the site is difficult to read now. :frowning:

1 Like

Feel free to submit your proposals as described in my post above yours :slight_smile:

I’m using this at the moment. I find it easy to read.

Wouldn’t just be simpler if @TheRedWaxPolice published the CSS rules?

1 Like

Now there’s a novel concept. :smiley: Not that I’d use it myself, but others may want it.

The proposal looks great, a little more emphasis on actual posts and a blacker background for areas with text can only be an improvement :slight_smile:

1 Like

What would be the best way of doing that?

Simply post the code here.

Triple backticks on one line to get the code tag started (the key to the left of 1 on a standard QWERTY).
Code on new line.
Finish with another triple backtick on its own line.

The good news is, I didn’t save the codes… :wink: But I can recreate it…
Do you use Stylish or something to test the code?

I use Stylus to run my own code. I could recreate your code easily enough if I wanted to, but honestly it’s not a look I prefer so I have no incentive to do that. Someone who wants that look will have to figure it out.

Ok… I’ll post the code here later, for those who want to try it…

Okay, here are the CSS rules…

.topic-avatar {
    border-top: 0 solid #4d4d4d;
    padding-top: 15px;
    width: 54px;
    float: left;
    z-index: 2;
}


.first {
    font-weight: bold;
    margin-left: 5px;
}


.topic-body .regular {
    margin-top: 15px;
    margin-left: 5px;
}


.topic-body {
    
    float: left;
    position: relative;
    z-index: 1;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-top: 20px;
    border-radius: 10px;
    padding-right: 20px;
    background-color: #181818;
    border-top: 0 solid #4d4d4d;    
    
}


.topic-status-info {
    padding: 10px 0;
    
    max-width: 757px;
    border-top: 0 solid #4d4d4d;
}


.small-action {

    max-width: 755px;
}


.post-links-container .post-links {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #4d4d4d;
    margin-left: 5px;
}


.topic-map {
    margin: 20px 0;
    margin-left: 5px;
}


.category-list, .latest-topic-list {
    border-radius: 6px;
}


tr {
    border-bottom: 1px solid #222222;
}


.latest-topic-list-item {
    border-bottom: 1px solid #222222;
}


.tlp-featured-topics.has-topics .featured-link {
    margin-top: 1px;
    padding-bottom: 10px;
    padding-right: 0;
    float: right;
}


.latest-topic-list .no-topics, .latest-topic-list .more-topics, .top-topic-list .no-topics, .top-topic-list .more-topics {
    margin-top: 1px;
}


.wrap .contents {
    position: relative;
    
    border-radius: 6px;
}


#list-area .top-lists h2 {
    margin: 5px 0 10px 10px;
}


table {;
    background-color: #181818;
    border-radius: 6px;
}


html {
    color: #c7c7c7;
}    


.table-heading {
    border-bottom: 3px solid #E86800;
}


tbody {
    border-top: 3px solid #E86800;
}


.timeline-container .topic-timeline .timeline-handle {
    background-color: #E86800;
}


nav.post-controls button.d-hover,
nav.post-controls button:focus {
   background: #E86800;
   color: #fff;
}


.btn-primary:hover, .btn-primary.btn-hover {
    background: #E86800;
}


.read-state {
    right: 8px;
    top: 23px;
}


.small-action {
    border-top: 0 solid #4d4d4d;
}


.tag-list {
    padding: 10px;
    background-color: #181818;
    border-radius: 6px;
}





.tag-sort-options {
    padding-left: 10px;
}



.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .collapsed-info .user-profile-avatar .avatar-flair {;
    margin: 0 10px -10px 0;
}


.badge-groups {
    background-color: #181818;
    padding: 10px;
    border-radius: 6px;
}


.wrap {
    max-width: 1112px;
}


.d-header {
    border-bottom: 3px solid #D45000;
}


.badge-card {
    border: 1px solid #222222;
    border-radius: 12px;
    margin-bottom: calc(2% - 3px);
}


aside.onebox {
    border: 3px solid #2c2c2c;
    border-radius: 12px;
    background-color: #222222;
}

To use it, a chrome extension like Stylish is required (you’ll copy this code here and paste there)… Here’s the link to install the extension:

Once the extension is installed, for those not familiar with it, just watch this little video I made to see how it works…

That’s it… :smiley:

2 Likes

I’m running it now, looking pretty good! @Fweeb care to try it out?

As I prefer the light theme, I changed your rules a bit:

1 Like

Prepping for a flight, so I can’t try it out just yet, but I’m all for anything that improves readability.

Just gave it a quick run. I don’t mind the general look, even though it’s not my first preference. However, I think it could be improved even if you want to stay with that look.

The first thing that struck me was how offputting it was to have the highlighted (in terms of background) post content dramatically offset to the left of centre on my monitor. The lack of balance is like a big slap in the face. This wouldn’t be hard to fix, since it’s just a matter of tweaking margins to even things up, to make it appear that the posts themselves were centred on the monitor. I think that would make it more palatable to a lot of people.

BTW, about Stylish. Apparently it contains tracking code, which is why the Stylus crew created their fork and stripped the code back to what was needed to make it work without tracking. That’s my basis for preferring Stylus, which is still compatible with uploaded styles from Userstyles and which works in the same way as Stylish.

https://add0n.com/stylus.html#features