Historial de página

Una plantilla CCS, sirve para dar estilo a una página web, cambia cómo se ven algunos elementos en el navegador. Por ejemplo, en la siguiente imagen, se muestra a la izquierda cómo es el estilo por defecto de las subcarpetas en Lessons y, a la derecha, cómo es al aplicar la plantilla de CSS.

Image Added

Cargar una plantilla CCS en Lessons de Poliformat es muy sencillo, solamente hay que seguir los siguientes pasos:

UI Steps

size	small

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):

View file

name	default.css
height	150

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.

Image Added

ui-step

En la ventana de configuración, pulsamos el botón "Examinar".

Image Added

UI Step

Seleccionamos el fichero que hemos descargado en el paso 1.

Image Added

UI Step

¡Listo!

Para finalizar, simplemente hacemos clic en "Guardar".

Image Added

ui-expand

title	Código y cambios que aplica

UI Tabs

UI Tab

title	Subpáginas

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
Image Added

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;
}

Estilo de hipervínculo:Midnight

Bloque de código

theme
language	css

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
Image Modified

UI Tab

title	Exámenes

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
Image Added

UI Tab

title	Enlace a contenido

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
Image Added

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
Image Added

UI Tab

title	Clase oculto

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"

Image Added

ui-expand

title	Imagenes Imágenes e iconos de la plantilla

Advertencia
Esta plantilla cuenta En esta plantilla se referencian 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:

Image Removed

Image Added

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.

...

Árbol de páginas

Versiones comparadas

Versión anterior 21

Nueva versión Actual

Clave