Diferencia entre revisiones de «33/Temas estándar»

De MoodleDocs
(tidy up)
(tidy up)
 
(No se muestran 47 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
{{Moodle 2.x}}
{{Temas}}
{{Temas}}
{{Versiones|Esta documentación es para Moodle 2.7 a 3.3; si Usted desea ver la documentación más reciente, vea  [[26/Temas estándar]] y para documentación más antigua para Moodle 2.6 vaya a [[26/Temas estándar]]; y para Moodle 1.9 vaya a [[Temas en Moodle 1.9 y anteriores]].}}


{{Moodle 2.7}}
==Temas estándar==
{{Nuevas características de Moodle 2.7}}
Moodle 2.7 tiene dos temas estándar: '''Limpio''' (''Clean''), un tema responsivo, basado en arranque (''bootstrap''), que es empleado por defecto, y '''Más''' (''More''), un tema personalizable desde adentro de la interfaz administrativa.


[[File:CLEAN.png|center|thumb|500px|'Limpio' (''Clean''), el tema por defecto para Moodle 2.7]]
Moodle (2.7 en adelante) tiene dos temas estándar: '''[[Tema Limpio|Limpio (Clean)]]''', un tema responsivo, basado en arranque (''bootstrap''), que es empleado por defecto, y '''[[Tema Más|Más (More)]]''', un tema personalizable desde adentro de la interfaz administrativa. Moodle 3.2 tiene además el '''[[Tema Boost]]''' como estándar. {{Nuevas características de Moodle 3.2}}
 
[[File:CLEAN.png|center|thumb|500px|'Limpio' (''Clean''), el tema por defecto para Moodle 2.7 a 3.1]]


Otros temas, incluyendo los temas que eran estándar en versiones anteriores de Moodle, están disponibles para descargarse desde  [https://moodle.org/plugins/browse.php?list=category&id=3 la sección de Temas del directorio de Plugins de Moodle].
Otros temas, incluyendo los temas que eran estándar en versiones anteriores de Moodle, están disponibles para descargarse desde  [https://moodle.org/plugins/browse.php?list=category&id=3 la sección de Temas del directorio de Plugins de Moodle].


'''''NOTA:''' Si Usted estaba usando un tema del núcleo de Moodle previo, o alguno basado en un tema previo del núcleo, y Usted está actualizando a Moodle 2.7, asegúrese de reinstalar el (los) tema(s) relevante(s) antes de correr la actualización.''
'''''NOTA:''' Si Usted estaba usando un tema del núcleo de Moodle previo, o alguno basado en un tema previo del núcleo, y Usted está actualizando Moodle, asegúrese de reinstalar el (los) tema(s) relevante(s) antes de correr la actualización.''


==Selector de temas==
===Ejemplo de un [[Tema Boost]] personalizado===
[[Archivo:Mount Orange screen.png|400px]]


Un administrador puede configurar un tema gráfico para el sitio en ''Configuraciones > Administración del sitio > Apariencia > Temas > Selector de Temas''.
El sitio demostrativo de la Escuela de Moodle, [http://school.demo.moodle.net Mount Orange],usa el [[Tema Boost]] estándar con la personalización siguiente:
* Una  imagen para la [[Portada]] y una imagen de fondo necesitan subirse y referenciarse en el código.


Los diferentes temas pueden configurarse de acuerdo al 'tipo de dispositivo' - por defecto, antiguo (para navegadores antiguos), móvil y tableta.
[[Archivo:students-studying-in-classroom-with-digital-devices-1680.jpg|200px]]


Vaya a  ''Configuraciones > Administración del sitio > Apariencia > Temas > Selector de temas''
** La imagen para la portada con estudiantes y tabletas sobre una superficie naranja está alojada (disponible para referenciar en nuestro sitio traducido) en    https://moodle.com/wp-content/uploads/students-studying-in-classroom-with-digital-devices-1680.jpg
*Elija el botón de "Seleccionar tema" que está junto al tipo que desea cambiar
*Descienda para ver las vistas previas de los temas disponibles y elija el botón para "Usar tema" para elegir el tema
*La pantalla siguiente le dará información acerca del tema. Elija "Continuar"


Nota 1: Moodle cacha los temas, por lo que si no ve inmediatamente los cambios de las configuraciones que esperaba, elija el botón para "Limpiar cachés de temas" en la parte superior de la página del selector de temas.
** Usted puede descargar una copia de esta imagen desde https://docs.moodle.org/all/es/Archivo:students-studying-in-classroom-with-digital-devices-1680.jpg


Nota 2: El tema seleccionado puede ser anulado si han sido permitidos temas de usuario/curso o categoría en la [[Configuración de temas]].
[[Archivo:bg6.png|200px]]


Tip: El [[Tema Mi Teléfono Móvil]] está especialmente diseñado para dispositivos móviles.
** La imagen para el fondo nuboso azul-gris está alojada (disponible para referenciar en nuestro sitio traducido) en  https://moodle.com/wp-content/uploads/bg6.png


[[File:Themeselector21.png|thumb|center|selector de temas mostrando configuración por defecto y ninguno seleccionado en los tipos para otros temas]]
** Usted puede descargar una copia de esta imagen desde  https://docs.moodle.org/all/es/Archivo:bg6.png


{{Moodle 2.7}}
'''Nota:''' La siguiente instrucción hace referencia al primer asunto de la portada. Si su sitio está alojado localmente en localhost, la dirección para editar esta parte es http://localhost/course/editsection.php?id=1 . Si su sitio está alojado en [https://www.gnomio.com/ gnomio.com], [https://www.milaulas.com/ milaulas.com] o en otros sitios gratuitos, es posible que Usted no tenga permitido editar esta parte del sitio y tenga que sustituir id=1 por id=6 para poder lograr algo similar.
==Personalización del tema '''Mas''' (''More'')==
{{Nuevas características de Moodle 2.7}}
[[File:MORE.png|center|thumb|500px|El tema personalizable '''Más''' (''More'').]]


El tema '''Más''' ( ''More'' ) les permite a los administradores el personalizarlo desde '' Administración del sitio > Apariencia > Temas > Más ''.
*'''Sección de tópico/tema en la [[Portada]]:'''


Las opciones son:
<code php><div class="frontpage container-fluid">
*'''Color del texto/color del enlace''' - estos pueden seleccionarse, ya sea al escribir el código o eligiendo dentro del selector de color (''colour picker'').
*'''Color del fondo/Imagen del fondo''' - puede seleccionarse un color para el fondo como se hizo arriba o, o puede subirse un archivo de imagen de su elección. (Nota: la imagen anulará el color del fondo.)
    <div class="jumbotron jumbotron-fluid" style="background-image: url('SU IMAGEN SUBIDA PARA LA PÁGINA DE PORTADA.jpg');">
*'''Repetir fondo/posición/fijo''' - decida aquí cómo desea que su  imagen se repita, su posición o si desea que esté fija en la página.
        <div class="texts">
*'''Color del fondo del contenido principal/Color secundario del fondo''' - estos pueden seleccionarse, ya sea al escribir el código o empleando el selector de color (''colour picker'').
            <h2>SU ENCABEZADO</h2>
*'''Invertir Barra de navegación''' - al activar esto se intercambiarán el color del fondo y el del texto en la barra de navegación, entre negro y blanco.
            <p class="lead">SENTENCE/TAG LINE</p>
*'''Logo''' - aquí puede subirse un logo  personalizado
        </div>
*'''CSS personalizado/Nota al pie''' - pueden añadirse CSS personalizado y texto para el pied e página y se reflejarán en todo el sitio.
    </div>
    <div class="row-fluid">
        <div class="fp-block col-md-6">
            <h3>ENCABEZADO MÁS PEQUEÑO</h3>
            <p>Párrafo de texto</p>
            <p class="button"><a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">TEXTO DEL BOTÓN »</a></p>
        </div>
        <div class="fp-block col-md-6">
            <h3>ENCABEZADO MÁS PEQUEÑO</h3>
            <p>Párrafo de texto.</p>
            <p class="button"><a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">TEXTO DEL BOTÓN »</a></p>
        </div>
    </div>
   
</div> </code>


*'''Traducción al español de tópico/tema en la [[Portada]]:'''


Sugerencia profesional: Al especificar colores, Usted puede inclusive usar colores avanzados con valores de transparencia , como por ejemplo '''rgba(255,255,255,0.8)'''
<code php><div class="frontpage container-fluid">
 
[[File:moodle27-orange.png|center|500px|'Más' con un fondo de imagen naranja, un logo y colores personalizados.]]
    <div class="jumbotron jumbotron-fluid" style="background-image: url('https://moodle.com/wp-content/uploads/students-studying-in-classroom-with-digital-devices-1680.jpg');">
 
        <div class="texts">
'Más' con un fondo de imagen naranja, un logo y colores personalizados
            <h2>Escuela del Monte Naranja</h2>
 
            <p class="lead">Pruebe Moodle en un entorno de escuela auténtico con cuentas pre-fabricadas</p>
 
        </div>
[[File:morewood.png|center|500px|'Más' con fondo de madera, logo y colores personalizados]]
    </div>
 
'Más' con fondo de madera, logo, colores y texto personalizados.
    <div class="row-fluid">
        <div class="fp-block col-md-6">
            <h3>Vea Moodle en acción</h3>
            <p>Este sitio demostrativo le da la oportunidad de explorar Moodle en acción como un <a href="https://docs.moodle.org/all/es/Rol_de_M%C3%A1nager">Mánager</a>, <a href="https://docs.moodle.org/all/es/Rol_de_profesor"> profesor</a>, <a href="https://docs.moodle.org/all/es/Rol_de_estudiante"> estudiante </a>o  <a href="https://docs.moodle.org/all/es/Rol_paterno">padre-de-familia</a>. Vea como los estudiantes son evaluados y el aprendizaje es monitoreado en una variedad de actividades con contenido del usuario realístic.</p>
            <p class="button"><a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">Elegir un rol »</a></p>
        </div>
        <div class="fp-block col-md-6">
            <h3>Acerca de Monte Naranja</h3>
            <p><a href="http://school.demo.moodle.net/">Monte Naranja</a> proporciona educación de alta calidad para estudiantes con edades de 8 a 18 años, haciendo uso completo de la plataforma educativa de código abierto Moodle. Los cursos están abiertos a <a href="https://docs.moodle.org/all/es/Rol_de_invitado">invitados </a>y demuestran las <a href="https://docs.moodle.org/all/es/Acerca_de_Moodle">características de Moodle</a>, resaltando las <a href="https://docs.moodle.org/all/es/dev/Historia_de_las_versiones">mejoras que trae cada nueva versión</a>.</p>
            <p class="button"><a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">Ir a cursos »</a></p>
        </div>
    </div>
   
</div> </code>


===Mount Orange: un ejemplo de un tema 'Más' personalizado===
El tema en el [http://school.demo.moodle.net  School demo site] está basado en configuraciones del  tracker MDLSITE-3095 y MDLSITE-3245


{|
| [[File:MountOrangeFrontPage.png|thumb|450px|Vista de Portada]]
| [[File:SchoolDemoMore.png|thumb|450px|Vista de curso]]
|}


====Configuraciones de página del tema 'Más'====
'''*Configuración avanzada de tema Boost - CSS crudo inicial:'''
*Text colour: ##595959
<code php>$brand-primary:             #0070a8;
*Link colour: #0070a8
$body-color:                 #336;
*Background colour: #93abc3
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
*Background image [https://docs.moodle.org/27/en/File:bg6.png bg6.png]
$breadcrumb-bg:           #fff; </code>
*Background repeat: No repeat
*Background position: Left bottom
*Background fixed: Yes
*Main content background colour: #fff
*Secondary background colour: #fff
*Invert navbar: No
*Logo: None
*CUSTOM CSS:


body {
'''*Configuraciones avanzadas del tema Boost - SCSS Crudo:'''
<code php>body {
    background-image: url("https://moodle.com/wp-content/uploads/bg6.png");
     background-size: cover;
     background-size: cover;
}
    background-repeat: no-repeat;
h1, h2, h3, h4, h5, h6 {
    background-attachment: fixed;
    letter-spacing: .3px;
}
h1, h2, h3, h4, h5, h6 {
     color: #f98012;
     color: #f98012;
     font-weight: normal;
     font-weight: normal;
}
}
#page-header h1 {  
.navbar-brand {
    display: none;
}
#nav-drawer {
    background-color: rgba(236, 238, 239, .9);
}
#page-header.row {
    margin-left: -30px;
    margin-right: -30px;
}
#page-header .card {
    background-color: transparent;
    border: none;
    margin-bottom: 0;
}
#page-header h1 {  
     color: #fff;
     color: #fff;
     font-weight: bold;
     font-weight: 500;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);  
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);  
}
}
.block .header h2 {
#page-header .breadcrumb {
    padding: .50rem 1rem;
}
.block-region .card-block .card-title {
     color: #f98012;
     color: #f98012;
     font-weight: normal;
     font-size: 1.07rem;
}
    font-weight: 400;
