MyBB Community Forums

MyBB Community Forums > Extensions > Plugins > Plugin Support > Serversboard style problem after 1.8.14
Full Version: Serversboard style problem after 1.8.14
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Carbonzxc

2018-01-03, 04:39 PM
Hello everyone,

Today im upgraded my board to 1.8.14 from 1.8.13 but only issue i got is Servers Board plugin css.(as i believe)

Its not shows player count bar its only text like 32/32, no red bar. So i think its from a template file or .css is bugged after updating to 1.8.14

*Players count bar option is enabled at settings already*


[Image: RJ8DVI5JT-25YJJYBCbSjg.png]

chack1172

2018-01-03, 04:47 PM
The css file is not loaded like other css files. Try to go in AdminCP -> Template & Themes -> theme in use and check if there is serversboard.css

Carbonzxc

2018-01-03, 04:52 PM
(2018-01-03, 04:47 PM)chack1172 Wrote: [ -> ]The css file is not loaded like other css files. Try to go in AdminCP -> Template & Themes -> theme in use and check if there is serversboard.css

Hello yes you are right, theres no serversboard.css file but where can i get that serversboard.css content ? Thanks in advance

chack1172

2018-01-03, 04:54 PM
Create a new css file in the same page in AdminCP with this content:
.server {
	display: inline-block;
	height: 16px;
	line-height: 16px;
	padding: 0 5px;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background-image: url(../../../images/serversboard/highlight.png);
	background-repeat: repeat-x;
	background-position: 0 -1px;
}

.serveronline {
	background:green;
}

.serveroffline {
	background:red;
}

.servernumber {
	background:#0f0f0f;
}

.serverssummation {
	background:#0f0f0f;
}

.serverbutton {
	background:#0f0f0f;
}

