Como Recriar Temas para o Roundcube

O Roundcube é um webmail bastante popular e personalizável. Se você deseja dar uma cara nova para a interface, este guia completo ensina como recriar temas do zero ou personalizar os existentes.

Pré-requisitos

  • Linux (Debian ou outra distribuição)
  • Servidor com Roundcube instalado
  • Acesso root ou sudo
  • Conhecimentos básicos em HTML, CSS e JS

Estrutura dos Temas

Os temas no Roundcube ficam armazenados em:

/usr/share/roundcube/skins/

Cada tema tem sua própria pasta, por exemplo:

  • elastic (tema padrão)
  • larry (tema antigo)

Criando um Novo Tema

  1. Copie um Tema Existente Para facilitar o desenvolvimento, copie o tema padrão:
cp -r /usr/share/roundcube/skins/elastic /usr/share/roundcube/skins/meutema
  1. Editando os Arquivos A estrutura básica é:
  • styles/: Arquivos CSS
  • templates/: Templates HTML com a engine Smarty
  • images/: Ícones e imagens
  • js/: Scripts personalizados

Exemplo para alterar o logo: Substitua o arquivo em:

skins/meutema/images/logo.svg
  1. Editando o CSS Personalize as cores e fontes em:
skins/meutema/styles/styles.css

Exemplo:

body {
    background: #222;
    color: #fff;
}

Ativando o Novo Tema

Edite o arquivo de configuração:

vi /etc/roundcube/config.inc.php

Adicione ou edite a linha:

$config['skin'] = 'meutema';

Limpando o Cache

Após a alteração, limpe o cache para garantir que o Roundcube carregue o novo tema:

rm -rf /var/lib/roundcube/temp/*
rm -rf /var/lib/roundcube/cache/*

Testando o Tema

Acesse o webmail e veja o resultado. Caso não apareçam as mudanças, revise permissões de arquivos e cache do navegador.

Dica Extra: Ícones Personalizados

Se quiser mudar ícones, edite os arquivos dentro de:

skins/meutema/images/

Formatos recomendados: SVG ou PNG.


Com essas etapas, você consegue criar temas personalizados e deixar o Roundcube com a cara que quiser. Se precisar de algo mais avançado, como dark mode ou temas responsivos, é só pedir!

Rolar para cima