Jump to content
Sign in to follow this  
Followers 0
bart86rus

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

By bart86rus, in General Discussion

Recommended Posts

bart86rus    1

bart86rus
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

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

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

Share this post

Link to post
Share on other sites

shaft    30

shaft
Posted

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

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

Share this post

Link to post
Share on other sites

Energy    263

Energy
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

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

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

Share this post

Link to post
Share on other sites

Energy    263

Energy
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

Share this post

Link to post
Share on other sites

DeeDra    67

DeeDra
Posted 
[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 ?

Share this post

Link to post
Share on other sites

ffffffffffffffffff    643

ffffffffffffffffff
Posted 
[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]

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

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

Share this post

Link to post
Share on other sites

bart86rus    1

bart86rus
Posted

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

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

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

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...