This forum: user styles

Filehero · Post by **Filehero** » 26 Nov 2016 12:00

Inspired by the update of this forum's software I've started to try to recover the "old" color scheme at least. After a second nice theme has been added, it actually wasn't needed any more.

Nevertheless, as a little exercise in CSS I decided to finish and share it, so someone else can make real use of the CSS selectors. The theme itself is rather boring, in the end it's just even more tamed (more flat

).

The Stylish extension is required (see links provided on https://userstyles.org/).

Code: Select all

/**** Brute force approach override using <!important>*/

/******
--- header section and main page --------------------------------*/
/* title bar */
.headerbar {
	background-color: #f9f9f9 !important;
}

.search-header { /* remove shadow from header forum search */
    box-shadow: none;
}

/* top navigation bar: "Quick links | ... | logged user" */
.navbar-top a {
	color: #a8b2bf !important;
}

/* top navigation bar: name of logged user */
.navbar-top .username {
	color: #aa2346 !important; /* #368ad2 */
}

/* section breadcrumbs: background */
.navbar {
	background-color: #f9f9f9 !important;
	border-color: #ececec !important;
}

/* section breadcrumbs: text */
.linklist.navlinks span {
	font-weight: normal !important;
}

/* below top navigation bar: "Unanswered topics | ... | Your posts" */
.navbar-top-link a {
	color: #a8b2bf !important;
}

/* line: "Current date ... date last visit" */
.responsive-center {
	color: #75a0c5 !important;
}

/* statistic section */
.body-blok {
    background-color: #f9f9f9;
    border: 1px solid #a9b8c2;
}

.body-blok-h3 h3 {
	background-image: none !important;
	background-color: #e8eced;
}

.body-blok-info p {
	color: #a8b2bf;
}



/******
--- page navigation ----------------------------------------------*/
.pagination { /* affects the topic # only */
	color: grey;
}

.pagination li a[role=button] {
	color: #cccccc;
	background-color: #ffffff;
	border-color: #ececec;
	border-width: 1px !important;
	border-radius: 0px !important;
}

/* hover style must be explicitly re-set when changed before */
.pagination li a[role=button]:hover {
	background-color: #368AD2;
	border-color: #368AD2;
	color: #FFFFFF;
}

.pagination li.active span {
	color: #368ad2 !important;
	background-color: #ffffff !important;
}

/* all buttons (search box is a form element!) */
.button {
	background-color: #ffffff !important; /* #f9f9f9 */
	border-color: #ececec !important;
	border-radius: 0px !important;
	background-image: none !important;
}

/******
--- rather global definitions ------------------------------------*/
/* all search input fields */
#keywords, #search_keywords {
	border-color: #ececec !important;
	border-radius: 0px !important;
}

.inputbox.search.tiny {
	color: #aa2346 !important;	
}

.username-coloured {
	font-weight: normal !important;
}

.crumb {
	font-weight: normal !important;
}

/******
--- Subforums, single threads ------------------------------------*/
/* no changes */



/******
--- post editor --------------------------------------------------*/
#options-panel { /* same backgorund as header bar */
	background-color: #f9f9f9 !important;
}

I've applied it to URL's starting with: https://www.xyplorer.com/xyfc

I've tried it with Vivaldi only, it looks like

: stylish.png (103.74 KiB) Viewed 686 times

FH