Перейти к содержанию
Авторизация  
maloystarley

статус серверов

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

всем привет 

братцы такой вот вопрос возник как сделать на каждый сервер своего цвета линию как вот тут?

STATUSSERVEROV.jpg

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


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, maloystarley сказал:

всем привет 

братцы такой вот вопрос возник как сделать на каждый сервер своего цвета линию как вот тут?

STATUSSERVEROV.jpg

Эм, взять и сделать. Смотря как там сделано: либо css, либо юзается прямо изображение залитое цветом.

И для начала определиться: либо вы хотите, чтобы за вас все сделали, либо вы разбираетесь, и понимаете, что эта тема бесполезна.

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


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

ну принцип работы нижних 3 мне понятен а вот откуда берутся 2 верхних цвета 

в server.tpl вот что 

[main]
{item}
[/main]

[item]
<div class="server animation_server_side" data-online="{online}">
    <div class="server-name">{name}</div>
    <div class="server-status {game}">{game}</div>
    <div class="server-line server-line_blue"></div>
    
</div>
[/item]

в css есть вот такое

.server-line_blue {
    background: url(../images/server-line_blue.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}
.server-line_gold {
    background: url(../images/server-line_gold.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}
.server-line_fiolet {
    background: url(../images/server-line_fiolet.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}

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


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, maloystarley сказал:

ну принцип работы нижних 3 мне понятен а вот откуда берутся 2 верхних цвета 

в server.tpl вот что 

[main]
{item}
[/main]

[item]
<div class="server animation_server_side" data-online="{online}">
    <div class="server-name">{name}</div>
    <div class="server-status {game}">{game}</div>
    <div class="server-line server-line_blue"></div>
    
</div>
[/item]

в css есть вот такое

.server-line_blue {
    background: url(../images/server-line_blue.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}
.server-line_gold {
    background: url(../images/server-line_gold.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}
.server-line_fiolet {
    background: url(../images/server-line_fiolet.png) no-repeat left;
    height: 23px;
    transition: all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96);
}

Ну вот, вы и кидаете стили трех разноцветных полос. Как я и сказал, они заполняются готовыми изображениями, залитыми нужными цветами. Открываете пеинт, и изменяете цвет, я думаю, это не сложно.

Изменено пользователем Falkland

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


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

да с этим то понятно

вопрос в том как их выводить я ставлю в статус серверов 3 сервера и у всех выводится полоса одного цвета 

я же спрашиваю как сделать чтобы выводились разные

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


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, maloystarley сказал:

да с этим то понятно

вопрос в том как их выводить я ставлю в статус серверов 3 сервера и у всех выводится полоса одного цвета 

я же спрашиваю как сделать чтобы выводились разные

Смотреть, как устанавливаются стили для двух верхних полос, либо изобретать. В приведенном куске кода мало информации конкретно на этот счет.

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


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

.status{width:260px;position:absolute;right:99px;top:528px}
.status .title{margin-bottom:48px}
.server{background:url(../images/server.png);width:289px;padding:32px 34px 0;height:98px;margin:-25px 0 -25px -15px;position:relative}
.server:after{content:attr(data-online);width:100px;text-align:center;font-size:24px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,0.6);position:absolute;top:10px;left:50%;margin-left:-50px;z-index:1;opacity:0;visibility:hidden;transform:scale(0);transition:all 0.5s cubic-bezier(0.64, 0.22, 0, 1.41)}
.server:hover:after{opacity:1;visibility:visible;transform:scale(1);top:-10px}
.server-name{position:relative;color:#ffe09d;font-weight:bold;padding-left:3px}
.server-status{position:absolute;right:34px;top:33px;font-size:11px;color:#7a886c}
.server-status.off{color:#ab6060}
.server-status:after{content:'';background:url(../images/ico-on.png);width:12px;height:12px;display:inline-block;vertical-align:middle;margin:0 3px}
.server-status.off:after{background:url(../images/ico-off.png)}
.server-line{background:url(../images/server-line.png) no-repeat left;height:23px;width:0;transition:all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96)}

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


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, maloystarley сказал:

.status{width:260px;position:absolute;right:99px;top:528px}
.status .title{margin-bottom:48px}
.server{background:url(../images/server.png);width:289px;padding:32px 34px 0;height:98px;margin:-25px 0 -25px -15px;position:relative}
.server:after{content:attr(data-online);width:100px;text-align:center;font-size:24px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,0.6);position:absolute;top:10px;left:50%;margin-left:-50px;z-index:1;opacity:0;visibility:hidden;transform:scale(0);transition:all 0.5s cubic-bezier(0.64, 0.22, 0, 1.41)}
.server:hover:after{opacity:1;visibility:visible;transform:scale(1);top:-10px}
.server-name{position:relative;color:#ffe09d;font-weight:bold;padding-left:3px}
.server-status{position:absolute;right:34px;top:33px;font-size:11px;color:#7a886c}
.server-status.off{color:#ab6060}
.server-status:after{content:'';background:url(../images/ico-on.png);width:12px;height:12px;display:inline-block;vertical-align:middle;margin:0 3px}
.server-status.off:after{background:url(../images/ico-off.png)}
.server-line{background:url(../images/server-line.png) no-repeat left;height:23px;width:0;transition:all 2s cubic-bezier(0.48, 0.31, 0.32, 0.96)}

С css то все понятно, ищите, где в html используются стили .server-line_fiolet, .server-line_gold, .server-line_blue.

  • Upvote 1

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


Ссылка на сообщение
Поделиться на другие сайты
24 минуты назад, maloystarley сказал:

в том то и дело что нигде нет таких строк 

Если они используются, значит они где-то есть. Ищи по содержанию в файлах сайта. 

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


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

есть еще в js вот такой код 

    $('.server').each(function(index, el) {
        $(el).find('.server-line').width($(el).data('online')/5000*100 + '%');
		
     		if(index == 0) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		}     
     		if(index == 3) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		}     
        //$(el).append('<div class="show-online">0</div>');
    });
    var showOnlineTimeout;
    /*
    $('.server').hover(function() {
        if($(this).find('.show-online').html() == '0') {
            $(this).find('.show-online').animateNumber({ number: $(this).data('online') },1000);
        }
    });
    */

но при попытке замены .server-line на .server-line_blue или другую полосу просто перестает показывать

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


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, maloystarley сказал:

есть еще в js вот такой код 


    $('.server').each(function(index, el) {
        $(el).find('.server-line').width($(el).data('online')/5000*100 + '%');
		
     		if(index == 0) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		}     
     		if(index == 3) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		}     
        //$(el).append('<div class="show-online">0</div>');
    });
    var showOnlineTimeout;
    /*
    $('.server').hover(function() {
        if($(this).find('.show-online').html() == '0') {
            $(this).find('.show-online').animateNumber({ number: $(this).data('online') },1000);
        }
    });
    */

но при попытке замены .server-line на .server-line_blue или другую полосу просто перестает показывать

Правильно, тут происходит растягивание полос .server_line (т.е. всех полос). С цветом это никак не связано. Но именно в этом месте можно добавить установку цвета для каждой полосы. 

if(index == 0) { // Заполнит полоску сервера НОЛЬ по счету
	$(el).find('.server-line').css('background', 'url(../images/server-line_НУЖНЫЙ_ЦВЕТ_ИЗ_СУЩЕСТВУЮЩЕГО_СТИЛЯ.png) no-repeat left');
}     

Нужно добавить туда такие проверки для каждой по счету полосы.

Для новых цветов создать стили по примеру трех существующих (в начале темы были), а изображения для них закрасить в пеинте.

Изменено пользователем Falkland
  • Upvote 2

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


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

У тебя рип под св, а шаблон как я полагаю изначально не под св делался или же просто в html где можно было задать цвет для каждого статуса в ручную. В СВ статус выводится по шаблону, один шаблон для всех. Поэтому из тех кусков что я увидел тут 2 варианта:

Первый это псевдоклассы:

server:nth-child(1) .server-line {
    background: url(../images/server-line_blue.png) no-repeat left !important;
}
server:nth-child(2) .server-line {
    background: url(../images/server-line_gold.png) no-repeat left !important;
}
server:nth-child(3) .server-line{
    background: url(../images/server-line_fiolet.png) no-repeat left !important;
}
server:nth-child(4) .server-line {
    background: url(../images/server-line_fiolet.png) no-repeat left!important;
}

Второй это через javascript,  опять же, если тот скрипт что ты выложил работает так как заявлено:

 

$('.server').each(function(index, el) {
        $(el).find('.server-line').width($(el).data('online')/5000*100 + '%');
		
     	if(index == 0) { // Заполнит полоску сервера 1 по счету
			$(el).find('.server-line').css('background','url(images/имя_картинки.png) no-repeat left');
		} 
		if(index == 1) { // Заполнит полоску сервера 2 по счету
			$(el).find('.server-line').css('background','url(images/имя_картинки.png)  no-repeat left');
		}     
     		if(index == 2) { // Заполнит полоску сервера 3 по счету
			$(el).find('.server-line').css('background','url(images/имя_картинки.png)  no-repeat left');
		}     
        //$(el).append('<div class="show-online">0</div>');
    });
    var showOnlineTimeout;

 

  • Upvote 1

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


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

да это рип rampage

но тут либо я что то не так делаю что скорей всего))) либо это не работает

 

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


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

