Ir para conteúdo
  • Cadastre-se

[Tutorial] Personalização do LiveZilla

Ruan

Por Ruan
em Hospedagem compartilhada

 Compartilhar

Posts Recomendados

Ruan

Ruan

Postado
Postado (editado)

Olá pessoal, tranquilos? Minha primeira contribuição por aqui :D

Então, ontem dei uma estudada de leve no LiveZilla, pois queria personalizar ele para o meu novo site e consegui descobrir algumas coisinhas legais. Essa foi a minha primeira personalização do LiveZilla. Para explicar melhor, dividirei o tutorial em dois:

1) Personalização da página do LiveZilla (ex: www.meusite.com.br/livezilla);

Resultado final:

o597aq.jpg

2) Personalização do chat (local do atendimento);

Resultado final:

nq8xhl.jpg

Não é necessário ter o LiveZilla instalado, mas recomendo que faça uma instalação para testes e também para acompanhar os resultados. Depois é só fazer o upload dos arquivos modificados para o local desejado.

### TUTORIAL ###

1) PERSONALIZAÇÃO DA PÁGINA DO LIVEZILLA

1.1 OS ARQUIVOS

Para começar as modificações precisarei dos seguintes arquivos/pastas:

- pasta images;

- index.tpl (livezilla/templates/index.tpl);

- style.css (livezlla/templates/style.css);

1.2 IMAGENS PARA MODIFICAR

Para esta etapa você precisará modificar algumas imagens da pasta images:

- lz_index_logo.gif (logo principal)

- lz_index_startchat.gif (chat de demonstração)

- lz_index_addserver.gif (adicionar perfil do servidor)

- lz_index_bg.gif (background da página)

Basicamente são essas imagens a serem modificadas nessa primeira parte do tutorial. Se você preferir utilizar, por exemplo, imagens em .jpg ou .png, é necessário alterar o arquivo index.tpl. Ou seja, você procura pelos nomes das imagens acima e depois altera para o que quiser e com a extensão desejada. Na minha personalização eu fiz isso, modifiquei o arquivo index.tpl com o nome e as extensões que quis e não modifiquei as imagens, mas isso ai é gosto :D

Exemplo de modificação:

<td colspan="2" valign="top" align="center"> <img src="./images/logo_lojadeprimeira.png" border="0" class="lz_index_logo" alt=""></td>
1.3 MODIFICANDO O ARQUIVO INDEX.TPL Título da Página, por exemplo: 
<title>Suporte - Seu Website</title>[/code]


Os links do rodapé é só alterar o nome do link e seu respectivo endereço (pode-se acrescentar mais ou retirar também), por exemplo:
[code] <td align="center"><a class="lz_index_link" href="http://www.seusite.com.br/home" target="_blank">Home</a></td> <td align="center" class="lz_index_light_text">|</td> <td align="center"><a class="lz_index_link" href="http://www.seusite.com.br/blog" target="_blank">Blog</a></td> <td align="center" class="lz_index_light_text">|</td> <td align="center"><a class="lz_index_link" href="http://www.seusite.com.br/faq" target="_blank">FAQ</a></td> <td align="center" class="lz_index_light_text">|</td> <td align="center"><a class="lz_index_link" href="http://www.seusite.com.br/contato" target="_blank">Contato</a></td>[/code]
Mensagem e versão:
[code]<td colspan="2" width="400" align="center" class="lz_index_light_text">Sistema desenvolvido<br>por LiveZilla GmbH<br><br>Versão <!--lz_version--></td>[/code]
Há outras modificações que se pode fazer, basta dar uma lida nesse arquivo (que é relativamente pequeno e fácil de se estudar). 1.4 MODIFICANDO O ARQUIVO STYLE.CSS Nesta parte, eu fiz pequenas modificações, mas se você entende bem de css, poderá fazer muito mais. A única alteração que fiz nesse arquivo foi a parte do link do rodapé, que alterei de um tom cinza para azul. Para isso modifiquei a linha 96:
[code].lz_index_link{font-family:verdana,arial;font-size:11px;font-weight:bold;color:#003F45;text-decoration:none;}[/code]
1.5 MODIFICANDO O BACKGROUND Na minha personalização retirei a imagem do bg e apenas coloquei uma cor sólida. No meu caso, apenas modifiquei a linha 11 para o seguinte:
[CODE]<body bgcolor="#f3f3f3">[/code]

Ai você pode alterar o nome da imagem, definir o tamanho, a repetição ou qualquer outra regra de css. Fica a seu critério, como eu quis fazer algo mais clássico, não quis inventar muita coisa.

Também há a possibilidade de alterar direto a imagem [b]lz_index_bg.gif[/b] e salva-la com o pattern que você quiser.

[b]No post abaixo tem a continuação...[/b]

Editado por Ruan
Link para o comentário
Compartilhar em outros sites
Ruan

Ruan

Postado
  • Autor
Postado

2) PERSONALIZAÇÃO DO CHAT

Essa é a parte que é mais trabalhosa e irá exigir muito mais tempo de você (mas não é difícil). Mas, basicamente, é preciso fazer alterações apenas na pasta images. Aqui o "céu é uma criança", você poderá alterar todas as imagens da pasta de acordo com o que quiser. Eu não quis inventar muita moda e modifiquei apenas a parte superior e o footer da janela do chat.

Na personalização do chat eu não modifiquei o nome dos arquivos, apenas alterei o que queria e salvava com o mesmo nome (inclusive a extensão).

No meu exemplo eu alterei:

- carrier_header.gif (imagem com a atendente)

- carrier_logo.gif (logo que é mostrada no chat, do lado esquerdo da antendente)

- chat_bg_navigation.gif (background do menu do chat)

- chat_bg_navigation_left.gif (divisão esquerda dos ícones)

- chat_bg_navigation_right.gif (divisão direita dos ícones

- chat_bg_navigation_dev.gif (separador do ícones)

- chat_bg_footer.gif (background do footer onde fica escrito Powered by...)

Agora, vem algumas dicas que podem te ajudar:

- Icon Finder (site de pesquisa de ícones)

- Firebug (ferramenta para webmaster, para verificar código fonte, css e muito mais)

- Site do LiveZilla http://www.livezilla.net

Bom, é isso, eu fiz algumas explicações, mas com isso você poderá fazer personalizações mais complexas e melhores. Não é uma coisa difícil, pois vejam o meu exemplo, fiz isso ai de primeira e acho que não ficou tão ruim. Mas é um trabalho que exige um pouco de paciência.

Fiz o tutorial exclusivamente aqui pro fórum e não peguei nada de outro lugar, apenas fui estudando o código fonte dos locais que quis modificar.

No próximo mês vocês poderão visualizar o chat funcionando no site:

www.lojadeprimeira.com.br

Muito obrigado a todos e qualquer dúvida ou comentário é só postar! A ideia é só ajudar :D

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

×
×
  • Criar Novo...

Informação Importante

Concorda com os nossos termos?

  I accept