Ruan Posted April 23, 2011 Share Posted April 23, 2011 (edited) 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: 2) Personalização do chat (local do atendimento); Resultado final: 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] Edited April 23, 2011 by Ruan Link to comment Share on other sites More sharing options...
Ruan Posted April 23, 2011 Author Share Posted April 23, 2011 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 to comment Share on other sites More sharing options...
Anderson Brito Posted April 23, 2011 Share Posted April 23, 2011 Valeu por compartilhar o tuto ai.. Link to comment Share on other sites More sharing options...
Marco Antonio Posted April 23, 2011 Share Posted April 23, 2011 Ruan, parabens pelo tutorial, muito bem explicado e facil de entender, Obrigado por compartilhar Link to comment Share on other sites More sharing options...
sergionagase Posted April 23, 2011 Share Posted April 23, 2011 Muito bom, obrigado por compartilhar! Link to comment Share on other sites More sharing options...
RNXTI Posted April 23, 2011 Share Posted April 23, 2011 (edited) Ruan parabens. muito bacana. Edited April 23, 2011 by RnxHost Acerto no Nome do Ruan Link to comment Share on other sites More sharing options...
Ruan Posted April 23, 2011 Author Share Posted April 23, 2011 (edited) Que bom que gostaram pessoal :D Depois com mais tempo quero colocar mais algumas imagens ao tutorial. Não sou o Rhuan e sim Ruan :D Edited April 24, 2011 by Ruan Link to comment Share on other sites More sharing options...
RNXTI Posted April 23, 2011 Share Posted April 23, 2011 Que bom que gostaram pessoal :D Depois com mais tempo quero colocar mais algumas imagens ao tutorial. Não sou o Rhuan e sim Ruan :D Ops. Desculpe, ja acertei la no post Link to comment Share on other sites More sharing options...
Ruan Posted April 24, 2011 Author Share Posted April 24, 2011 Ops. Desculpe, ja acertei la no post Vlw, qndo registrei nem imaginei que teria outro usuário com o nick tão parecido hehe Link to comment Share on other sites More sharing options...
BRANIX Posted April 24, 2011 Share Posted April 24, 2011 Parabéns!!! Muito obrigado por compartilhar, é de grande utilidade!!! Eu ainda não comecei minha personalização por falta de tempo para ler, mas dessa forma fica mais fácil!!! Link to comment Share on other sites More sharing options...
Recommended Posts