.progress {
	height: 16px;
	overflow: hidden;
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));
	background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);
	background-repeat: repeat-x;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#fff5f5f5\',endColorstr=\'#fff9f9f9\',GradientType=0);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.progress .bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	color: #fff;
	text-align: center; 
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #0e90d2;
	background-image: -moz-linear-gradient(top,#149bdf,#0480be);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));
	background-image: -webkit-linear-gradient(top,#149bdf,#0480be);
	background-image: -o-linear-gradient(top,#149bdf,#0480be);
	background-image: linear-gradient(to bottom,#149bdf,#0480be);
	background-repeat: repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ff149bdf\',endColorstr=\'#ff0480be\',GradientType=0); 
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: width .6s ease;
	-moz-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease
}

.progress .bar+.bar {
	-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
	box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15)
}

.progress-striped .bar {
	background-color: #149bdf;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); 
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size: 40px 40px;
	-moz-background-size: 40px 40px;
	-o-background-size: 40px 40px;
	background-size: 40px 40px
}

.progress-danger .bar,.progress .bar-danger {
	background-color: #dd514c;
	background-image: -moz-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));
	background-image: -webkit-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: -o-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: linear-gradient(to bottom,#ee5f5b,#c43c35);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ffee5f5b\',endColorstr=\'#ffc43c35\',GradientType=0)
}

.progress-danger.progress-striped .bar,.progress-striped .bar-danger {
	background-color: #ee5f5b;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}

.progress-success .bar,.progress .bar-success {
	background-color: #5eb95e;
	background-image: -moz-linear-gradient(top,#62c462,#57a957);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));
	background-image: -webkit-linear-gradient(top,#62c462,#57a957);
	background-image: -o-linear-gradient(top,#62c462,#57a957);
	background-image: linear-gradient(to bottom,#62c462,#57a957);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ff62c462\',endColorstr=\'#ff57a957\',GradientType=0)
}

.progress-success.progress-striped .bar,.progress-striped .bar-success {
	background-color: #62c462;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}


.progress-warning .bar,.progress .bar-warning {
	background-color: #faa732;
	background-image: -moz-linear-gradient(top,#fbb450,#f89406);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
	background-image: -webkit-linear-gradient(top,#fbb450,#f89406);
	background-image: -o-linear-gradient(top,#fbb450,#f89406);
	background-image: linear-gradient(to bottom,#fbb450,#f89406);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#fffbb450\',endColorstr=\'#fff89406\',GradientType=0)
}

.progress-warning.progress-striped .bar,.progress-striped .bar-warning {
	background-color: #fbb450;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}

Carbonzxc

2018-01-03, 04:57 PM
(2018-01-03, 04:54 PM)chack1172 Wrote: [ -> ]Create a new css file in the same page in AdminCP with this content:
.server {
	display: inline-block;
	height: 16px;
	line-height: 16px;
	padding: 0 5px;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background-image: url(../../../images/serversboard/highlight.png);
	background-repeat: repeat-x;
	background-position: 0 -1px;
}

.serveronline {
	background:green;
}

.serveroffline {
	background:red;
}

.servernumber {
	background:#0f0f0f;
}

.serverssummation {
	background:#0f0f0f;
}

.serverbutton {
	background:#0f0f0f;
}

.progress {
	height: 16px;
	overflow: hidden;
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));
	background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);
	background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);
	background-repeat: repeat-x;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#fff5f5f5\',endColorstr=\'#fff9f9f9\',GradientType=0);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.progress .bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	color: #fff;
	text-align: center; 
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #0e90d2;
	background-image: -moz-linear-gradient(top,#149bdf,#0480be);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));
	background-image: -webkit-linear-gradient(top,#149bdf,#0480be);
	background-image: -o-linear-gradient(top,#149bdf,#0480be);
	background-image: linear-gradient(to bottom,#149bdf,#0480be);
	background-repeat: repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ff149bdf\',endColorstr=\'#ff0480be\',GradientType=0); 
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: width .6s ease;
	-moz-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease
}

.progress .bar+.bar {
	-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
	box-shadow: inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15)
}

.progress-striped .bar {
	background-color: #149bdf;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); 
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size: 40px 40px;
	-moz-background-size: 40px 40px;
	-o-background-size: 40px 40px;
	background-size: 40px 40px
}

.progress-danger .bar,.progress .bar-danger {
	background-color: #dd514c;
	background-image: -moz-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));
	background-image: -webkit-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: -o-linear-gradient(top,#ee5f5b,#c43c35);
	background-image: linear-gradient(to bottom,#ee5f5b,#c43c35);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ffee5f5b\',endColorstr=\'#ffc43c35\',GradientType=0)
}

.progress-danger.progress-striped .bar,.progress-striped .bar-danger {
	background-color: #ee5f5b;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}

.progress-success .bar,.progress .bar-success {
	background-color: #5eb95e;
	background-image: -moz-linear-gradient(top,#62c462,#57a957);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));
	background-image: -webkit-linear-gradient(top,#62c462,#57a957);
	background-image: -o-linear-gradient(top,#62c462,#57a957);
	background-image: linear-gradient(to bottom,#62c462,#57a957);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ff62c462\',endColorstr=\'#ff57a957\',GradientType=0)
}

.progress-success.progress-striped .bar,.progress-striped .bar-success {
	background-color: #62c462;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}


.progress-warning .bar,.progress .bar-warning {
	background-color: #faa732;
	background-image: -moz-linear-gradient(top,#fbb450,#f89406);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
	background-image: -webkit-linear-gradient(top,#fbb450,#f89406);
	background-image: -o-linear-gradient(top,#fbb450,#f89406);
	background-image: linear-gradient(to bottom,#fbb450,#f89406);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#fffbb450\',endColorstr=\'#fff89406\',GradientType=0)
}

.progress-warning.progress-striped .bar,.progress-striped .bar-warning {
	background-color: #fbb450;
	background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}

Fixed, Thanks in advance for assisting !
MyBB Community Forums > Extensions > Plugins > Plugin Support > Serversboard style problem after 1.8.14