Alterando a aparência de uma agenda
A aparência visual da agenda e a interface geral do usuário podem ser configuradas separadamente. Você pode alterar a paleta de cores da agenda selecionando outro tema de cores ou escolher sua própria cor para cada um dos diferentes elementos do calendário. No nível da conta, você pode fazer algo semelhante com as cores da interface. A aparência do cabeçalho também é configurada no nível da conta. As instruções abaixo mostram onde fazer essas alterações:
- Modificar as cores do calendário
- Alterar a cor das entradas da agenda
- Ajustar o indicador de recurso (somente Agendas de Recurso)
- Indicar a propriedade de um recurso ou serviço
- Definir a cor das células vazias
- Modificar o tamanho base da fonte
- Alterar o esquema de cores do painel
- Alterar o logotipo
- Definir um favicon
Configurações de aparência da agenda
Em Configurar > Layout > Cores do layout você pode configurar a aparência visual da sua agenda. As opções disponíveis podem variar um pouco dependendo do tipo de agenda: Capacidade, Recurso ou Serviço.
- aparência no nível da agenda para o calendário de reservas em si
- aparência no nível da conta para a interface ao redor, o logotipo e os elementos do cabeçalho
Cores do calendário
Você pode alterar as cores da agenda selecionando um dos sete temas de cores, otimizados para visibilidade e legibilidade. Como alternativa, pode alterar manualmente a cor de um ou mais elementos do calendário. Quando você clica na amostra de cor à direita da descrição do elemento, um seletor de cores aparece e permite escolher uma cor ou inserir um código RGB hexadecimal de seis dígitos. Todas as alterações são refletidas imediatamente na prévia do calendário à direita. No entanto, elas só são aplicadas à agenda real depois que forem salvas explicitamente.
Cor das entradas da agenda
A cor de uma entrada da agenda, isto é, um horário em uma Agenda de Capacidade ou um compromisso em uma Agenda de Recurso, é definida independentemente do tema de cores da agenda. Quando uma agenda tem vários recursos ou serviços, cada um deles pode receber sua própria cor correspondente. Há 15 cores predefinidas, mas você pode selecionar uma cor personalizada em uma roda de cores clicando no botão de opção mais à direita, marcado com um ícone de arco-íris. Em uma Agenda de Capacidade, você também pode escolher um padrão para aplicar a um horário, indicando quais horários estão com a capacidade preenchida.
Indicador de recurso (somente Agenda de Recurso)
No caso de uma agenda com vários recursos, você pode optar por mostrar uma legenda de cores acima da agenda. Esse seletor de recursos pode ser usado para filtrar a agenda e mostrar apenas as reservas daquele recurso específico. Em vez dessa legenda de cores, você pode escolher um menu suspenso ou não exibir seletor algum. Além disso, você pode decidir mostrar uma legenda de cores também no cabeçalho do calendário.
Indicador de propriedade
Em uma Agenda de Recurso e em uma Agenda de Serviço, todas as reservas do usuário atualmente logado recebem um padrão distinto sobreposto. Isso permite que a pessoa identifique rapidamente suas próprias reservas entre as reservas de outros usuários. Em Agendas de Capacidade, é usado em vez disso um indicador de propriedade, como um marcador de confirmação. Você pode configurar qual padrão ou indicador será utilizado.
Cor das células vazias
Agendas de Recurso que trabalham com horários fixos de início e uma duração predeterminada mostram explicitamente os espaços vazios. Você pode definir a cor desses espaços vazios ou optar por ocultá-los.
Configurações de aparência da conta
Em Configurações de layout você pode alterar a aparência da interface geral do usuário. Isso inclui o tamanho base da fonte, as cores de vários elementos da interface e o logotipo. Essas configurações valem para toda a conta e afetam todas as agendas dentro dela. Se isso não for o que você deseja, talvez faça mais sentido criar várias contas.
Tamanho base da fonte
As configurações padrão foram otimizadas para visibilidade e legibilidade. Ainda assim, você pode optar por alterar o tamanho base da fonte. O sistema ajusta a maioria dos elementos visuais em relação ao tamanho de fonte selecionado. Em navegadores mais antigos, porém, o resultado pode não ficar perfeitamente alinhado em nível de píxel, especialmente em níveis altos de zoom. Para evitar uma aparência desorganizada, certos elementos são mantidos em tamanho fixo.
Cores
Você pode alterar as cores usadas para textos, links, títulos, tabelas e vários outros elementos da interface. Isso pode ser útil quando quiser integrar a agenda ao seu próprio site por meio de um widget e alinhar os esquemas de cores. Quando você clica em um dos retângulos coloridos, um seletor de cores aparece e permite escolher uma cor ou inserir um código RGB hexadecimal de seis dígitos. Você sempre pode voltar às cores padrão clicando no link “reiniciar” no cabeçalho.
Logotipo
Por padrão, as agendas são exibidas com o logotipo do SuperSaaS.
Você pode optar por ocultá-lo e usar seu próprio logotipo.
Para isso, é preciso fazer upload do arquivo do logotipo, que pode estar em formato .jpg, .gif, .png, .svg ou .webp e ter no máximo 70 KB.
Você também pode informar um endereço web para o qual as pessoas serão levadas ao clicar no logotipo.
As pessoas também serão enviadas para esse endereço quando saírem da agenda. Como alternativa, você pode optar por ocultar o logotipo e/ou a barra de navegação por completo.
Favicon
O favicon, ou ícone de atalho, é o pequeno gráfico que aparece na frente da URL ou na aba acima dela, dependendo do navegador. Ele também costuma aparecer no histórico do navegador e no menu de favoritos. Para transmitir confiança ao visitante de que ele realmente está em um site que pertence a você, é possível fornecer o seu próprio favicon.
Para mostrar o favicon do seu próprio site em vez do favicon do SuperSaaS, vá para Configurações de layout e clique no link Configurações avançadas na seção Aparência. Na parte inferior dessa página, você pode especificar uma URL que aponte para um favicon.
Se quiser que o favicon funcione em navegadores mais antigos, ele precisa estar em um formato especial de ícone, .ico.
Navegadores modernos aceitam favicons nos formatos .png ou .svg.
Para criar um arquivo .ico, você precisará de um editor específico para ícones ou converter uma imagem para o formato .ico usando um dos serviços gratuitos disponíveis na internet.
Se você ainda não trabalhou com favicons, talvez queira primeiro ler este artigo sobre favicon na Wikipédia.