- -
Oficina de Aprendizaje Digital

Árbol de páginas

Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

UI Steps
sizesmall


UI Step

En primer lugar, tenemos que descargar el siguiente fichero (pulsa sobre el icono para descargar):

View file
namedefault.css
height150

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
titleCódigo y cambios que aplica


UI Tabs


UI Tab
titleSubpáginas



Column


Bloque de código
languagecss
themeRDark
titleSubpáginas
collapsetrue
.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
titleHipervínculos y texto



Column


Bloque de código
languagecss
themeRDark
titleFormato de texto
collapsetrue
.column {
	font-family: "Century Gothic" , CenturyGothic , AppleGothic , sans-serif;
	font-size: 16.0px;
        border: 0px solid white !important;
}


Bloque de código
languagecss
themeRDark
titleEstilo de hipervínculo
collapsetrue
.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
titleExámenes


Column


Bloque de código
languagecss
themeRDark
titleExámenes
collapsetrue
.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
titleEnlace a contenido


Column


Bloque de código
languagecss
themeRDark
titleEnlace
collapsetrue
.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
titleIconos de las plantillas


Column


Bloque de código
languagecss
themeRDark
titleIconos de las plantillas
collapsetrue
.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
titleClase oculto


Column


Bloque de código
languagecss
themeRDark
titleOculto
collapsetrue
.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"







...