Ir para conteúdo
View in the app

A better way to browse. Learn more.
Portal do Host

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[Tutorial] Personalização do LiveZilla

Por Ruan
em Hospedagem compartilhada

Featured Replies

Postado

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


Postado
  • Autor

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





Postado

Ruan parabens. muito bacana.

Editado por RnxHost
Acerto no Nome do Ruan


Postado
  • Autor

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

Editado por Ruan


Postado
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


Postado
  • Autor
Ops.

Desculpe, ja acertei la no post

Vlw, qndo registrei nem imaginei que teria outro usuário com o nick tão parecido hehe


Postado

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!!!


Visitante
Este tópico está impedido de receber novos posts.
https://portaldohost.com.br/topic/3191-tutorial-personaliza%C3%A7%C3%A3o-do-livezilla/
Ir para a lista de tópicos

Quem Está Navegando 0

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

Informação Importante

Concorda com os nossos termos?

I accept

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.