#page-footer {
}
    color: #444;
#page-footer a {
}
     color: #f98012;
#page-footer a {
}
     color: #eee;
#page-site-index #page-header {
}
.jschooser .choosercontainer #chooseform .instruction,
.jschooser .choosercontainer #chooseform .typesummary {
    background-color: #fff;
}
.choosercontainer #chooseform .selected {
    background-color: #fff;
}
#page-site-index #page-header {
     display:none;
     display:none;
}
}
#page-site-index #region-main {
#page-site-index #region-main .card.card-block {
     padding: 0;  
     padding: 0;
     border: 0;
     border: 0;
    border-radius: 0;
    box-shadow: none;
     background-color: transparent;
     background-color: transparent;
}
}
#page-site-index .label {
#page-site-index #block-region-side-pre {
    margin-top: 15px;
}
#page-site-index .label {
     padding: 0;
     padding: 0;
}
}
#page-site-index .activity > div {
#page-site-index .activity > div {
     padding: 0;
     padding: 0;
}
}
#page-site-index .mod-indent-outer {
#page-site-index .mod-indent-outer {
     padding-left: 0;
     padding-left: 0;
}
}
#page-site-index .contentwithoutlink {
#page-site-index .contentwithoutlink {
     padding-right: 0;
     padding-right: 0;
}
}
.frontpage.container-fluid {
.frontpage.container-fluid {
     padding: 0;
     padding: 0;
}
}
.frontpage .hero-unit {
.frontpage .jumbotron {
     padding:0;
     padding:0;
     border-radius:0;
     border-radius:0;
     background: transparent no-repeat right bottom / cover;
     background: transparent no-repeat right bottom / cover;
     line-height: 250px;
     line-height: 250px;
}
}
.frontpage .hero-unit .texts {
.frontpage .jumbotron .texts {
     color: #fff;
     color: #fff;
     letter-spacing: .5px;
     letter-spacing: .5px;
Línea 152: Línea 175:
     display: inline-block;
     display: inline-block;
     vertical-align: bottom;
     vertical-align: bottom;
}
}
.frontpage .hero-unit h2 {
.frontpage .jumbotron h2 {
     color: #fff;
     color: #fff;
     font-size: 32px;
     font-size: 32px;
     font-weight: 200;
     font-weight: 300;
     text-shadow: 1px 1px 1px #444;
     text-shadow: 1px 1px 1px #444;
     margin-bottom: 0;
     margin-bottom: 0;
}
    margin-top: 10px;
.frontpage .hero-unit .lead {
}
.frontpage .jumbotron .lead {
     text-shadow: 1px 1px 1px #333;
     text-shadow: 1px 1px 1px #333;
}
    line-height: 30px;
.frontpage .row-fluid {
    font-size: 21px;
}
.frontpage .row-fluid {
     line-height: 24px;
     line-height: 24px;
     background-color: #fff;
     background-color: #fff;
     padding: 10px 20px 20px;
     padding: 10px 20px 20px;
     box-sizing: border-box;
     box-sizing: border-box;
}
}
.frontpage .fp-block {
.frontpage .row-fluid::after {
    display: table;
    content: "";
    clear: both;
    line-height: 0;
}
.frontpage .fp-block {
     padding: 10px 20px 0;
     padding: 10px 20px 0;
}
}
.frontpage h3 {
.frontpage h3 {
     font-size: 26px;
     font-size: 26px;
     line-height: 30px;
     line-height: 30px;
     font-weight: 200;
     font-weight: 300;
}
    margin-top: 20px;
.frontpage .button {
    margin-bottom: 20px;
}
.frontpage .button {
     text-align: right;
     text-align: right;
}
}
 