при добавлении в js 

$('.server').each(function(index, el) {
        $(el).find('.server-line').width($(el).data('online')/5000*100 + '%');
		
     	if(index == 0) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').css('background','url(images/server-line_blue.png) no-repeat left');
		}     
     		if(index == 1) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		} 
	if(index == 2) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		} 
	if(index == 3) { // Заполнит полоску сервера 3 по счет
			$(el).find('.server-line').width('100%');
		} 		
        //$(el).append('<div class="show-online">0</div>');
    });
    var showOnlineTimeout;

получается вот так

BEZIMENI-4.jpg

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


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

Если нужно, чтобы и сервер на 100% грузился и стиль менялся, то надо вместе писать...

 

$(el).find('.server-line').css('background','url(images/server-line_blue.png) no-repeat left');
$(el).find('.server-line').width('100%');

 

да это рип rampage

но тут либо я что то не так делаю что скорей всего))) либо это не работает

 

В первую очередь нужно понимать что делаешь, тогда можно искать ошибки. Если самому интересно решить проблему, то информации более чем предостаточно. Если же нужно чтобы кто-то за тебя сделал, ну дай хотя бы ссылку на сайт и скажи на каком этапе застрял.

Изменено пользователем L2Banners
  • Upvote 1

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


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

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

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

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

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

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

Войти

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

Войти
Авторизация  

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

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

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