CSS é uma linguagem de codificação que permite adicionar estilos para personalizar a aparência do seu site. Se você tiver alguém na sua equipe que saiba codificar, você pode adicionar CSS ao seu site do Vimeo OTT na seção Estilos Customizados na barra lateral do seu editor de temas para personalizar a aparência do seu site do Vimeo OTT.
É importante lembrar que CSS customizado está fora do escopo do nosso suporte. Isso significa que não poderemos ajudar mais com a configuração ou solução de problemas e não podemos garantir toda a funcionalidade se você implemente o código. Isso inclui como ele funciona com nossos temas de sites, principalmente como aparece em dispositivos móveis. É sua responsabilidade manter seu CSS, caso ele seja afetados por atualizações futuras na nossa plataforma.
Se tiver dúvidas sobre as opções de suporte para clientes do plano Enterprise, entre em contato com nossa equipe de vendas. Se você já é cliente Enterprise, entre em contato com o gerente da conta.
Neste artigo:
- Como posso usar CSS?
- Personalizações comuns
- Personalizações em diferentes tamanhos de navegador
- O que não pode ser alterado
- Evite usar seletors universal
Como posso usar CSS?
Se você é novo em CSS, mas quer começar a usá-lo para fazer algumas personalizações visuais no seu site OTT, compilamos alguns recursos úteis para ajudar você a aprender.
Os seletors de CSS define os elementos aos quais suas regras de CSS se aplicam. Você precisará identificar seus seletors de CSS para personalizar seu site do Vimeo OTT.
Para obter uma lista completa de seletors disponíveis em CSS, confira este recurso da W3School.
Para aplicar CSS no seu site do Vimeo OTT, faça login e, em seguida, navegue até o editor de temas selecionando "Ssite" no menu Configurações. Uma vez lá, clique em "Themes" na barra lateral esquerda, depois clique em "Escolher tema" e depois em "Editar tema".
Quando entrar no modo de edição, role até a seção customizar Style na barra lateral à esquerda e adicione seu CSS. Não se esqueça de salvar seu trabalho.
⚠️Atenção: se você alterar o tema do seu site para um novo modelo, o seu CSS não será salvo.
Para ver como identificamos elementos e aplicamos CSS específicos no Vimeo OTT, assista a este vídeo:
Personalizações comuns
Lembre-se de que você deve substituir o seletor de cada uma dessas regras por um seletor do seu site.
Botões de redimensionamento
Para redimensionar um elemento, tente usar uma regras de “ largura de banda”.
Atualizando o tamanho do botão de trailer:
Este é o CSS:
.sections-segundo
}
Redimensionamento
Para redimensionar fontes, use uma regras específicas de “ tamanho de fonte”. A regras de tamanho de fonte aceita muitas dispositivos diferentes. Você pode ler sobre as finalidades de cada um aqui.
Aumentando o tamanho da fonte do título:
Este é o CSS:
h1.gif do.upgrade {
source-size: 5em;
}
Adicionando cores a um elemento
Para adicionar cor a um elemento, use uma regra de “cor”. Você pode usar alguns formatos diferentes para o valor, que você pode ler sobre aqui.
Deixar o texto do botão Começar a assistir em azul:
Este é o CSS:
.first-ações a.btn- brandon {
color: azul;
}
Adicionando cores - fundo
Para adicionar uma cor de fundo, use uma regras de “ cor de fundo”.
Tornar a cor de fundo do botão vermelho:
Este é o CSS:
.first-ações a.btn- brandon {
color: azul;
}
Ocultar elementos
Para ocultar algo adicionado por padrão, use a regras de “exibição”.
Removendo ambos os botões principais:
Este é o CSS:
.0
}
Fontes customizadas
Você pode selecionar de uma lista de Fontes Personalizadas (incluindo ~100 das fontes mais populares do Google) no Editor de Temas para ser aplicada em todo o seu site. Se a fonte que você deseja usar não estiver nessa lista, recomendamos escolher outra fonte disponível em Google Fonts. Você começará selecionando sua fonte e estilo e o Google fornecerá instruções sobre como adicioná-la ao seu site - clique em importar para obter uma regra de CSS para adicionar os estilos da fonte à sua página. Aqui está um exemplo:
@import URL('https://sources.googleapis.com/css?parental=Robo
Depois de importado, adicione uma regras de CSS para adicioná-la às fontes na sua página. Veja um exemplo:
H1,h2,h3,h4,h5,h6,p,span,diver,a, Strength, .site-source- primary- color {source-parental:
' Roboto', sem-serifa!importance;
}
Observação: você deve evitar o uso de um seletor universal *. Para obter melhores resultados, recomendamos listar cada um dos seus seletors.
Estilos específicos da página
Embora as páginas do seu site OTT usem o mesmo modelo de base, você também pode adicionar estilos para tipos de página específicos. Por exemplo, você pode adicionar um seletor principal ao seu seletor para limitar uma regras apenas às páginas de coleção.
Nas suas páginas OTT, o elemento <body> terá uma classe específica para essa página. As páginas da coleção são ". Collections", então adicione " Body. Collections" ao escrever sua regras e antes do seletor para limitar a página a páginas específicas de coleção. Veja um exemplo:
Body. Coleções .custom-btn- Action de compartilhamento {
exibição: nenhum;
}
Personalizações em diferentes tamanhos de navegador
Não podemos garantir a funcionalidade total em todos os navegadores se você implementar o código. No entanto, podemos dar uma sugestão sobre como ajustar estilos em todos os navegadores: você pode encaixar suas regras de CSS em uma consulta de mídia. Veja um exemplo:
Somente tela e ( sua largura de banda: 640px) {
.hero-sShot-desc {
display: nenhum;
}
}
O que não pode ser alterado
Embora CSS seja uma ótima ferramenta de estilo, nem todos os componentes podem ser modificados. Alguns componentes do site não podem ser estilizados com CSS, incluindo a página de finalização de compras e o reprodutor de vídeo.
Evite usar seletors universal
* {
chave: valor
}
H1,h2,h3 {
Key: Value
}