CSS Personalizado para o Centro de Atendimento ao Cliente

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.

  1. Clique com o botão direito do mouse no texto do formulário de registro e clique em inspecionar;
  2. Você verá a guia Estilos aberta, contendo o código da fonte e a cor da fonte.

DICA - Para garantir que você esteja alterando o código correto, passe o mouse sobre o código, o que você estiver tentando editar será destacado, o que significa que você poderá ver o que está prestes a configurar.

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.


Este artigo foi útil?