Вывод иконки статуса сервера

bart86rus · 4 марта, 2016

Кто может подсказать как прописать, чтобы иконка менялась в зависимости он статуса сервера. Ибо сейчас пока только так делаю. Иконки есть в наличии

ffffffffffffffffff · 4 марта, 2016



<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">

bart86rus · 4 марта, 2016

В 04.03.2016 в 16:57, OurLastNight сказал:
<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">

я так уже делал, но уменя не выводит иконку, мол картинки нету показывает, в коре сайта есть папка images и файлы ico-on и ico-off в png

shaft · 4 марта, 2016

А просто статус сервера работает?

Может конекта с сервером нет?

Energy · 4 марта, 2016

В 04.03.2016 в 17:44, bart86rus сказал:
я так уже делал, но уменя не выводит иконку, мол картинки нету показывает, в коре сайта есть папка images и файлы ico-on и ico-off в png

ты смотри путь откуда запрашиваются иконки то вообще

bart86rus · 4 марта, 2016

В 04.03.2016 в 18:12, Energy сказал:
ты смотри путь откуда запрашиваются иконки то вообще

где его глянуть?

bart86rus · 4 марта, 2016

В 04.03.2016 в 18:09, shaft сказал:

А просто статус сервера работает?

Может конекта с сервером нет?

Есть коннект, на этом шаблоне есть шкала которая показывает онлайн, но мне понадобилась иконка еще

Energy · 4 марта, 2016

В 04.03.2016 в 17:44, bart86rus сказал:
я так уже делал, но уменя не выводит иконку, мол картинки нету показывает, в коре сайта есть папка images и файлы ico-on и ico-off в png

у тебя иконки лежат в корне сайта а должны лежать там где лежит шаблон

bart86rus · 4 марта, 2016

В 04.03.2016 в 18:32, Energy сказал:
у тебя иконки лежат в корне сайта а должны лежать там где лежит шаблон

иконки лежат в шаблоне, в папке images

ffffffffffffffffff · 4 марта, 2016

В 04.03.2016 в 18:40, bart86rus сказал:
иконки лежат в шаблоне, в папке images

Скинь файл server.tpl

bart86rus · 4 марта, 2016

В 04.03.2016 в 21:51, OurLastNight сказал:
Скинь файл server.tpl

