My forum CSS tweaks

Site Feedback
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