.empty-region-side-pre.empty-region-side-post #region-main-box,
====Configuraciones resumidas de tópicos de portada====
.empty-region-side-pre.empty-region-side-post #region-main {
(Nota: estas configuraciones le permiten a Usted el tener una imagen grande y dos cajas de texto. Suba su imagen para el ''banner'' mediante el ícono para imagen del [[Editor de texto]]. Cambie a la vista de código fuente y copie su URL.)
  width: 100%;
 
}
<nowiki> <div class="frontpage container-fluid">
   
   
     <div class="hero-unit" style="background-image: url('INSERTE AQUÍ LA URL COMPLETA DE SU BANNER SUBIDO.jpg');">
#settingsnav.box.block_tree_box.p-y-1 {
        <div class="texts">
     padding-top: 0!important;
            <h2>TÍTULO DEL SITIO AQUÍ</h2>
}</code>
            <p class="lead">LÍNEA DEL LEMA (TAG LINE) AQUÍ</p>
        </div>
    </div>
</nowiki>


<nowiki>
    <div class="row-fluid">
        <div class="fp-block span6">
            <h3>TÍTULO DE LA CAJA DE TEXTO IZQUIERDA</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor    In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p class="button"><a class="btn btn-primary" href="#">read more »</a></p>
        </div>
