Black

Change sub-foren-block Design - Black

Change sub-foren-block Design

by Eddie Felson » Mon Sep 11, 2017 10:14 pm

Hi,
i have a big problem, with customization black-style in 3.2

In my customized 3.1 version, I did some changes with the boxes for subforen and topiclist.

Normal the box has a vertical gradient from dark grey to light grey. Between the boxes are horzontal spaces.
I changed it to flat dark grey boxes, without spaces. There war one a small line between the boxes (i thing the normal border of the box).

I can't use my old setup in 3.2 and I can't found relevant parts in the css files.

Could anyone help me?

Regards
Eddie Felson
Registered User
Posts: 16
Joined: Thu Sep 04, 2014 7:59 pm

Re: Change sub-foren-block Design

by _Vinny_ » Tue Sep 12, 2017 7:51 am

Yeah. Can you provide the link of your board? Or share the code?
User avatar
_Vinny_
Style Customisations
Style Customisations
Posts: 10515
Joined: Tue Aug 11, 2009 12:45 am
Location: Brazil
Name: Marcus Vinicius

Re: Change sub-foren-block Design

by Eddie Felson » Tue Sep 12, 2017 6:48 pm

Hi,
link to 3.2 (without changes)
http://forum.adler-berlin.de/ (subforen)
http://forum.adler-berlin.de/viewforum.php?f=348 (topiclist)

link to 3.1 Mirror with this changes
http://ef-server.de/zzzadlerforum/ (subforen)
http://ef-server.de/zzzadlerforum/viewforum.php?f=348 (topiclist)

From my old notes:

_style_config.scss

flat dark grey boxes:
273:// Mixins
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 1, rgba(0, 0, 0, .2) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 1, rgba(0, 0, 0, .2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);

I can't found any notes about avoid box spaces
Eddie Felson
Registered User
Posts: 16
Joined: Thu Sep 04, 2014 7:59 pm

Re: Change sub-foren-block Design

by _Vinny_ » Fri Sep 15, 2017 5:43 am

open theme/black.css, find:

Code: Select all

.forabg ul.topiclist li.header, .forumbg ul.topiclist li.header {
	background-color: #1a3f66;
	background-image: #383838 linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 100%) repeat scroll 0 0
	background-repeat: repeat-x;
	border: 0 solid #1a3f66;
	border-radius: 5px;
	color: #fff;
	font-weight: normal;
	line-height: 1.4;
	margin: 0;
	padding: 6px;
	position: relative;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	text-transform: none;
}
Replace with:

Code: Select all

.forabg ul.topiclist li.header, .forumbg ul.topiclist li.header {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: #1e5a97;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0) 100%), url("./images/category.png");
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: repeat-x;
	background-size: auto auto;
	border: 0 solid #1e5a97;
	border-radius: 4px 4px 0 0;
	color: #fff;
	font-weight: normal;
	line-height: 1.4;
	margin: 0;
	padding: 6px;
	position: relative;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	text-transform: none;
}
Find:

Code: Select all

.forabg ul.topiclist li.row, .forumbg ul.topiclist li.row {
	background: #383838 linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0px, transparent 100%) repeat scroll 0 0;
	border: 0 solid #202020;
	border-radius: 5px;
	margin: 5px 0;
	padding: 0;
}
Replace with:

Code: Select all

.forabg ul.topiclist li.row, .forumbg ul.topiclist li.row {
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 1, rgba(0, 0, 0, .2) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 1, rgba(0, 0, 0, .2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
	margin: 0;
	padding: 0;
}

.forabg {
	background: #383838 linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 100%) repeat scroll 0 0;
	border-radius: 5px;
}
Open theme/colours.css, find:

Code: Select all

li.row {
	border-top-color:  #FFFFFF;
	border-bottom-color: #00608F;
}
Replace with:

Code: Select all

li.row {
	border-bottom-color: #1f1f1f;
	border-top-color: #454545;
}
Find and remove:

Code: Select all

li.row:hover {
	background-color: #343434;
}
Purge forum cache and delete browser's cache.
User avatar
_Vinny_
Style Customisations
Style Customisations
Posts: 10515
Joined: Tue Aug 11, 2009 12:45 am
Location: Brazil
Name: Marcus Vinicius

Re: Change sub-foren-block Design

by Eddie Felson » Fri Sep 15, 2017 7:47 pm

Very good work.

The original black design looks very well, but this changes reduce the stress for the eyes

Thanks
Eddie Felson
Registered User
Posts: 16
Joined: Thu Sep 04, 2014 7:59 pm