CSS es un lenguaje de codificación que le permite agregar estilos para personalizar el aspecto de su sitio web. Si tiene a alguien en su equipo que sea experto en programación, puede agregar CSS a su sitio web de Vimeo OTT en la sección Estilos personalizados de la barra lateral de su editor de temas para personalizar el aspecto y la sensación de su sitio de Vimeo OTT.
Es importante tener en cuenta que el CSS personalizado no incluye nuestra asistencia. Esto significa que no podremos ayudarle con la configuración o la resolución de problemas, y no podemos garantizar su plena funcionalidad si implementa el código. Esto incluye su funcionamiento con los temas de nuestro sitio web, en particular, cómo aparece en los dispositivos móviles. Es su responsabilidad mantener su CSS en buen estado, en caso de que se vea afectado por futuras actualizaciones de nuestra plataforma.
Si tiene preguntas sobre las opciones de asistencia para los clientes de Enterprise, póngase en contacto con nuestro equipo de Ventas. Si ya es cliente de Enterprise, póngase en contacto con su gerente de la cuenta.
En este artículo:
- ¿Cómo uso CSS?
- Personalizaciones comunes
- Personalizaciones en navegadores de diferentes tamaños
- Qué no se puede cambiar
- Evite el uso de selectores universales
¿Cómo uso CSS?
Si es la primera vez que usa CSS, pero quiere empezar a utilizarlo para hacer algunas personalizaciones visuales en su sitio de OTT, hemos recopilado algunos recursos útiles para ayudarle a aprender.
Los selectores de CSS definen los elementos a los que se aplican sus reglas de CSS. Tendrá que identificar sus selectores de CSS para personalizar su sitio de Vimeo OTT.
Para obtener una lista completa de los selectores disponibles en CSS, consulte este recurso de W3School.
Para aplicar CSS a su sitio web de Vimeo OTT, inicie sesión y navegue hasta el editor de temas seleccionando "Sitio" en el menú Configuración. Una vez allí, haga clic en "Temas" en la barra lateral izquierda, luego en "Elegir tema" y luego en "Editar tema".
Una vez que esté en el modo de edición, desplácese hasta la sección Estilos personalizados en la barra lateral de la izquierda y agregue su CSS. No olvide guardar su trabajo.
⚠️Nota: Si cambia el tema de su sitio web a una nueva plantilla, su CSS no se guardará.
Para ver cómo identificamos los elementos y aplicamos CSS específico en Vimeo OTT, mire este video:
Personalizaciones comunes
Tenga en cuenta que debe reemplazar el selector de cada una de estas reglas con un selector de su sitio.
Botones de cambio de tamaño
Para cambiar el tamaño de un elemento, pruebe a utilizar una regla de "ancho".
Actualizando el tamaño del botón del tráiler:
Este es el CSS:
.secundaria-acciones a.btn-transparent {
ancho: 150%;
}
Cambiar el tamaño de las fuentes
Para cambiar el tamaño de las fuentes, use una regla de “tamaño de fuente” específica de la fuente. La regla de tamaño de fuente acepta muchas unidades diferentes. Puede leer sobre los propósitos de cada una aquí.
Aumentando el tamaño de la fuente del título:
Este es el CSS:
h1.gigantic.uppercase {
fuente-tamaño: 5em;
}
Agregar colores a un elemento
Para agregar color a un elemento, use una regla de “color”. Puede utilizar algunos formatos diferentes para el valor, sobre los que puede leer aquí.
Hacer que el texto del botón Empezar a ver sea azul:
Este es el CSS:
.primary-actions a.btn-brandon {
color: blue;
}
Adición de colores - fondo
Para agregar un color de fondo, use una regla de color de fondo.
Haciendo que el fondo del botón sea de color rojo:
Este es el CSS:
.primary-actions a.btn-brandon {
color: blue;
}
Ocultar elementos
De forma predeterminada, para ocultar algo que se agregue, use una regla de “visualización”.
Eliminando los dos botones principales:
Este es el CSS:
.row-actions {
display: ninguno;
}
Fuentes personalizadas
Puede seleccionar de una lista de fuentes personalizadas (incluidas ~100 de las fuentes más populares de Google) en el editor de temas para aplicarlas en su sitio. Si la fuente que desea utilizar no está en la lista, le recomendamos que elija otra fuente disponible en Google Fonts. Comenzará por seleccionar la fuente y el estilo, y Google le dará instrucciones sobre cómo agregarlos a su sitio; haga clic en importar para obtener una regla CSS que le permita agregar los estilos de la fuente a su página. Aquí tiene un ejemplo:
@import url('https://fonts.googleapis.com/css?Family=Roboto&display=swap');
Una vez importada, agregue una regla CSS para agregarla a las fuentes de su página. Aquí tiene un ejemplo:
h1,h2,h3,h4,h5,h6,p,span,div,a,strong, .site-font-primary-color {
font-family: 'Roboto', sans-serif!important;
}
Nota: se debe evitar el uso de un selector universal (*). Para obtener mejores resultados, recomendamos enumerar cada uno de sus selectores.
Estilos específicos de página
Aunque las páginas de su sitio de OTT utilizarán la misma plantilla base, también puede agregar estilos para tipos de páginas específicos. Por ejemplo, puede agregar un selector principal a su selector para limitar una regla a las páginas de colección exclusivamente.
En sus páginas de OTT, el elemento <body> tendrá una clase específica para esa página. Las páginas de colección son “.colecciones”, así que agregue “cuerpo.colecciones” cuando escriba su regla y antes del selector para limitarla a páginas de colección específicas. Aquí tiene un ejemplo:
cuerpo.colecciones .personalizar-btn-action-share {
pantalla: ninguna;
}
Personalizaciones en navegadores de diferentes tamaños
No podemos garantizar la funcionalidad completa en todos los lados del navegador si implementa el código. Sin embargo, podemos ofrecerle una sugerencia sobre cómo ajustar los estilos en todos los navegadores: puede envolver sus reglas CSS en una consulta de medios. Aquí tiene un ejemplo:
@media solo pantalla y (max-width: 640px) {
.hero-short-desc {
display: ninguno;
}
}
Qué no se puede cambiar
Si bien CSS es una excelente herramienta para aplicar estilo, no todos los componentes se pueden modificar. Algunos componentes del sitio web no se pueden estilizar con CSS, incluidos la página de pago y el reproductor de video.
Evite el uso de selectores universales
* {
clave: valor
}
h1,h2,h3 {
clave: valor
}