</nowiki>


<nowiki>
===Escuela Monte Naranja===
        <div class="fp-block span6">
[[Archivo:ES Mount Orange screen.png|400px]]
            <h3>TÍTULO DE LA CAJA DE TEXTO DERECHA</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p class="button"><a class="btn btn-primary" href="#">read more »</a></p>
        </div>
    </div>
 


</div>
===Escuela Monte Naranja en gnomio.com o milaulas.com===
</nowiki>
[[Archivo:ES Mount Orange screen en gnomio.png|400px]]


=====LLevándolo más adelante=====
==Selector de temas==
Para una personalización más avanzada, vea las publicaciones en foros de  Mary Evans: [https://moodle.org/mod/forum/discuss.php?d=267662 Adding marketing spots to the front page.]


==Vea también==
Un administrador puede configurar un tema gráfico para el sitio en ''Configuraciones > Administración del sitio > Apariencia > Temas > Selector de Temas''.


*[http://youtu.be/OUTzAFItLx4 Moodle HQ video on themes]
Los diferentes temas pueden configurarse de acuerdo al 'tipo de dispositivo' - por defecto, antiguo (para navegadores antiguos), móvil y tableta.
* [https://docs.moodle.org/27/en/Theme_credits Theme credits]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion


==DOCUMENTACIÓN MEDIANAMENTE ANTIGUA, que ya no se consideró tan importante para Moodle 2.7 y siguientes==
Vaya a  ''Configuraciones > Administración del sitio > Apariencia > Temas > Selector de temas''
{{Moodle 2.6}}{{Moodle 2.5}}{{Moodle 2.4}}{{Moodle 2.3}}{{Moodle 2.2}}{{Moodle 2.1}}{{Moodle 2.0}}
*Elija el botón de "Seleccionar tema" que está junto al tipo que desea cambiar
*Descienda para ver las vistas previas de los temas disponibles y elija el botón para "Usar tema" para elegir el tema
*La pantalla siguiente le dará información acerca del tema. Elija "Continuar"


==Notas sobre temas individuales==
Nota 1: Moodle cacha los temas, por lo que si no ve inmediatamente los cambios de las configuraciones que esperaba, elija el botón para  "Limpiar cachés de temas" en la parte superior de la página del selector de temas.


Arialist: no muestra el logo a nivel de curso.  Esto significa que no es útil para identificar visualmente a nivel de categoría/curso.
Nota 2: El tema seleccionado puede ser anulado si han sido permitidos temas de usuario/curso o categoría en la [[Configuración de temas]].
 
===Temas que le permiten cambiar un logo===
*Arialist (solamente a nivel de portada) Código para cambiar ésto: http://moodle.org/mod/forum/discuss.php?d=192409
*Ladrillo (Brick)
*Blanco Formal (Formal White)
*Magazine
*Skylight
*Salpicadura (Splash)
 
===Temas que permiten CSS personalizado===
*Arialist
*Fusion
*Non-zero
*Sobrepuesto (Overlay)
*Cielo alto (Skyhigh)
*Salpicadura (Splash)
 
===Temas con sólamente columna derecha===
*Arialist
*Ladrillo (Brick)
*Fusion
*Ágil (Nimble)
*Non-zero (2 columns)
*Sobrepuesto (Overlay) (2 columnas)
*Cielo alto (Skyhigh) (2 columns)
 
===Varios foros (en inglés) de ayuda que pueden ser de utilidad===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Skyhigh: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544
 
==Temas estándar==


En órden alfabético aquí están los temas estándar en Moodle 2.6 (y anteriores):
Tip: El [[Tema Mi Teléfono Móvil]] estaba especialmente diseñado para dispositivos móviles en Moodle 2.7 a 3.0.
<gallery caption="Temas estándar - elija uno para agrandarlo" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Postquemador (Afterburner)
Image:theme_anomaly.png|Anomalía (Anomaly)
Image:theme_arialist.png|Arialist
Image:theme_binarius.png|Binarius
Image:theme_boxxie.png|Boxxie
Image:theme_brick.png|Ladrillo (Brick)
Image:theme_formalwhite.png|Blanco Formal (Formal white)
Image:theme_formfactor.png|FormFactor
Image:theme_fusion.png|Fusion
Image:theme_leatherbound.png|Encuadernado en piel (Leatherbound)
Image:theme_magazine.png|Magazine
Image:Mymobile_theme.png|Mi Teléfono Móvil (MyMobile)
Image:theme_nimble.png|Ágil (Nimble)
Image:theme_nonzero.png|Nonzero
Image:theme_overlay.png|Sobrepuesto (Overlay)
Image:theme_serenity.png|Serenidad (Serenity)
Image:theme_skyhigh.png|Cielo Alto (Sky High)
Image:theme_splash.png|Salpicadura (Splash)
Image:theme_standard.png|Estándar
</gallery>


==Vea también==
==Vea también==


* [https://docs.moodle.org/24/en/Theme_credits https://docs.moodle.org/24/en/Theme_credits]
* [[Tema Boost]] (nuevo en Moodle 3.2)
* [[Tema Más]]
* [https://www.youtube.com/watch?v=OUTzAFItLx4&feature=youtu.be Video de Moodle HQ sobre temas]
* [https://docs.moodle.org/32/en/Theme_credits Créditos de temas]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion



Revisión actual - 11:53 15 jun 2019

note icon.png Existe documentación diferente para varias versiones de Moodle: Esta documentación es para Moodle 2.7 a 3.3; si Usted desea ver la documentación más reciente, vea 26/Temas estándar y para documentación más antigua para Moodle 2.6 vaya a 26/Temas estándar; y para Moodle 1.9 vaya a Temas en Moodle 1.9 y anteriores.


Temas estándar

Moodle (2.7 en adelante) tiene dos temas estándar: Limpio (Clean), un tema responsivo, basado en arranque (bootstrap), que es empleado por defecto, y Más (More), un tema personalizable desde adentro de la interfaz administrativa. Moodle 3.2 tiene además el Tema Boost como estándar. ¡Nueva característica
en Moodle 3.2!


'Limpio' (Clean), el tema por defecto para Moodle 2.7 a 3.1

Otros temas, incluyendo los temas que eran estándar en versiones anteriores de Moodle, están disponibles para descargarse desde la sección de Temas del directorio de Plugins de Moodle.

NOTA: Si Usted estaba usando un tema del núcleo de Moodle previo, o alguno basado en un tema previo del núcleo, y Usted está actualizando Moodle, asegúrese de reinstalar el (los) tema(s) relevante(s) antes de correr la actualización.

Ejemplo de un Tema Boost personalizado

Mount Orange screen.png

El sitio demostrativo de la Escuela de Moodle, Mount Orange,usa el Tema Boost estándar con la personalización siguiente:

  • Una imagen para la Portada y una imagen de fondo necesitan subirse y referenciarse en el código.

students-studying-in-classroom-with-digital-devices-1680.jpg

bg6.png

Nota: La siguiente instrucción hace referencia al primer asunto de la portada. Si su sitio está alojado localmente en localhost, la dirección para editar esta parte es http://localhost/course/editsection.php?id=1 . Si su sitio está alojado en gnomio.com, milaulas.com o en otros sitios gratuitos, es posible que Usted no tenga permitido editar esta parte del sitio y tenga que sustituir id=1 por id=6 para poder lograr algo similar.

  • Sección de tópico/tema en la Portada:

SU ENCABEZADO

SENTENCE/TAG LINE

ENCABEZADO MÁS PEQUEÑO

Párrafo de texto

<a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">TEXTO DEL BOTÓN »</a>

ENCABEZADO MÁS PEQUEÑO

Párrafo de texto.

<a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">TEXTO DEL BOTÓN »</a>

  • Traducción al español de tópico/tema en la Portada:

Escuela del Monte Naranja

Pruebe Moodle en un entorno de escuela auténtico con cuentas pre-fabricadas

Vea Moodle en acción

Este sitio demostrativo le da la oportunidad de explorar Moodle en acción como un <a href="https://docs.moodle.org/all/es/Rol_de_M%C3%A1nager">Mánager</a>, <a href="https://docs.moodle.org/all/es/Rol_de_profesor"> profesor</a>, <a href="https://docs.moodle.org/all/es/Rol_de_estudiante"> estudiante </a>o <a href="https://docs.moodle.org/all/es/Rol_paterno">padre-de-familia</a>. Vea como los estudiantes son evaluados y el aprendizaje es monitoreado en una variedad de actividades con contenido del usuario realístic.

<a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">Elegir un rol »</a>

Acerca de Monte Naranja

<a href="http://school.demo.moodle.net/">Monte Naranja</a> proporciona educación de alta calidad para estudiantes con edades de 8 a 18 años, haciendo uso completo de la plataforma educativa de código abierto Moodle. Los cursos están abiertos a <a href="https://docs.moodle.org/all/es/Rol_de_invitado">invitados </a>y demuestran las <a href="https://docs.moodle.org/all/es/Acerca_de_Moodle">características de Moodle</a>, resaltando las <a href="https://docs.moodle.org/all/es/dev/Historia_de_las_versiones">mejoras que trae cada nueva versión</a>.

<a class="btn btn-primary" href="URL DE ENLACE DE BOTÓN">Ir a cursos »</a>


*Configuración avanzada de tema Boost - CSS crudo inicial: $brand-primary: #0070a8; $body-color: #336; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $breadcrumb-bg: #fff;

*Configuraciones avanzadas del tema Boost - SCSS Crudo: body {

   background-image: url("https://moodle.com/wp-content/uploads/bg6.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   letter-spacing: .3px;

} h1, h2, h3, h4, h5, h6 {

   color: #f98012;
   font-weight: normal;

} .navbar-brand {

   display: none;

}

  1. nav-drawer {
   background-color: rgba(236, 238, 239, .9);

}

  1. page-header.row {
   margin-left: -30px;
   margin-right: -30px;

}

  1. page-header .card {
   background-color: transparent;
   border: none;
   margin-bottom: 0;

}

  1. page-header h1 {
   color: #fff;
   font-weight: 500;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); 

}

  1. page-header .breadcrumb {
   padding: .50rem 1rem;

} .block-region .card-block .card-title {

   color: #f98012;
   font-size: 1.07rem;
   font-weight: 400;

}

  1. page-footer a {
   color: #f98012;

}

  1. page-site-index #page-header {
   display:none;

}

  1. page-site-index #region-main .card.card-block {
   padding: 0;
   border: 0;
   background-color: transparent;

}

  1. page-site-index #block-region-side-pre {
   margin-top: 15px;

}

  1. page-site-index .label {
   padding: 0;

}

  1. page-site-index .activity > div {
   padding: 0;

}

  1. page-site-index .mod-indent-outer {
   padding-left: 0;

}

  1. page-site-index .contentwithoutlink {
   padding-right: 0;

} .frontpage.container-fluid {

   padding: 0;

} .frontpage .jumbotron {

   padding:0;
   border-radius:0;
   background: transparent no-repeat right bottom / cover;
   line-height: 250px;

} .frontpage .jumbotron .texts {

   color: #fff;
   letter-spacing: .5px;
   background-color: rgba(255, 99, 0, 0.70);
   padding: 0 20px;
   margin-bottom:20px;
   display: inline-block;
   vertical-align: bottom;

} .frontpage .jumbotron h2 {

   color: #fff;
   font-size: 32px;
   font-weight: 300;
   text-shadow: 1px 1px 1px #444;
   margin-bottom: 0;
   margin-top: 10px;

} .frontpage .jumbotron .lead {

   text-shadow: 1px 1px 1px #333;
   line-height: 30px;
   font-size: 21px;

} .frontpage .row-fluid {

   line-height: 24px;
   background-color: #fff;
   padding: 10px 20px 20px;
   box-sizing: border-box;

} .frontpage .row-fluid::after {

   display: table;
   content: "";
   clear: both;
   line-height: 0;

} .frontpage .fp-block {

   padding: 10px 20px 0;

} .frontpage h3 {

   font-size: 26px;
   line-height: 30px;
   font-weight: 300;
   margin-top: 20px;
   margin-bottom: 20px;

} .frontpage .button {

   text-align: right;

} .empty-region-side-pre.empty-region-side-post #region-main-box, .empty-region-side-pre.empty-region-side-post #region-main {

 width: 100%;

}

  1. settingsnav.box.block_tree_box.p-y-1 {
   padding-top: 0!important;

}


Escuela Monte Naranja

ES Mount Orange screen.png

Escuela Monte Naranja en gnomio.com o milaulas.com

ES Mount Orange screen en gnomio.png

Selector de temas

Un administrador puede configurar un tema gráfico para el sitio en Configuraciones > Administración del sitio > Apariencia > Temas > Selector de Temas.

Los diferentes temas pueden configurarse de acuerdo al 'tipo de dispositivo' - por defecto, antiguo (para navegadores antiguos), móvil y tableta.

Vaya a Configuraciones > Administración del sitio > Apariencia > Temas > Selector de temas

  • Elija el botón de "Seleccionar tema" que está junto al tipo que desea cambiar
  • Descienda para ver las vistas previas de los temas disponibles y elija el botón para "Usar tema" para elegir el tema
  • La pantalla siguiente le dará información acerca del tema. Elija "Continuar"

Nota 1: Moodle cacha los temas, por lo que si no ve inmediatamente los cambios de las configuraciones que esperaba, elija el botón para "Limpiar cachés de temas" en la parte superior de la página del selector de temas.

Nota 2: El tema seleccionado puede ser anulado si han sido permitidos temas de usuario/curso o categoría en la Configuración de temas.

Tip: El Tema Mi Teléfono Móvil estaba especialmente diseñado para dispositivos móviles en Moodle 2.7 a 3.0.

Vea también