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

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

Автор maloystarley, в Web

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

maloystarley    12

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

всем привет 

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

STATUSSERVEROV.jpg

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

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

Falkland    51

Falkland
Опубликовано
3 минуты назад, maloystarley сказал:

всем привет 

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

STATUSSERVEROV.jpg

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

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

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

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

maloystarley    12

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    51

Falkland
Опубликовано (изменено)
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

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

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

maloystarley    12

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

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

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

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

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

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

Falkland    51

Falkland
Опубликовано
3 минуты назад, maloystarley сказал:

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

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

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

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

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

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

maloystarley    12

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)}

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

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

Falkland    51

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

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

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

zGosu    396

zGosu
Опубликовано
24 минуты назад, maloystarley сказал:

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

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

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

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

maloystarley    12

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 или другую полосу просто перестает показывать

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

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

Falkland    51

Falkland
Опубликовано (изменено)
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

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

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

L2Banners    664

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

У тебя рип под св, а шаблон как я полагаю изначально не под св делался или же просто в 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

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

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

maloystarley    12

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

да это рип rampage

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

 

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

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

maloystarley    12

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').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

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

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

L2Banners    664

L2Banners
Опубликовано (изменено)

Если нужно, чтобы и сервер на 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
Перейти к списку тем

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

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

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