Перейти к содержанию
Авторизация  
Подписчики 0
bart86rus

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

Автор bart86rus, в Обсуждения

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

bart86rus    1

bart86rus
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано 
<img src="{template}/images/ico-{game}.png" alt="{game}" class="status-icon">

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

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

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

shaft    30

shaft
Опубликовано

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

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

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

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

Energy    260

Energy
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано

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

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

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

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

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

Energy    260

Energy
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано

Скинь файл 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    67

DeeDra
Опубликовано 
[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 ?

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

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

ffffffffffffffffff    643

ffffffffffffffffff
Опубликовано 
[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    1

bart86rus
Опубликовано

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

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

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

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

bart86rus    1

bart86rus
Опубликовано

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

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

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

post-24040-0-22393000-1457130035_thumb.png

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

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

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

Вы должны быть пользователем, чтобы оставить комментарий

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

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация  
Подписчики 0
Перейти к списку тем

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

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×
×
  • Создать...