Como colocar sistema de status

Detalhes da questão

Endereço do fórum: https://habbling.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá @weverson lopes,

A alteração do status seria feita manualmente, certo?
Além disso, preciso de algumas informações mais específicas porque você não explicou muito bem na mensagem inicial:

Como seria mais ou menos o "Servidor online" e "Servidor offline"? Você informou "com uma cor no fundo dessas letras, quem conhece sabe", mas infelizmente sou uma das pessoas que não sabe.

Seriam quantos servidores? O nome seria apenas Servidor 01, Servidor 02, etc.?

Fico no aguardo,
Chanp

Oi chanp, desculpe pela má informação, eu disse quem "conhece sabe" a parte de server online e tals, não foi a intenção de dizer que vcs não sabe, peço desculpa a má impressão.

enfim a maneira que eu gostaria é tipo assim

aonde está escrito icone, eu gostaria de deixar o icone da imagem e tals

e respondendo a alteração do status seria sim manualmente

weverson lopes escreveu:Oi chanp, desculpe pela má informação, eu disse quem "conhece sabe" a parte de server online e tals, não foi a intenção de dizer que vcs não sabe, peço desculpa a má impressão.

Não entendi desse modo, não se preocupe.

Consegui compreender perfeitamente sua questão. Poderia me informar em que local isso seria adicionado, por favor? (página HTML, algum tópico, etc).

acho que eu gostaria de colocar na pagina inicial ou em um widget se possivel

de preferencia em um widget

Olá @weverson lopes,

weverson lopes escreveu:acho que eu gostaria de colocar na pagina inicial ou em um widget se possivel

de preferencia em um widget

Crie um novo widget personalizado e use o seguinte código:

Código:

<ul id="serverlist">
                          
 <li>
              Servidor 1 <span class="status off"></span>              
 </li>
                            
 <li>
              Servidor 2 <span class="status manu"></span>              
 </li>
                          
 <li>
              Servidor 3 <span class="status on"></span>              
 </li>
</ul>
 <style>
#serverlist {
  margin: 0!important;
  padding: 0!important;
  list-style-type: none;
}

#serverlist > li {
  margin-bottom: 1em;
}

#serverlist > li > span {
  float: right;
}

#serverlist > li > .status:after {
  color: white;
  padding: 3px 6px;
  height: 16px;
  font-size: 11px!important;
  text-transform: uppercase;
}

#serverlist > li > .status.on:after {content: 'online'; background-color: #4CAF50;}
#serverlist > li > .status.off:after {content: 'offline'; background-color: #f44336;}
#serverlist > li > .status.manu:after { content: 'manuteção'; background-color: #e7e7e7; color: black;}
</style>

e diga-me se é exatamente o que o senhor deseja!


Aguardo uma resposta sua,
pedxz.

oi pedx, eu dicionei, porém o meu fórum tem um jv que permite aparecer apenas o widget de ultimos assuntos.

como faço pra não ocultar o widget de status sem danificar os jv

por que eu queria colocar emcima dos ultimos assuntos mas o widget dos status não aparece

weverson lopes escreveu:por que eu queria colocar emcima dos ultimos assuntos mas o widget dos status não aparece

O senhor quer adicionar a listagem em cima dos "Últimos assuntos"? Ou adicionar somente o widget "Últimos assuntos" em cima e voltar a usar os widgets do lado direito/esquerdo?!

quero adicionar apenas em cima dos ultimos assuntos

Crie uma nova página JavaScript com investimento onde o senhor desejar, com o seguinte código:

Código:

(function($) {
    'use strict';

    var name = 'Status do Cheat'; /* Nome do Widget */

    $(function() {

        var $widget = $('.module').find('.h3:contains(' + name + ')');

        if (!$widget.length) return;

        $widget
            .parent()
            .insertBefore('#wrapper');

    });
})(jQuery);

oi pedx, funcionou muitoooo booom, mas tipo eu queria que no meio sabe aqui

weverson lopes escreveu:oi pedx, funcionou muitoooo booom, mas tipo eu queria que no meio sabe  aqui

O senhor quer adicionar um novo campo ("versão") ao widget? Desculpe a questão, mas o seu comentário foi um pouco vago

oi pedx, acho que diitei e saiu as letras erradas, saiu mal explicadas devido ao um copo de café que derrubei no teclado ahhaha

sabe aonde está escrito servidor 1?

ele está assim Servidor 1 Offline

eu queria colocar assim  Servidor 1 | versão 1.0 Offline igual expecifiquei na imagem abaixo



eu queria adicionar no meio, nesse espaço vazio do lado do servidor 1, servidor 2, servidor 3 e etc..

acho que essa é a melhor maneira de explicar, sou censurado em explicar direito as coisas

se possivel teria como adicionar o icone de uma imagem do lado esquerdo do servidor 1, servidor 2, servidor 3 ?

tipo um icone antes do servidor 1 por exemplo.

Altere o código em uso para:

Código:

<style>
  #serverlist div:not([class]) {
  display: flex;
  margin-bottom: 1em;
  }
  #serverlist .col {
  flex: 1;     
  }
  #serverlist .status:after {
  color: white;
  padding: 3px 6px;
  height: 16px;
  font-size: 11px!important;
  text-transform: uppercase;
  }
  #serverlist .status.on:after {content: 'online'; background-color: #4CAF50;}
  #serverlist .status.off:after {content: 'offline'; background-color: #f44336;}
  #serverlist .status.manu:after { content: 'manuteção'; background-color: #e7e7e7; color: black;}
</style>
<div id="serverlist">
  <!--    Servidor 1    -->   
  <div>
      <div class="col">
        Servidor 1   
      </div>
      <div class="col">
        Versão 1   
      </div>
      <div class="col">
        <span class="status off"></span>   
      </div>
  </div>
  <!-- Acaba aqui o Servidor 1 -->
  <!-- Servidor 2 -->
  <div>
      <div class="col">
        Servidor 2
      </div>
      <div class="col">
        Versão 1   
      </div>
      <div class="col">
        <span class="status on"></span>   
      </div>
  </div>
  <!-- Acaba aqui Servidor 2 -->
</div>

tipo um icone antes do servidor 1 por exemplo.

Ícone imagem ou ícone #fontawesome ?

oi pedx, seria icone de imagens mesmo, outra coisa, ficou muito bonito mas sera que tem como tirar esse espaço branco que fica depois dos status e deixar um quadrado menor igual marquei na print abaixo, só isso, obrigado desde já

UP 1 DIAAA

alo upppp