Shoutbox - Estilo Azul Bebê

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Shoutbox - Estilo Azul Bebê

Mensagem por ShaDownS em 06/05/14, 11:42 am

  • Descrição:
Olá, eu queria um shoutbox com coloração padrão azul bebe. Onde, os campo das mensagem fossem branco, e ao lado esquerdo (onde fica horário e Nick do autor) poderia ficar azul bebe claro, cabeçalho centrado com o nome PokeChat com fonte Verdana em tamanho médio, fundo desse cabeçalho ser azul bebe, as cores de fonte do horário e Nick dos usuários seria azul bebe escuro, e a do texto da mensagem azul bebe claro alternando de tonalidade de escuro para claro.
A fonte do texto da mensagem ser Calibri ou Arial. No painel para escrever a mensagem, ser um campo de texto não entrada de texto, isto é, um campo grande. Os menus de cor azul bebe escura, com fundo branco ou transparente.
sobre a lista de smyles visualizaria um campo flutuante com os smyles para serem selecionados. O mesmo para botar a cor no texto, seria um campo flutuante, com um lado preenchido com um campo para deslizar um pontinho numa cor e no outro o menu de ajuste em numero da cor, acima destes vai um retângulo mostrando a cor desejada, abaixo do menu de ajuste em numero, vai um campo para ajuste em exadecimal.
Sobre o botão enviar, pode ser um botão branco, fonte Arial Black, cor preta, tamanho ajustado conforme o tamanho do botão, no caso, botão médio. E um botão de Reiniciar o campo. Esses vão abaixo do campo de texto, centrados em relação a este.
É só. Espero que consigam. ^^
Abraços, Ulti.

  • Informações:
Fórum:http://forumpokemonxy.forumeiros.comVersão:PUNBB
Tipo:Pedido de códigoTags:Shoutbox,Estilo



Última edição por UltimaterX em 11/05/14, 08:44 am, editado 2 vez(es)
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Shoutbox - Estilo Azul Bebê

Mensagem por Alex Habilidade em 07/05/14, 08:35 am

Olá,

Creio que seja complexo o que você quer, se tentarmos de uma maneira poderemos não agrada-lo. Veja o tópico abaixo como personalizar, com isto você consegue personalizar ao seu gosto Feliz
http://ajuda.forumeiros.com/t22416-tutorial-personalizar-o-chatbox
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Shoutbox - Estilo Azul Bebê

Mensagem por ShaDownS em 08/05/14, 01:27 am

Ótimo, mas não sei como por os códigos de maneira certa. Nem mesmo com o exemplo final.
Poderia me fornecer um básico disso? Eu não entendo muito bem CSS ^^
Abraços, Ulti.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Shoutbox - Estilo Azul Bebê

Mensagem por Alex Habilidade em 09/05/14, 08:43 pm

Olá,

Fiz alguns teste e construi um código para você, adicione em sua folha CSS:
Código:

/*
Chatbox adapted by Alex
*/
/*
Botões BBcode
*/
#divbold > img, #divitalic > img, #divunderline > img, #divstrike > img, #divcolor > img {
    padding: 5px;
}
/*
Botão enviar
*/
.right input {
    border-radius: 8px;
    padding: 6px;
    font-family: arial;
    font-weight: bold;
}
/*
string escrito Mensagem:
*/
.right label {
    font-size: 14px;
    font-weight: bold;
}
/*
font do texto
*/
.msg > span {
    font-family: calibri;
    font-size: 14px;
}
/*
topo chatbox
*/
#chatbox_header {
    border: 1px solid #DDDDDD;
}
/*
titulo chatbox
*/
.chat-title:before {
    color: #000000;
    content: "PokeChat";
    font-family: verdana;
    font-size: 19px;
    letter-spacing: normal;
    margin-left: 160%;
}
.chat-title {
    color: rgba(0, 0, 0, 0) !important;
    letter-spacing: -999px;
}
/*
caixa de mensagem
*/
.chatbox_row_2 {
    background-color: #90C6FF;
    border: 1px solid #CCCCCC;
    padding: 5px;
}
.chatbox_row_1 {
    background-color: #90C6FF!important;
    border: 1px solid #CCCCCC;
    padding: 5px;
}
/*
fim chatbox
*/
Resultado: http://i55.servimg.com/u/f55/14/99/55/84/chat10.png

Note: Não acompanhei por inteiro o seu texto, em algumas partes eu não compreendi, caso falte algo peço que mostre com print uma breve descrição!
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Shoutbox - Estilo Azul Bebê

Mensagem por ShaDownS em 11/05/14, 08:43 am

Valeu Alex! Eu vi uns tutoriais sobre CSS na internet, e vou alterar umas coisas ^^ obrigado.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum