Personalizar a interface do Apache CloudStack é uma das maneiras mais eficazes de reforçar a identidade visual. Ao adaptar o layout, as cores e os elementos visuais, é possível transformar a experiência do usuário em algo alinhado ao estilo e à proposta da sua marca. Além disso, a personalização melhora a usabilidade, transmite profissionalismo e fortalece a confiança do cliente no seu serviço.

O CloudStack oferece diversas formas de customização, que vão desde ajustes simples de logo e rodapé até a criação de temas completos com APIs e CSS. Dessa forma, a personalização garante ambientes alinhados à identidade visual escolhida, preservando estabilidade e desempenho.

O ponto de partida da personalização

Toda personalização começa no diretório /usr/share/cloudstack-management/webapp/, onde ficam os principais arquivos de interface do Apache CloudStack. Entre eles, o arquivo config.json centraliza as configurações visuais.

Por meio dele, é possível alterar o título da página, substituir o logo, ajustar o rodapé da aplicação e definir o banner exibido no topo da interface. Com essas modificações, o sistema já passa a refletir a identidade visual desejada.

{

  “appTitle”: “SC Clouds”,

  “footer”: “Bem-vindo(a) ao portal com aspectos personalizados”,

  “logo”: “assets/logo.svg”,

  “banner”: “assets/banner.svg”

}

Após aplicar as alterações, é importante limpar o cache do navegador e, se necessário, reiniciar o serviço de management, para garantir que a nova interface seja carregada corretamente. Esse simples passo evita inconsistências ao validar o resultado visual.

Personalização com o sistema de temas (GUI Themes)

As versões mais recentes do Apache CloudStack tornaram o processo de customização ainda mais flexível com o recurso GUI Themes. Esse sistema permite criar, atualizar, listar e remover temas por meio de APIs específicas, como createGuiTheme, updateGuiTheme, listGuiThemes e removeGuiTheme.

Com ele, é possível definir um tema exclusivo para cada conta, domínio ou internet common name, o que facilita o gerenciamento visual em ambientes multiusuário e modelos White Label.

Além disso, a aplicação dos temas pode ser automatizada, garantindo consistência entre diferentes ambientes e versões do sistema.

Aplicando estilos com CSS e variáveis personalizadas com Apache CloudStack

O Apache CloudStack permite incluir regras CSS diretamente no campo css de um tema. Essa funcionalidade oferece liberdade total para ajustar cores, botões, bordas e o comportamento visual de elementos como o menu lateral e o cabeçalho. Uma forma prática de organizar o código é utilizar a regra @import, que carrega um arquivo externo de estilos hospedado em seu servidor:

@import url(“https://seuservidor.com.br/theme.css”);

O CloudStack interpreta o @import diretamente no campo css, inclusive com suporte a media queries, o que facilita o uso de folhas de estilo centralizadas. Dentro desse arquivo, é recomendado usar variáveis CSS para manter a consistência das cores e simplificar futuras alterações:

:root {

  –main-primary: #4b6d24;

  –main-secondary: #970826;

  –main-gray: #f0f0f0;

}

Nesse sentido, as variáveis podem ser aplicadas em diversos elementos da interface, garantindo uma identidade visual coerente e moderna em todo o ambiente CloudStack.

Estilizando a página de login, o header e a sidebar

A página de login é o primeiro contato do usuário com a sua nuvem, portanto, merece atenção especial. Com CSS, é possível substituir o logo padrão, aplicar um banner personalizado e ajustar as cores de fundo. As variáveis –main-image-login, –main-linear-cora e –main-linear-corb controlam a imagem e o gradiente do plano de fundo, permitindo criar uma tela inicial coerente com a identidade visual da marca.

O header e a sidebar também podem ser totalmente personalizados. Dessa forma, é possível aplicar gradientes, ajustar o comportamento de botões e ícones, além de inserir o logo da marca tanto na versão expandida quanto na versão colapsada do menu lateral, garantindo um visual uniforme em toda a interface.

Por exemplo:

.layout .ant-layout-header {

  background: linear-gradient(var(–main-linear-cora), var(–main-linear-corb)) !important;

}

Assim, com poucos ajustes, a interface se transforma em um painel visualmente integrado à sua marca, mantendo a experiência de uso fluida e agradável.

Personalizando o dashboard e os gráficos no Apache CloudStack

No dashboard do CloudStack, onde são exibidas métricas e indicadores, também é possível aplicar estilos personalizados. As cores dos cards de status, como Running VMs e Stopped VMs, podem ser ajustadas, assim como o preenchimento dos gráficos no painel.

Dessa forma, o usage dashboard ganha clareza e um aspecto mais profissional, reforçando a identidade visual aplicada ao restante da interface.

.usage-dashboard .ant-card:nth-child(1) {

  background-color: var(–main-verde) !important;

}

.usage-dashboard .ant-card:nth-child(2) {

  background-color: var(–main-vermelho) !important;

}

Portanto, essas modificações deixam a experiência de monitoramento mais intuitiva e reforçam a estética visual da marca.

Configurando links e ícones personalizados

Outra possibilidade interessante é a criação de links externos diretamente na interface, configurados no arquivo config.json.

Então, as propriedades externalLinks e externalLinksIcon permitem adicionar atalhos e ícones que direcionam o usuário para o site institucional, o portal de suporte ou a documentação.

“externalLinks”: [

  {

    “title”: “CloudStack Docs”,

    “link”: “https://cloudstack.apache.org”,

    “icon”: “assets/icon-docs.svg”

  }

],

“externalLinksIcon”: “assets/icon-default.svg”

O campo icon dentro de externalLinks é opcional. Nesse sentido, quando omitido, o sistema utiliza o ícone padrão definido em externalLinksIcon. Além disso, esses botões aparecem no topo da interface e facilitam o acesso a recursos importantes, reforçando a identidade visual e a utilidade do painel.

Boas práticas de customização com Apache CloudStack

Antes de aplicar qualquer mudança, faça backup dos arquivos originais e registre cada alteração. Sempre que possível, utilize um repositório de versionamento para manter o histórico das customizações. Além disso, preserve um padrão visual coerente, evite exageros de cor e teste a legibilidade em diferentes resoluções. Por fim, em ambientes com múltiplos Management Servers, replique as alterações em todos eles para garantir a consistência da interface.

Assim, essas práticas mantêm a personalização estável, escalável e simples de administrar no longo prazo.

Conclusão: transforme sua interface em um diferencial de marca com Apache CloudStack

A personalização do Apache CloudStack vai muito além da estética e representa a maturidade e o posicionamento da marca no mercado de cloud. Portanto, ao aplicar o sistema de temas, as variáveis CSS e as APIs de customização, é possível criar uma experiência visual única, que traduz o valor da marca e melhora a percepção do usuário sobre a plataforma.

A SC Clouds ajuda a implementar essas customizações com segurança, performance e consistência. Então, fale com nossos especialistas e descubra como elevar sua infraestrutura CloudStack ao nível da sua marca.