[main]
<div id="status-ls" sid="0">
<table class="server">
<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">
					<tbody><tr>
						<td style="font-family: Myriad Pro;color: #db9d46;">
							
							<!-- ОБТ 28.02.2016 в 20-00 по МСК -->
							<style>
	#st {
		width: 240px;
	}
	.st-img-1 {
		background: url(templates/itpro/img/s-on-1.png) no-repeat;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 38px;
	}
	.st-img-2 {
		background: url(templates/itpro/img/s-on-2.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 0%;
		height: 38px;
		float: left;
	}

	@keyframes blik-wiggle {
		0% { opacity: 0.8; }
		100% { opacity: 1; }
	}

	.st-img-blik {
		opacity: 0;
		background: url(templates/itpro/img/blik.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 74px;
		height: 95px;
		margin: -18px 0px 0px -35px;
		float: left;
	}

	.st-img-blik-ani {
		animation-name: blik-fade-in, blik-wiggle; /* имя */
		animation-duration: 0.3s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 0s; /* задержка */
		animation-iteration-count: infinite; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	.st-text {
		text-align: center;
	    color: #FFFFFF;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: 16px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	.st-name {
		text-align: center;
	    color: #4FCBFF;
		letter-spacing: 0.7px;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: -5px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	@keyframes tada {
	  0% {
	    transform: scale3d(1, 1, 1);
	  }

	  20% {
	  	transform: scale3d(1.1, 1.1, 1.1);
	  }

	  40%, 60%, 80% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  }

	  30%, 50%, 70% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  }

	  100% {
	    transform: scale3d(1, 1, 1);
	  }
	}

	.tada {
		animation-name: tada;
		animation-duration: 1.1s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 2s; /* задержка */
		animation-iteration-count: 1; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	

</style>
<script>

$(document).ready(function(){

	var online = 0; // 0

	setTimeout(function(){

		$('.st-img-blik').animate({
			opacity : 1
		}, 1500, 'easeInOutCubic', function(){
			$('.st-img-blik').attr('class', 'st-img-blik st-img-blik-ani');
		});

		var defineWidth = Math.floor(online/(2000/100));
		console.log(defineWidth);
		if (defineWidth < 
		{
			defineWidth = 8;
		}
		else if ( defineWidth > 90 )
		{
			defineWidth = 90;
		}

		$('.st-img-2').animate({
			width : Math.floor((214/100)*defineWidth)+'px'
		}, 1500, 'easeInOutCubic');

	}, 700);

	setInterval(function(){
		$('#st').attr('class', '');
		setTimeout(function(){
			$('#st').attr('class', 'tada');
		}, 100);
	}, 1300*3);
});

</script>{item}
						</td>
					</tr>
				</tbody></table>
				</div>

[/main]

[item]
<div id="st" class="tada">
	<div class="st-img-1"></div>
	<div class="st-img-2" style="width: 17px;"></div>
	<div class="st-img-blik st-img-blik-ani" style="opacity: 1;"></div>
	<div class="st-text">{online}</div>
	<div class="st-name">{name}</div>
</div>
[/item]

DeeDra · 4 марта, 2016

В 04.03.2016 в 22:12, bart86rus сказал:

[main]
<div id="status-ls" sid="0">
<table class="server">
<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">
					<tbody><tr>
						<td style="font-family: Myriad Pro;color: #db9d46;">
							
							<!-- ОБТ 28.02.2016 в 20-00 по МСК -->
							<style>
	#st {
		width: 240px;
	}
	.st-img-1 {
		background: url(templates/itpro/img/s-on-1.png) no-repeat;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 38px;
	}
	.st-img-2 {
		background: url(templates/itpro/img/s-on-2.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 0%;
		height: 38px;
		float: left;
	}

	@keyframes blik-wiggle {
		0% { opacity: 0.8; }
		100% { opacity: 1; }
	}

	.st-img-blik {
		opacity: 0;
		background: url(templates/itpro/img/blik.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 74px;
		height: 95px;
		margin: -18px 0px 0px -35px;
		float: left;
	}

	.st-img-blik-ani {
		animation-name: blik-fade-in, blik-wiggle; /* имя */
		animation-duration: 0.3s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 0s; /* задержка */
		animation-iteration-count: infinite; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	.st-text {
		text-align: center;
	    color: #FFFFFF;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: 16px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	.st-name {
		text-align: center;
	    color: #4FCBFF;
		letter-spacing: 0.7px;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: -5px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	@keyframes tada {
	  0% {
	    transform: scale3d(1, 1, 1);
	  }

	  20% {
	  	transform: scale3d(1.1, 1.1, 1.1);
	  }

	  40%, 60%, 80% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  }

	  30%, 50%, 70% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  }

	  100% {
	    transform: scale3d(1, 1, 1);
	  }
	}

	.tada {
		animation-name: tada;
		animation-duration: 1.1s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 2s; /* задержка */
		animation-iteration-count: 1; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	

</style>
<script>

$(document).ready(function(){

	var online = 0; // 0

	setTimeout(function(){

		$('.st-img-blik').animate({
			opacity : 1
		}, 1500, 'easeInOutCubic', function(){
			$('.st-img-blik').attr('class', 'st-img-blik st-img-blik-ani');
		});

		var defineWidth = Math.floor(online/(2000/100));
		console.log(defineWidth);
		if (defineWidth < 
		{
			defineWidth = 8;
		}
		else if ( defineWidth > 90 )
		{
			defineWidth = 90;
		}

		$('.st-img-2').animate({
			width : Math.floor((214/100)*defineWidth)+'px'
		}, 1500, 'easeInOutCubic');

	}, 700);

	setInterval(function(){
		$('#st').attr('class', '');
		setTimeout(function(){
			$('#st').attr('class', 'tada');
		}, 100);
	}, 1300*3);
});

</script>{item}
						</td>
					</tr>
				</tbody></table>
				</div>

[/main]

[item]
<div id="st" class="tada">
	<div class="st-img-1"></div>
	<div class="st-img-2" style="width: 17px;"></div>
	<div class="st-img-blik st-img-blik-ani" style="opacity: 1;"></div>
	<div class="st-text">{online}</div>
	<div class="st-name">{name}</div>
</div>
[/item]

Прости за спам, догадываюсь с какого дизайна http://forummaxi.ru/topic/75104-rip-interluderucom-под-stressweb-13/#entry703540 ?

DeeDra · 4 марта, 2016

Отпиши по контактам сделаю)

ffffffffffffffffff · 4 марта, 2016

В 04.03.2016 в 22:12, bart86rus сказал:

[main]
<div id="status-ls" sid="0">
<table class="server">
<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">
					<tbody><tr>
						<td style="font-family: Myriad Pro;color: #db9d46;">
							
							<!-- ОБТ 28.02.2016 в 20-00 по МСК -->
							<style>
	#st {
		width: 240px;
	}
	.st-img-1 {
		background: url(templates/itpro/img/s-on-1.png) no-repeat;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 38px;
	}
	.st-img-2 {
		background: url(templates/itpro/img/s-on-2.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 0%;
		height: 38px;
		float: left;
	}

	@keyframes blik-wiggle {
		0% { opacity: 0.8; }
		100% { opacity: 1; }
	}

	.st-img-blik {
		opacity: 0;
		background: url(templates/itpro/img/blik.png) no-repeat;
		position: relative;
		z-index: 2;
		width: 74px;
		height: 95px;
		margin: -18px 0px 0px -35px;
		float: left;
	}

	.st-img-blik-ani {
		animation-name: blik-fade-in, blik-wiggle; /* имя */
		animation-duration: 0.3s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 0s; /* задержка */
		animation-iteration-count: infinite; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	.st-text {
		text-align: center;
	    color: #FFFFFF;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: 16px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	.st-name {
		text-align: center;
	    color: #4FCBFF;
		letter-spacing: 0.7px;
	    font-size: 16px;
	    position: absolute;
	    width: 214px;
	    margin-top: -5px;
	    z-index: 3;
	    text-shadow: 0px 0px 5px #000;
	}

	@keyframes tada {
	  0% {
	    transform: scale3d(1, 1, 1);
	  }

	  20% {
	  	transform: scale3d(1.1, 1.1, 1.1);
	  }

	  40%, 60%, 80% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	  }

	  30%, 50%, 70% {
	    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	  }

	  100% {
	    transform: scale3d(1, 1, 1);
	  }
	}

	.tada {
		animation-name: tada;
		animation-duration: 1.1s; /* длительность */
		animation-timing-function: ease-in-out; /* функция плавности */
		animation-delay: 2s; /* задержка */
		animation-iteration-count: 1; /* кол-во итераций */
		animation-direction: alternate; /* напрявление движения */
		animation-fill-mode: none; /* финальный стиль */
		animation-play-state: running; /* состояние проигрывания */
	}

	

</style>
<script>

$(document).ready(function(){

	var online = 0; // 0

	setTimeout(function(){

		$('.st-img-blik').animate({
			opacity : 1
		}, 1500, 'easeInOutCubic', function(){
			$('.st-img-blik').attr('class', 'st-img-blik st-img-blik-ani');
		});

		var defineWidth = Math.floor(online/(2000/100));
		console.log(defineWidth);
		if (defineWidth < 
		{
			defineWidth = 8;
		}
		else if ( defineWidth > 90 )
		{
			defineWidth = 90;
		}

		$('.st-img-2').animate({
			width : Math.floor((214/100)*defineWidth)+'px'
		}, 1500, 'easeInOutCubic');

	}, 700);

	setInterval(function(){
		$('#st').attr('class', '');
		setTimeout(function(){
			$('#st').attr('class', 'tada');
		}, 100);
	}, 1300*3);
});

</script>{item}
						</td>
					</tr>
				</tbody></table>
				</div>

[/main]

[item]
<div id="st" class="tada">
	<div class="st-img-1"></div>
	<div class="st-img-2" style="width: 17px;"></div>
	<div class="st-img-blik st-img-blik-ani" style="opacity: 1;"></div>
	<div class="st-text">{online}</div>
	<div class="st-name">{name}</div>
</div>
[/item]

Куда тебе добавить картинку?

Нарисуй куда и добавлю.

bart86rus · 4 марта, 2016

В 04.03.2016 в 22:16, DeeDra сказал:
Отпиши по контактам сделаю)

Верно, хотел указать ,но забыл где ссылка)

bart86rus · 4 марта, 2016

В 04.03.2016 в 22:17, OurLastNight сказал:

Куда тебе добавить картинку?

Нарисуй куда и добавлю.

прикрепил фото, вот вместо красного круга если что css сам поправлю

ffffffffffffffffff · 4 марта, 2016

И картинку желательно скинь.

bart86rus · 4 марта, 2016

В 04.03.2016 в 22:21, OurLastNight сказал:
И картинку желательно скинь.

Войти

Вывод иконки статуса сервера

Рекомендуемые сообщения

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

ffffffffffffffffff 643

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

shaft 30

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Energy 263

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Energy 263

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

ffffffffffffffffff 643

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

DeeDra 67

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

DeeDra 67

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

ffffffffffffffffff 643

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

ffffffffffffffffff 643

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

bart86rus 1

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Сайт