- Usar SafetyCulture
- Formación (edición)
- CSS personalizado para temas del curso
CSS personalizado para temas del curso
Obtenga más información sobre el CSS personalizado y cómo puede aplicarlo a los temas de sus cursos de formación a través de la aplicación web.
¿Por qué usar CSS personalizado para los temas del curso?
La función Formación de la plataforma SafetyCulture ofrece una amplia gama de opciones de personalización para sus materiales de formación. Puede gestionar los temas de los cursos para seleccionar esquemas de color, añadir logotipos y mucho más para crear contenidos visualmente impactantes y atractivos. Si posee conocimientos y experiencia en programación, puede personalizar los temas de sus cursos más allá de las opciones disponibles que proporcionamos con el CSS personalizado para generar una gran impresión en los miembros de su equipo.
La aplicación de CSS personalizado en la función de Formación está fuera del alcance de nuestro soporte técnico, por lo que no podemos ofrecerle orientación ni ayudar con la configuración y la resolución de problemas.
Dado que el CSS personalizado es una solución basada en código, tampoco podemos garantizar su funcionalidad ni su compatibilidad total con la función de Formación. Esto incluye la interacción con nuestro diseño adaptable y su rendimiento en todos los cursos.
Muestra de código CSS
Para ayudarle a empezar a trabajar con CSS personalizados en temas de cursos, disponemos de ejemplos de códigos que puede utilizar como referencia para dar formato a los siguientes elementos en un curso:
Fuentes y texto
Botones
Encabezados y márgenes
Contenido e interacciones específicas de los distintos tipos de diapositivas
Le recomendamos que pruebe el tema de sus cursos utilizando nuestro código CSS de muestra y los modifique para adaptarlos a la marca de su organización.
Fuentes y texto
/* FUENTES: es posible modificar las fuentes; para ello, busque una en Google que pueda importarse */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=Poppins&display=swap');
h1 {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
font-size: 28px;
font-weight: 600;
}
h2 {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
font-size: 22px;
}
h3, h4, h5 {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
}
body {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
}
Variables de raíz
:root {
--main-color: #6559FF;
--accent-color: #FFD700;
--text-color: #293745;
}
Botones
/* BOTONES */
.btn.btn {
background-color: var(--main-color);
color: #ffffff;
border-radius: 8px;
font-size: 15px;
}
.btn.btn:hover {
background-color: #564BE7;
color: #ffffff;
border-radius: 8px;
transition: 0.3s;
}
.btn.btn:active {
background-color: #564BE7;
color: #ffffff;
border-radius: 8px;
}
Margen inferior
/* MARGEN INFERIOR */
.block-h-lg {
border-bottom: 5px solid black;
border-image: linear-gradient(90deg, rgba(101,89,255,1) 33%, rgba(20,202,255,1) 33%, rgba(20,202,255,1) 65%, rgba(255,215,0,1) 65%, rgba(255,215,0,1) 100%);
border-image-slice: 30;
}
Encabezado de la lección
/* ENCABEZADO DE LA LECCIÓN */
#indicator {
color: #6559FF;
background: #ffffff;
}
#lesson-header-nav {
background-color: var(--main-color);
color: #ffffff;
font-size: 13px;
}
#lesson-header-nav-menu-btn {
border-color: #ffffff;
color: #ffffff;
}
#lesson-header-title-content {
border-bottom: 0px solid transparent;
font-family: 'Noto Sans';
font-size: 15px;
}
#slides {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
border-bottom: 0px solid;
}
.slide-footer .slide-footer-prompt-content {
font-style: shadow;
}
Diapositiva de respuesta
/* DISPOSITIVA DE RESPUESTA */
#slide-answer {
color: var(--main-color);
}
Lista expandible
/* LISTA EXPANDIBLE */
.slide-expandable-list .item.active .item-button {
background-color: #564BE7;
color: #ffffff;
}
.slide-expandable-list .btn.btn-solid {
border-radius: 3px;
}
Verdadero o falso
/* VERDADERO O FALSO */
.slide-game-true-or-false .game-statement {
background-color: var(--main-color);
color: #ffffff;
font-size: 14px;
}
Opción múltiple
/* OPCIÓN MÚLTIPLE */
.selectable.active .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.correct .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.incorrect .btn {
background-color: #3030;
color: var(--text-color);
}
Chat de opción múltiple
/* CHAT DE OPCIÓN MÚLTIPLE */
/* Burbuja de pregunta */
.quote.quote-dk {
background-color: #dbdff7;
color: var(--main-color);
}
.quote.quote-dk:after {
border-color: #dbdff7 transparent transparent;
}
/* Burbujas de elección */
.quote.quote-lt {
background-color: var(--main-color);
color: #ffffff;
}
.quote.quote-lt:after {
border-color: var(--main-color) transparent transparent;
}
/* Burbuja activa */
.quote.active {
background-color: #14caff;
color: #ffffff;
}
.quote.active:after {
border-color: #14caff transparent transparent;
}
/* Burbuja de respuesta correcta */
.slide-chat.state-complete .chat-msg.correct {
background-color: #14caff;
color: #ffffff;
}
.slide-chat.state-complete .chat-msg.correct:after {
border-color: #14caff transparent transparent;
}
Revelación
/* REVELACIÓN */
.slide-reveal .btn-reveal-title.flippable {
background: #14caff;
color: var(--text-color);
}
.slide-reveal .btn-reveal.active .btn-reveal-desc.flippable {
background: #e8faff;
color: #14caff;
}
.slide-reveal .btn-reveal-desc, .slide-reveal .btn-reveal-title {
pointer-events: none;
}
Burbuja de diálogo
/* BURBUJA DE DIÁLOGO */
/* dark */
.slide-speech-bubble .quote.pull-left.quote-dk:after {
border-color: transparent transparent transparent;
}
/* luminosa */
.slide-speech-bubble .quote.pull-left.quote-lt {
background: #f9f9f9;
border-left: 8px solid #14caff;
margin: 1.5em 10px;
padding: -5em 1px;
quotes: "\201C""\201D""\2018""\2019";
}
.slide-speech-bubble .quote.pull-left.quote-lt:before {
color: #ffd700;
content: open-quote;
font-size: 130px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
.slide-speech-bubble .quote.pull-left.quote-lt:after {
border-color: transparent transparent transparent;
color: #ffd700;
content: close-quote;
font-size: 130px;
line-height: 0.3em;
margin-left: 1.4em;
vertical-align: -0.4em;
}
Deslizador de imágenes
/* DESLIZADOR DE IMÁGENES */
.slide-image-slider .style-default .caption-content {
background-color: #dbdff7;
color: var(--main-color);
}
Botones deslizantes
/* BOTONES DESLIZANTES */
.slide-image-slider .btn-down {
border-radius: 50%;
color: #ffd700;
}
.slide-image-slider .btn-up {
border-radius: 50%;
color: white;
}
.slide-image-slider .btn-down:hover {
border-radius: 50%;
color: white;
}
.slide-image-slider .btn-down:active {
border-radius: 50%;
color: #14caff;
}
.slide-image-slider .btn-up:hover {
border-radius: 50%;
color: #14caff;
}
.slide-image-slider .btn-up:active {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-down {
border-radius: 50%;
color: #ffd700;
}
.slide-text-sequence .btn-up {
border-radius: 50%;
color: #ffd700;
}
.slide-text-sequence .btn-down:hover {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-down:active {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-up:hover {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-up:active {
border-radius: 50%;
color: #14caff;
}
Desplazamiento
/* MIX DE DESPLAZAMIENTO */
.pswp__top-bar {
color: #293745;
}
.pswp--notouch .pswp__hint:before {
content: "Presione ESC para salir";
color: black;
}
Prompt de estado
.state-prompt .slide-footer .slide-footer-prompt, .state-intro .slide-footer .slide-footer-prompt {
font-family: 'Noto Sans';
font-size: 14px;
border-bottom: 0px solid transparent;
}
Recursos públicos CSS
Si necesita más ayuda, aquí tiene algunos recursos disponibles en Internet que pueden ayudarle a empezar a utilizar el código CSS:
¿Esta página le fue de ayuda?
Gracias por hacérnoslo saber.