...
Cargar una plantilla CCS en Lessons de Poliformat es muy sencillo, solamente hay que seguir los siguientes pasos:
| UI Steps |
|---|
|
| UI Step |
|---|
En primer lugar, tenemos que descargar el siguiente fichero, que contiene los cambios aplicados en el css para los cursos prodigital (pulsa sobre el icono para descargar): | Advertencia |
|---|
No cambiar el nombre del fichero. |
|
| UI Step |
|---|
Nos dirigimos al apartado de Lessons en el cual queramos cargar la plantilla. Pulsamos sobre el icono de ajustes que se muestra en la imagen. 
|
| UI Step |
|---|
En la ventana de configuración, pulsamos el botón "Examinar". 
|
| UI Step |
|---|
Seleccionamos el fichero que hemos descargado en el paso 1. 
|
| UI Step |
|---|
¡Listo! Para finalizar, simplemente hacemos clic en "Guardar". 
|
|
...
| UI Expand |
|---|
| title | Código y cambios que aplica |
|---|
|
| UI Tabs |
|---|
| UI Tab |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Subpáginas |
|---|
| collapse | true |
|---|
| .pageType .itemlink span {
align-items: center;
display: flex;
padding: 10px 50px;
width: auto;
margin:0 auto;
text-decoration: none !important;
background: #132e6f;
color: #ffffff !important;
font-weight: 600;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease-in-out;
}
.pageType .itemlink span:hover {
background-image:url('ver apartado imagenes de la plantilla');
background-repeat:no-repeat;
background-position:center;
padding:40px 100px;
color: #ffffff!important;
}
.pageType .itemlink span:active {
transform: scale(0.9);
box-shadow: 0 0 20px #000000;
color: #ffffff !important;
background: #000000;
} |
|
| Column |
|---|
|
|
| UI Tab |
|---|
| title | Hipervínculos y texto |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Formato de texto |
|---|
| collapse | true |
|---|
| .column {
font-family: "Century Gothic" , CenturyGothic , AppleGothic , sans-serif;
font-size: 16.0px;
border: 0px solid white !important;
}
|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Estilo de hipervínculo |
|---|
| collapse | true |
|---|
| .textbox a {
text-decoration: none !important;
color: #b90505 !important;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.textbox a:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #000000;
background: #ffffff;
color: #0770cd !important;
}
.textbox a:active {
transform: scale(0.9);
box-shadow: 0 0 20px #000000;
color: #FFFFFF !important;
} |
|
| Column |
|---|
|
|
| UI Tab |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Exámenes |
|---|
| collapse | true |
|---|
| .assessmentType .itemlink span {
align-items: center;
display: flex;
justify-content: center;
padding: 15px 80px;
width: max-content;
margin:0 auto;
text-decoration: none !important;
background: #0770cd;
color: #FFFFFF !important;
font-size: 25px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease-in-out;
}
.assessmentType .itemlink span:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #000000;
background: #ffffff;
color: #0770cd !important;
}
.assessmentType .itemlink span:active {
transform: scale(0.9);
box-shadow: 0 0 20px #000000;
color: #FFFFFF !important;
}
.listType .link-div .fa-item-text {
display: none;
vertical-align: text-top;
} |
|
| Column |
|---|
|
|
| UI Tab |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Enlace |
|---|
| collapse | true |
|---|
| .resourceType .itemlink {
align-items: center;
display: flex;
padding: 5px 20px;
width: max-content;
text-decoration: none !important;
background: #c00;
color: #FFFFFF !important;
cursor: pointer;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}
.resourceType .itemlink:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #000000;
background: #ffffff;
color: #0770cd !important;
}
.resourceType .itemlink:active {
transform: scale(0.9);
box-shadow: 0 0 20px #000000;
color: #FFFFFF !important;
} |
|
| Column |
|---|
|
|
| UI Tab |
|---|
| title | Iconos de las plantillas |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Iconos de las plantillas |
|---|
| collapse | true |
|---|
| .fa-lightbulb-o::before {
content: url('ver apartado imagenes de la plantilla');
position: relative;
bottom: 8px;
right: 3px;
}
.fa-warning::before, .fa-exclamation-triangle::before {
content: url('ver apartado imagenes de la plantilla');
position: relative;
top: 5px;
right: 3px;
}
.fa-star::before {
content: url('ver apartado imagenes de la plantilla');
display: flex;
bottom: 8px;
position: relative;
right: 10px;
} |
|
| Column |
|---|
|
|
| UI Tab |
|---|
|
| Column |
|---|
| Bloque de código |
|---|
| language | css |
|---|
| theme | RDark |
|---|
| title | Oculto |
|---|
| collapse | true |
|---|
| .oculto{
visibility: collapse;
} |
|
| Column |
|---|
La clase oculto sirve para ocultar elementos que no queremos que se muestren en pantalla, pero que, por alguna razón, deben estar incluidos en la página de Lessons. Para utilizarla, escribimos "oculto" en la casilla "Clase de CSS" que se encuentra en la ventana "Editar ítem" 
|
|
|
|
| UI Expand |
|---|
| title | Imagenes Imágenes e iconos de la plantilla |
|---|
|
| Advertencia |
|---|
Esta plantilla cuenta En esta plantilla se referencias las imágenes o iconos con URLs de imágenes. Para que estas imágenes funcionen correctamente, hay que subirlas previamente a recursos de nuestro espacio y sustituir los URLs de la plantilla por los nuevos (que harán referencia a nuestro espacio en poliformat). |
Las imágenes a subir en recursos son las siguientes:   
Los pasos a seguir para actualizar las URLs son los siguientes: | UI Steps |
|---|
| UI Step |
|---|
Creamos una carpeta en recursos donde subimos las 4 imágenes. En esté ejemplo la hemos llamado "iconos plantilla" 
|
| UI Step |
|---|
Pinchamos sobre cada imagen subida y se nos abrirá una ventana para cada una con sus respectivas URLs. Copiamos esta URL. 
|
| UI Step |
|---|
Abrimos "default.css" con un editor de texto. Buscamos la linea de código donde se encuentra cada imagen y pegamos la URL copiada anteriormente sustituyendo la anterior URL por la nueva. 
|
|
|
...
