CSS Personalizado para o Centro de Atendimento ao Cliente
Atualizado 14/1/21
por
Sebastian Lastra
CSS. Significa "Cascading Style Sheet" e são usados para formatar o layout das páginas da Web. Eles podem ser usados para adaptar cores, layout, fonte e outros aspectos das páginas da Web que anteriormente só podiam ser definidas no HTML de uma página.
Usando a ferramenta CSS, você pode editar suas páginas da web. CSS é uma linguagem e, portanto, é melhor utilizada pelos desenvolvedores, mas nesta FAQ mostraremos um exemplo de como você pode adicionar imagens de fundo às suas páginas da web.
Quais páginas da web posso editar?
Você pode editar as seguintes páginas da web:
- Minha conta
- Minha agenda
- Meus ingressos
- Meus formulários
- My App
- Lobby virtual
- Formulário de registro
- Formulário personalizado
- Formulário de compra
Onde posso encontrar a ferramenta CSS?
Vá para Evento > Detalhes > Editar.
Role para baixo até CSS Personalizado para o Centro de Atendimento ao Cliente e clique no botão azul.
Depois de abrir o CSS, você encontrará uma tabela contendo as páginas da web que você pode editar e a raiz dessa página.
PAGE | ROOT |
Minha conta | #myAccountWrapper |
Minha agenda | #myAgendaWrapper |
Meus ingressos | #ticketManagerWrapper |
Meus formulários | #myFormsWrapper |
Meu aplicativo | #appContent |
Virtual Lobby | #liveWrapper |
Formulário de registro | #formVue |
Formulário customizado | #customFormVue |
Comprar | #purchaseVue |
Abaixo da tabela de páginas e suas raízes, você terá a caixa CSS personalizado, onde poderá começar a codificar as alterações. Quando você deseja editar uma parte específica da página da web, sempre comece inserindo a caixa de texto ROOT na caixa de texto.
Insira uma imagem de fundo no formulário de registro
Neste exemplo, adicionaremos uma imagem ao plano de fundo do formulário de registro.
Vá para a ferramenta CSS personalizado e insira a raiz. A raiz do formulário de registro é #formVue.
Pressione a barra de espaço. Em seguida, copie e cole este código:
#formVue .formContent {
background-image: url("link do endereço da imagem vai aqui");
background-size: contain;
}
Como você pode ver, é necessário adicionar um endereço de imagem. Para isso, você deve encontrar uma imagem e clicar com o botão direito do mouse e escolher "copiar endereço de imagem e adicioná-lo ao código da seguinte forma:
#formVue .formContent {
background-image: url("https://media.giphy.com/media/6wpHEQNjkd74Q/giphy.gif");
background-size: 1400px 1200px;
}
A caixa CSS personalizado agora deve ficar assim:
Adicionar planos de fundo a outras páginas
Aqui estão outras páginas em que você também pode adicionar uma imagem de plano de fundo.
Você pode copiar e colar o código abaixo no CSS, mas lembre-se de inserir o link do endereço da imagem.
Você também pode alterar o tamanho do plano de fundo "px" para corresponder à sua imagem.
Minha Conta
#myAccountWrapper #myAccountContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Minha Agenda
#myAgendaWrapper .v2-bgContent {
background-image: url("endereço web - link- da imagem aqui");
background size: 1400px 1200px;
}
Meu ingresso
#ticketManagerWrapper .v2-bgContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Meus formulários
#myFormsWrapper .v2-bgContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Meu Aplicativo
#appContent.v2-bgContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Virtual Lobby
#liveWrapper #liveContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Formulários customizados
#customFormVue #customFormContent {
background-image: url("endereço web - link- da imagem aqui");
background-size: 1400px 1200px;
}
Cores do plano de fundo
Para alterar as cores do plano de fundo, siga os códigos acima para cada página, porém desta vez em vez da imagem de plano de fundo e do tamanho do plano de fundo você usará a cor de plano de fundo (background-color).
Para adicionar uma cor, digite um código hexadecimal que se parece com o seguinte: #00FFFF
Ou então o nome aceito pelo CSS: Aqua.
Você pode usar seu mecanismo de pesquisa para pesquisar "códigos hexadecimais" para encontrar a cor exata que deseja usar.
Por exemplo, para alterar o plano de fundo do formulário de registro, você usará este código:
#formVue .formContent {
background-color: #00FFFF;
}
OU
#formVue .formContent {
background-color: aqua;
}
Editando outros recursos das páginas da web
Para editar outros recursos das páginas da Web, acesse a página da Web, localize o item ou itens específicos que deseja alterar, clique com o botão direito do mouse e pressione Inspecionar.
Neste exemplo, alteraremos o tamanho da fonte e a cor do formulário de registro.
- Clique com o botão direito do mouse no texto do formulário de registro e clique em inspecionar;
- Você verá a guia Estilos aberta, contendo o código da fonte e a cor da fonte.
Por exemplo, quando passo o mouse sobre o código .formcard, a fonte do formulário é destacada:
Copie e cole o código na caixa CSS personalizado na página de detalhes do evento.
Edite o tamanho da fonte e as cores conforme sua preferência.
