O que você encontra aqui:

Onde inserir os códigos CSS no painel

Os 5 códigos CSS mais pedidos para customizar o seu site de casamento

Dúvidas frequentes sobre personalização em CSS

Os templates do iCasei foram criados para serem lindos, práticos e responsivos. Mas sabemos o quanto é importante dar aquele toque especial e deixar o layout com a verdadeira essência de vocês. Se você quer ter mais liberdade para reposicionar elementos, alterar cores e trocar imagens do seu site de casamento, a nossa aba de CSS é o lugar certo.

Essa funcionalidade permite realizar edições avançadas no visual. Para facilitar a sua jornada e garantir que tudo fique perfeito para o Grande Dia, separamos os códigos das customizações mais pedidas pelos casais. É só copiar, colar e ajustar as informações com os seus links e preferências.

Importante: Evite usar "classes dinâmicas" se você for inspecionar a página por conta própria. Elas são aqueles códigos que terminam com letras e números aleatórios (exemplo: .sc-bdVaJa). Como o nosso sistema é atualizado constantemente, essas letras mudam sozinhas e vão desconfigurar a sua personalização. Para garantir que seu site não quebre, utilize apenas os códigos fixos (seletores) listados abaixo.

Onde inserir os códigos CSS no painel

Se você ainda não está na tela de edição, siga o caminho abaixo para aplicar as suas customizações:

1. Acesse o seu painel de controle.
2. No menu lateral esquerdo, clique em Site.
3. Em seguida, ainda no menu esquerdo, selecione Layout do site.
4. Role a tela até a seção "Avançado" e clique em Personalizar CSS.
5. Dentro do campo de texto cinza (editável), apague a indicação padrão /* CUSTOM_CSS */ e cole um dos códigos que listamos na próxima seção.

Os 5 códigos CSS mais pedidos para customizar o seu site de casamento

Como trocar o monograma do seu site

Para usar um brasão ou monograma exclusivo, copie o código abaixo e cole no seu painel. Lembre-se de substituir o link de exemplo (https://imgur.com/...) pelo link da imagem do seu próprio monograma.

.header__couple-name {
font-size: 0 !important;
width: 60px !important;
height: 60px !important;
background-image: url(<https://imgur.com/BpHwJqv.png)> !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;

Dica: Caso vocês queiram que o monograma mude de cor ou de formato ao rolar a página (antes e depois do scroll), utilize esta variação do código, inserindo os dois links de imagem diferentes:

.header__couple-name {
font-size: 0 !important;
width: 60px !important;
height: 60px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
background-image: url(<https://imgur.com/1UKXcyV.png)>
}
.header--attached-to-hero .header__couple-name {
background-image: url(<https://imgur.com/NyDwoTe.png)> !important;
}

Como trocar o ícone do divisor decorativo

Quer substituir o divisor padrão do template por um ícone com o estilo da celebração? Use o código abaixo e, novamente, troque a URL pela imagem que você deseja aplicar:

.decarative-divider__icon {
opacity: 0 !important;
}
.decorative-divider {
background: url(<https://imgur.com/4Jj67hz.png)> no-repeat;
background-size: contain !important;
background-position: center !important;
}

Como alterar a cor do menu de navegação

Para adaptar o menu à paleta de cores do seu casamento, copie a estrutura a seguir. Você pode trocar as palavras white (branco) ou black (preto) pelo nome da cor em inglês que preferir, ou pelo código HEX (exemplo: #FF5733):

@media (min-width: 769px) {
.header--attached-to-hero .menu__wrapper .menu-dropdown__title__text,.header--attached-to-hero .menu__wrapper svg *{
fill: white !important;
color: white !important;
}
.message-dropdown__item {
color: black !important;
}
}

Como editar a proporção das fotos do site

Dependendo do formato da imagem que você subiu, ela pode cortar um detalhe importante. Para ajustar como a imagem se comporta no espaço, aplique as regras de tamanho de fundo ou de ajuste de objeto, escolhendo entre contain (para mostrar a imagem inteira) ou cover (para preencher todo o espaço):

background-size: contain/cover
ou
object-size: contain/cover

O iCasei pode ser adaptado para qualquer celebração

Celebrar momentos especiais é o que nos move! Toda a estrutura do iCasei e as ferramentas de personalização avançada que você acabou de ver foram pensadas para dar vida a qualquer tipo de evento.

Se você está organizando a comemoração das suas bodas, um chá de bebê, festa de 15 anos (debutante), formaturas ou um aniversário especial, você tem total liberdade para adaptar os textos, as imagens e o layout. Além de uma página linda com o estilo da sua celebração, você aproveita todos os recursos práticos, como a lista de presentes convertida em dinheiro e a gestão de confirmação de presença (RSVP).

Dúvidas frequentes sobre personalização em CSS

1- O que é CSS e como ele funciona no site de casamento?

O CSS (Cascading Style Sheets) é uma linguagem de estilo usada para definir a aparência de uma página na internet. No iCasei, oferecemos um campo avançado onde você pode inserir códigos CSS para sobrepor as regras originais do template, alterando cores, fontes, tamanhos e posições de elementos de forma customizada.

2- As personalizações em CSS também funcionam pelo celular?

Sim! Os códigos aplicados no painel de controle refletirão tanto na versão web (computador) quanto na versão mobile (celular) do seu site de casamento. Sempre recomendamos acessar o seu site pelo celular após salvar o código para confirmar se o resultado visual ficou do jeito que vocês imaginaram.

3- O suporte do iCasei cria códigos CSS personalizados para o meu site?

A funcionalidade "Personalizar CSS" é um recurso de uso livre (self-service) destinado a casais que possuem familiaridade com o tema ou queiram experimentar os códigos deste guia. Nosso time de atendimento está sempre pronto para ajudar com as configurações do painel, mas não realizamos a criação, edição ou manutenção de códigos CSS exclusivos por demanda.

4- Posso usar códigos CSS que encontrei em tutoriais de outros sites?

Nós recomendamos cautela. Como cada plataforma possui uma arquitetura de código única, códigos copiados de fóruns genéricos ou de outros sistemas podem não funcionar no iCasei ou causar conflitos de responsividade. Prefira as variações validadas pelo nosso time de tecnologia.

5- Meu código CSS parou de funcionar ou quebrou o layout. O que fazer?

Isso geralmente acontece quando são utilizadas "classes dinâmicas" (códigos gerados automaticamente que terminam com letras embaralhadas, como .sc-xpto123). Como o iCasei recebe atualizações constantes de melhoria, o nome dessas classes muda e o seu código perde a referência. Para corrigir, apague o código antigo e utilize apenas as classes fixas e oficiais que compartilhamos neste artigo.