Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Wygląd statystyk jak na CS-Harnaś. Modernizacja kodu CSS


Rekomendowane odpowiedzi

witam chciałbym zmodernizować statystyki na stronie głównej a mianowicie chodzi o to coś podobnego na cs-harnaś

png

Odnośnik do komentarza
Udostępnij na innych stronach

(edytowane)

CSS

#boardstats {
	clear: both;
	display: block;
	width: 96%;
	padding: 2% 2%;
	background: #0009;
	border-bottom: 1px dashed #444;
}

#boardstats .row {
	width: 100%;
	clear: both;
	position: relative;
	overflow:  hidden;
	max-width: 1380px;
	margin:  0 auto;
}

#boardstats .row h1:before {
	content: "";
	display:  block;
	float:  left;
	width: 19px;
	height: 19px;
	margin: 1px 5px 0 0;
	background: transparent url(/images/MyStrikeBoard/stats-mini.png);
	background-size:  cover;
}

#boardstats .row.wonline h1:before {
    background-position-x: 0;
}

#boardstats .row.ranks h1:before {
    background-position-x: 38px;
}

#boardstats .row.birthdays h1:before {
    background-position-x: 19px;
}

#boardstats .row h1 {
    color: #ddd;
    font-size: 16px;
    padding: 10px 0 0;
    margin:  0;
    display: inline-block;
    font-family: 'Encode Sans Expanded', sans-serif;
}

#boardstats .row h2 {
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
}

#boardstats .row .stats {
    width: 20%;
    height: 90px;
    margin: 30px 2.5%;
    font-size: 17px;
    float: left;
    box-sizing: border-box;
    background: url(https://cs-harnas.pl/uploads/set_resources_4/84c1e40ea0e759e3f1505eb1788ddf3c_ministats_bg.png) center no-repeat;
    color: #eee;
    padding: 15px;
    text-align: center;
}


#boardstats .row .stats h3 {
    margin: -2px 0 0 0;
    font-size: 15px;
    text-transform: uppercase;
}

#boardstats .row .stats posts:before {
    content:  "\f075";
    width: 40px;
    height: 40px;
    display:  block;
    float: left;
    margin-right: 12px;
}

#boardstats .row .stats players:before {
    content:  "\f500";
    width: 40px;
    height: 40px;
    display:  block;
    float: left;
    margin-right: 12px;
}

#boardstats .row .stats rekord:before {
    content:  "\f017";
    width: 40px;
    height: 40px;
    display:  block;
    float: left;
    margin-right: 12px;
}

#boardstats .row .stats member:before {
    content:  "\f007";
    width: 40px;
    height: 40px;
    display:  block;
    float: left;
    margin-right: 12px;
}

#boardstats .row .stats.posts:before {background-position-x: 0;}

#boardstats .row .stats.players:before {background-position-x: -40px;}

#boardstats .row .stats.rekord:before {background-position-x: 80px;}

#boardstats .row .stats.member:before {background-position-x: 40px;}

HTML:

<div class="row">
	<div class="stats posts">
		<h3>Liczba Postów</h3>
		{$stats['numposts']}
	</div>
	<div class="stats players">
		<h3>Liczba Graczy</h3>
		{$stats['numusers']}
	</div>
	<div class="stats rekord">
		<h3>Rekord Online</h3>
		{$mostonline['numusers']}
	</div>
	<div class="stats member">
		<h3>Najnowszy Gracz</h3>
		$newestmember
	</div>	
</div>
Edytowane przez Speed.
Odnośnik do komentarza
Udostępnij na innych stronach

@Speed.  coś słabo wygląda 

Bez tytułu.png

Odnośnik do komentarza
Udostępnij na innych stronach

@SzaQu Użyj opcji Zbadaj, to żadna filozofia.

Klasa .grayp i edytuj color

.grayp {
    font-size: 13px;
    text-align: center;
    font-weight: 400;
    color: #969696;
}
Odnośnik do komentarza
Udostępnij na innych stronach

@Tomik nie pomogło dalej to samo :/ 

Odnośnik do komentarza
Udostępnij na innych stronach

@SzaQu Sprawdzałem i działa. Zobacz CTRL + F5

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...