My forum CSS tweaks

Site Feedback
1

I made some css overrides to my likings, with some increased legibility (“grouping”) and candy feels for the frontpage.

I’m using them with the “stylish” extention for Firefox.

rnsforum-candy1

css:


tr, .latest-topic-list-item  {
	border-bottom: 1px solid rgb(0,0,0,0.1);
}

div:nth-of-type(2n).latest-topic-list-item {
    background: rgb(0,0,0,0.05);
}

div.latest-topic-list-item {
    border-left: 1px solid #aaa;
}

/* experimental latest-posts left shadow */

div.latest-topic-list {
    box-shadow: -45px 0px 25px -45px #aaaaaa;
}

table.category-list tbody, .table-heading {
	border-top: none;
    border-bottom: 1px solid rgb(0,0,0,0.1);
}

.list-cell, .table-heading, .category-list td, .category-list th {
	color: rgb(0,0,0,0.45)
}

/**
Forum categories, background gradients
*/

tr[data-category-id='8'] {
    background: linear-gradient(90deg, rgb(128,130,129,0.2), rgb(128,130,129,0) 70%);
}

tr[data-category-id='9'] {
    background: linear-gradient(90deg, rgb(58,181,74,0.2), rgb(58,181,74,0) 70%);
}

tr[data-category-id='10'], tr[data-category-id='11'] {
    background: linear-gradient(90deg, rgb(37,170,226,0.2), rgb(37,170,226,0) 70%);
}

tr[data-category-id='14'] {
    background: linear-gradient(90deg, rgb(241,89,42,0.2), rgb(241,89,42,0) 70%);
}

tr[data-category-id='18'] {
    background: linear-gradient(90deg, rgb(146,39,143,0.2), rgb(146,39,143,0) 70%);
}

tr[data-category-id='19'] {
    background: linear-gradient(90deg, rgb(101,45,144,0.2), rgb(101,45,144,0) 70%);
}

tr[data-category-id='3'] {
    background: linear-gradient(90deg, rgb(128,130,129,0.2), rgb(128,130,129,0) 70%);
}

tr[data-category-id='13'] {
    background: linear-gradient(90deg, rgb(179,181,180,0.2), rgb(179,181,180,0) 70%);
}

body.categories-list .category-name {
    color: rgb(0,0,0,0.8);
}

/* forum thread */

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

.timeline-container .topic-timeline .timeline-scrollarea {
	border-color: rgb(0,0,0,0.4);
}
4 Likes
2

Is there any way to adjust the width of the content to the width of the screen? That the website uses 100% of the width.

3

I believe you can add the following rule, but the forum-thread width you’ll have to figure out for yourself.

div#main-outlet.wrap {
	max-width: 100%;
}
4

This looks handsome. However, I miss those soft table like style, similar you did on the right :slight_smile:

5

Nice!

This would get my vote as a deafult style.

6

I Couldn’t find any id for this but maybe it helps? I’m not familiar with this stuff.

<div class="topic-body clearfix">

(right-click ‘View Image’)

topic%20body%20clearfix
topic%20body%20clearfix986×767 38.8 KB

7

Yes, that’s the one, Ledger! Just set it to 100%. You will have to fix the date handle some way too.

rnsthread1

8

Gonna need a hint. I tried this but no work:

div#topic-body clearfix.wrap { 
  max-width: 100%; 
}
9

@Ledger,

div#main-outlet.wrap {
	max-width: 100%;
}

div.topic-body {
	width: 100%;
}
10

thanks @joule !

80/65 seems to work nicely here to save too much horizontal scanning.

