Efeitos de nicknames no chatbox

Detalhes da questão

Endereço do fórum: http://pottergo.forumeiros.com
Versão do fórum: phpBB3

Descrição

Boa tarde!

Fiz uma pesquisa minuciosa em grande partes dos tópicos existentes aqui no FdF sobre efeitos em nicknames, pude adicionar os efeitos sem problema nenhum, mas não funcionam no chatbox. Pesquisei novamente e não encontrei nada relacionado a isso.

Há uma maneira de que os efeitos também funcionem no chatbox? E existe a possibilidade de mudar o simbolo @ para outro símbolo ou é geral?

Olá!

O chatbox, por si só, é um lugar complicado de mexer com scripts, especialmente quando acedemos ao mesmo diretamente pelo link, exemplo: http://pottergo.forumeiros.com/chatbox
Não existe nenhuma forma de introduzir scripts diretamente nessa página. Existem outras soluções, mas é apenas quando o chatbox está numa página já existente e que suporte uma página Javascript, como por exemplo a página inicial (que é o lugar padrão do chatbox).
A única forma de alterar alguma coisa a nível estético é com CSS, no qual temos 100% liberdade, pois a folha de estilos é carregada no código raiz do chat.
Exemplo de CSS que pode adicionar para alterar o @ para o famoso #:

Código:

#chatbox_members ul[class="online-users"] span[style*="color:#"] {
        font-size: 0px;
}
#chatbox_members ul[class="online-users"] span[style*="color:#"]:before {
        font-size: 10px;
        content: '#'; // lugar para mudar informação, entre aspas
}
#chatbox_members ul[class="online-users"] span[style*="color:#"] span {
        font-size: 10px !important;
}

Atente na linha 6, o lugar para mudar o símbolo ou texto.

Hancki

Boa tarde Hancki e muito obrigada pela atenção.

Atualmente o CSS que uso para adicionar um efeito simples no nickname é esse:

Código:

a[href="/u251"] {
text-shadow: 0px 0px 5px #000000;
  background: url("http://brasil-nl.com.br/forum/public/style_images/splatts/brilho.gif");
}

Levando em consideração que uso apenas para usuários específicos por um motivo único, por isso que eu gostaria que eles fossem reconhecidos. Esse efeito pode ser adicionado ao chatbox ao nick dele no chatbox também?

Outra dúvida, e se eu quisesse por exemplo quer o @ da moderação fosse diferente do @ dos administradores. Há como atribuir esse código que você me passou para grupos específicos ou para usuários individualmente?

Para adicionar esse efeito de brilho no Chatbox, digamos, para o user 251, seria algo assim:

Código:

span.chatbox-username.chatbox-user-username[data-user="251"] {
text-shadow: 0px 0px 5px #000000;
  background: url("http://brasil-nl.com.br/forum/public/style_images/splatts/brilho.gif");
}

Para adicionar um símbolo diferente em grupos (temos que pegar pela variável da cor, neste caso usei a cor do seu grupo), seria algo assim:

Código:

#chatbox_members ul[class="online-users"] span[style="color:#FA9E00"] {
        font-size: 0px;
}
#chatbox_members ul[class="online-users"] span[style="color:#FA9E00"]:before {
        font-size: 10px;
        content: '#'; // lugar para mudar informação, entre aspas
}
#chatbox_members ul[class="online-users"] span[style="color:#FA9E00"] span {
        font-size: 10px !important;
}

Para fazer isso apenas num usuário (vou pegar outra vez no usuário 251), seria algo assim:

Código:

#chatbox_members ul[class="online-users"] span[data-user="251"]:before {
        content: ' '; // lugar para mudar informação, entre aspas
}

Vá testando estas várias possibilidades, explorando os códigos sem medo de errar. Estamos cá para ajudar.

Hancki

Todos funcionaram perfeitamente e eu já estou super contente com isso!

Agora digamos que queira substituir o @ de administradores específicos, também é possível? *cruza os dedos*

Olá!

É claro que sim. Os administradores, antes de tudo, são usuários comuns. É só alterar o número "251" para o número do perfil do administrador específico.

Hancki

Hancki, tenho duas dúvidas.

O código que você me passou fez com que surgissem dois símbolos, eu gostaria de apenas um mas que ele fosse diferente dos demais?

E também se há como adicionar a mudança mesmo quando nós nos ausentamos e quando mandamos mensagem no chatbox.

https://i.servimg.com/u/f88/20/03/94/07/_teste10.png

Veja este código abaixo:

Código:

.chatbox span[style="color:#FA9E00"] {
        font-size: 0px;
}
.chatbox span[style="color:#FA9E00"]:before {
        font-size: 10px;
        content: '#'; // lugar para mudar informação, entre aspas
}
#chatbox span[style="color:#FA9E00"]:after {
        font-size: 10px;
        content: ': '; //
}
.chatbox span[style="color:#FA9E00"] span {
        font-size: 10px !important;
}

Eu fiz de forma que ele colocasse um símbolo específico atrás de uma cor de grupo, neste caso o seu grupo de administração. Pode adicionar depois um símbolo específico a cada usuário, mas o mesmo vai ficar com 2 símbolos. O melhor seria adicionar individualmente.

Hancki

Adicionar individualmente seria ótimo!

Para usuários específicos tem esta opção:

Código:

.chatbox span[data-user="251"]:before {
        content: ' '; // lugar para mudar informação, entre aspas
}

Mas não consigo remover o @. Apesar que apenas só aparece para moderadores.

Compreendo, mas já é o suficiente. Consigo me virar muito bem com o que você me mandou.

Muito obrigada por toda a ajuda Hancki! Agradeço de coração.

Podem fechar o tópico.

Obrigado pela força @Hancki

Tópico resolvido Movido para "Questões resolvidas".