Le CSS est un langage de codage qui vous permet d'ajouter des styles pour personnaliser l'apparence de votre site Web. Si vous avez une personne dans votre équipe qui maîtrise les codes, vous pouvez ajouter le CSS à votre site Vimeo OTT dans la section Styles personnalisés de la barre latérale de votre éditeur de thème pour personnaliser l'apparence de votre site Vimeo OTT.
Il est important de noter que le CSS personnalisé n'est pas pris en charge par notre assistance. Cela signifie que nous ne serons pas en mesure de vous aider davantage avec la configuration ou le dépannage, et nous ne pouvons pas garantir une fonctionnalité complète si vous mettez en œuvre le code. Cela suppose notamment le fonctionnement de ce service avec les thèmes de notre site Web, en particulier son affichage sur les appareils mobiles. Il est de votre responsabilité de conserver votre CSS, si les futures mises à jour de notre plateforme l'affectent.
Si vous avez des questions concernant les options de prise en charge des clients Enterprise, contactez notre équipe commerciale. Si vous êtes déjà un client Enterprise, contactez votre responsable de compte.
Sommaire de l'article:
- Comment utiliser le CSS ?
- Personnalisations courants
- Personnalisations pour différentes tailles de navigateurs
- Ce qui ne peut pas être modifié
- Évitez d'utiliser des sélecteurs universels
Comment utiliser le CSS ?
Si vous débutez en matière de CSS mais que vous souhaitez l'utiliser pour personnaliser l'image de votre site OTT, nous avons compilé des ressources utiles pour vous aider à apprendre.
Les sélecteurs CSS définissent les éléments auxquels s'appliquent vos règles CSS. Vous aurez besoin d'identifier vos sélecteurs CSS pour personnaliser votre site Vimeo OTT.
Pour une liste complète des sélecteurs disponibles en CSS, consultez cette ressource W3School.
Pour appliquer la feuille CSS à votre site Web Vimeo OTT, connectez-vous, puis accédez à votre éditeur de thème en sélectionnant « Site » dans le menu Paramètres. Ensuite, cliquez sur « Thèmes » dans la barre latérale gauche, puis cliquez sur « Choisir un thème » et enfin « Modifier le thème ».
Une fois que vous êtes en mode montage, faites défiler jusqu'à la section Styles personnalisé dans la barre latérale gauche, et ajoutez une feuille CSS. N'oubliez pas d'enregistrer votre travail.
⚠️Remarque : si vous remplacez le thème de votre site Web par un nouveau modèle, votre CSS ne sera pas enregistré.
Pour voir comment nous identifions des éléments et appliquons une feuille CSS spécifique à Vimeo OTT, regardez cette vidéo :
Personnalisations courants
Veuillez noter que vous devez remplacer le sélecteur de chacune de ces règles par un sélecteur de votre site.
Redimensionner les Boutons
Pour redimensionner un élément, essayez d'utiliser une règles de « largeur ».
Mise à jour de la taille du bouton Bande-annonce :
Voici le CSS :
.actions secondaires a.btn-transparent {
largeur : 150 % ;
}
Redimensionner les polices
Pour redimensionner les polices, utilisez une règles de « taille de police » spécifique à la police. La loi sur la taille de la police accepte de nombreuses entités différentes. Vous pouvez lire les objectifs de chaque abonnement ici.
Pour augmenter la taille de la police du titre :
Voici le CSS :
h1.gothique.uppercase {
police-taille : 5em ;
}
Ajouter des couleurs à un élément
Pour ajouter de la couleur à un élément, utilisez une règle « couleur ». Vous pouvez utiliser différents formats pour la valeur, que vous pouvez lire à propos ici.
Rendre le texte du bouton Commencer la visionnage en bleu :
Voici le CSS :
.primary-actions a.btn-Brandon {
couleur : bleu ;
}
Ajout de couleurs - arrière-plan
Pour ajouter une couleur d'arrière-plan, utilisez une règles de « couleur d'arrière-plan ».
Rendre la couleur de fond du bouton rouge :
Voici le CSS :
.primary-actions a.btn-Brandon {
couleur : bleu ;
}
Masquer des éléments
Pour masquer un élément ajouté par défaut, utilisez une règles d'affichage.
Suppression des deux boutons de héros :
Voici le CSS :
.row-actions {
affichage : aucune ;
}
Polices personnalisées
Vous pouvez choisir parmi une liste de polices personnalisées (y compris une centaine de polices Google les plus populaires) dans l'éditeur de thème et les appliquer sur votre site. Si la police que vous souhaitez utiliser ne figure pas dans cette liste, nous vous recommandons de choisir une autre police disponible dans Google Fonts. Vous commencerez par sélectionner votre police et votre style et Google vous montrera des instructions pour l'ajouter à votre site - cliquez sur Importer pour obtenir une règles CSS pour ajouter les styles de la police à votre page. Voici un exemple :
@import url('https://fonts.fonts.s.s.s.vi.
Une fois importé, ajoutez une règles CSS pour l'ajouter aux polices de votre page. Voici un exemple :
x {
famille de polices : 'Roboto', sans-serif !essentiel ;
}
Remarque : l'utilisation d'un sélecteur universel (+) est à éviter. Pour un résultat optimal, nous vous recommandons d'inscrire chacun de vos sélecteurs.
Styles spécifiques à une page
Bien que les pages de votre site OTT utiliseront le même modèle de base, vous pouvez également ajouter des styles pour des types de pages spécifiques. Par exemple, vous pouvez ajouter un sélecteur parent à votre sélecteur pour limiter une règles aux pages de collection exclusivement.
Sur vos pages OTT, l'élément <body> aura une classe spécifique à cette page. Les pages de collection sont « . collections », ajoutez donc « organisation. Voici un exemple :
category Affichage de { : aucune ;
}
Personnalisations pour différentes tailles de navigateurs
Nous ne pouvons pas garantir une fonctionnalité complète de part le navigateur si vous mettez en œuvre le code. Toutefois, nous pouvons vous faire une suggestion sur la manière d'ajuster les styles sur les navigateurs : vous pouvez résumer vos règles CSS dans une demande multimédia. Voici un exemple :
Écran @media uniquement et (Largeur maximale : 640 px) {
. Desc-principal du héros {
affichage : aucune ;
}
}
Ce qui ne peut pas être modifié
Bien que le CSS soit un excellent outil pour le style, tous les éléments ne peuvent pas être modifiés. Certains éléments du site Web ne peuvent pas être stylés avec des CSS, notamment la page de paiement et le player vidéo.
Évitez d'utiliser des sélecteurs universels
* {
clé : valeur
}
h1,h2,h3 {
clé : valeur
}