I`ll see if I can get the date scroller fixed.

EDIT:

div.timeline-scrollarea-wrapper seems to do it. not sure what em stands for but anyway, here’s what I’m going with for now:

/*Front Page Width*/
        
div#main-outlet.wrap {
	max-width: 80%;
}

/*Post Widths*/
    
div.topic-body {
	width: 65%;
}

/*Timeline Scroller*/
    
div.timeline-scrollarea-wrapper {
    margin-left: 13em;
}

/*Timeline Footer Controls*/
    
div.timeline-footer-controls {
    margin-left: 13em;
}
11

Cool. I personally prefer the narrower layout, but with more clear grouping et c. I’m planning to finish a complete overhaul (tweak rather) and upload to the stylish database. Maybe I should make a wide version as well.

12

Yeah an official wide version aswell would be great! I guess it would be overkill to have a medium version like my snippet above but if wide theme is well commented, people can simply adjust to taste!

Note: The snippet I posted up above is not perfect re. the timeline scroller, as some of the text overlaps a bit so will need some further tweaks.

13

It seems that messing with the width disables some of the post buttons (bottom right- Reply)

As ever with these things, probably quite a few more details to iron out. Back on @joule original template for now.

14

Here is where I’m at now… I did some changes to the post view, so now the forum is generally readable to me :slight_smile:

Feel free to edit.

CSS overrides 

.list-controls .nav li a {
	border-radius: 6px;
}

.nav-pills > li > a {
	background: rgb(0,0,0,0.15);
    font-size: 14px;
}

tr, .latest-topic-list-item  {
	border-bottom: 1px solid rgb(0,0,0,0.1);
}

div:nth-of-type(2n).latest-topic-list-item {
    background: rgb(0,0,0,0.05);
}

div.latest-topic-list-item {
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

/* experimental latest-posts left shadow */

div.latest-topic-list {
    box-shadow: -45px 0px 25px -45px #aaaaaa;
}

table.category-list tbody, .table-heading {
	border-top: none;
    border-bottom: 1px solid rgb(0,0,0,0.1);
}

.list-cell, .table-heading, .category-list td, .category-list th {
	color: rgb(0,0,0,0.45)
}

div.topic-last-activity a, div.posts a {
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

div.topic-last-activity a:hover, div.posts a:hover {
	background: rgb(255,255,255,0.4);
    border-radius: 4px;

}

/**
Forum categories, background gradients
*/

tr[data-category-id='8'] {
    background: linear-gradient(90deg, rgb(128,130,129,0.2), rgb(128,130,129,0) 70%);
}

tr[data-category-id='9'] {
    background: linear-gradient(90deg, rgb(58,181,74,0.2), rgb(58,181,74,0) 70%);
}

tr[data-category-id='10'], tr[data-category-id='11'] {
    background: linear-gradient(90deg, rgb(37,170,226,0.2), rgb(37,170,226,0) 70%);
}

tr[data-category-id='14'] {
    background: linear-gradient(90deg, rgb(241,89,42,0.2), rgb(241,89,42,0) 70%);
}

tr[data-category-id='18'] {
    background: linear-gradient(90deg, rgb(146,39,143,0.2), rgb(146,39,143,0) 70%);
}

tr[data-category-id='19'] {
    background: linear-gradient(90deg, rgb(101,45,144,0.2), rgb(101,45,144,0) 70%);
}

tr[data-category-id='3'] {
    background: linear-gradient(90deg, rgb(128,130,129,0.2), rgb(128,130,129,0) 70%);
}

tr[data-category-id='13'] {
    background: linear-gradient(90deg, rgb(179,181,180,0.2), rgb(179,181,180,0) 70%);
}

body.categories-list .category-name {
    color: rgb(0,0,0,0.8);
}

/* forum thread */

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

.timeline-container .topic-timeline .timeline-scrollarea {
	border-color: rgb(0,0,0,0.4);
}

/* forum topic list */

table.topic-list tbody tr:nth-of-type(2n) {
    background: rgb(0,0,0,0.05);
}

table.topic-list tbody {
	border-top: 3px solid #aaa;
}

/* forum post */

div.topic-body {
    border-top: none;
}

div.topic-avatar {
    border-top: none;
}

div.topic-body {
	background: rgb(255,255,255,0.4);
    border: 1px solid rgb(0,0,0,0.2);
    border-radius: 8px;
	box-shadow: 0px 0px 10px 0px rgb(0,0,0,0.15);
    padding: 30px;
    padding-bottom: 0px;
}

div.topic-body .topic-meta-data {
    margin-top: -30px;
    margin-bottom: 20px;
    padding: 10px;
    margin-left: -30px;
    margin-right: -30px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
	background: rgb(255,255,255,0.2);
	box-shadow: 0px 10px 10px -10px rgb(0,0,0,0.1);
    border-bottom: 1px solid rgb(0,0,0,0.2);
}

div.topic-avatar img.avatar {
    position: relative;
	top: -14px;
}

div.topic-body blockquote {
	background: rgb(0,0,0,0.1);
    font-size: 12px;
}

div.topic-body section.post-menu-area {
	padding: 0;
    margin: 0;
}
1 Like
15

Nice work!

I like the post encapsulation, helps get rid of the wall of text feel!

joule%20css

16

Old member groups are gone. This is a travesty.

edit: found a solution

CSS 
span.user-title:before{
    content: 'Guruh Motha Fakka is Levitating and Knows Everything About Renoise ';
}
1 Like
17

U B sellin’ fake ID`s there Skolskoly! :mag:

1 Like
18

I just wanted to be Guruh for a day

1 Like
19

:mage: