Crear su Primer Tema Moodle Completo

Así que vamos a crack on

Crear un nuevo tema

Encontrar un tema base para crear su tema Moodle es lo primero que necesita hacer.Sin embargo, hay varias maneras de hacer esto; puede hacer una copia del tema estándar y cambiarle el nombre como lo hizo en parte de este artículo, o puede usar un tema principal que también esté basado en el tema estándar.

El punto importante aquí es que el tema estándar que viene con Moodle es la piedra angular del proceso de tematización de Moodle. Cualquier otro tema de Moodle debería estar basado en este tema, y normalmente describiría las diferencias con respecto al tema estándar. Aunque este método funciona y es una manera simple de comenzar con la tematización de Moodle, sí causa problemas ya que se podrían agregar nuevas características a Moodle que podrían causar que su tema se muestre o funcione incorrectamente. El tema estándar siempre se actualizará antes de que se lance una nueva versión de Moodle. Por lo tanto, si elige hacer una copia del tema estándar y cambiar sus estilos, lo mejor sería asegurarse de que también use un tema principal. De esta manera, el tema principal será su tema base junto con los cambios que realice en su copia del tema estándar.

Sin embargo, hay otra forma de crear su primer tema, y es crear una copia de un tema que esté muy cerca del tema estándar, como standardwhite, y usarlo como tema. Moodle entonces usará el tema estándar como su tema base y aplicará cualquier cambio que usted haga al tema blanco estándar en la parte superior (padre). Todo lo que estamos haciendo es describir las diferencias entre los temas estándar y estándar blanco. Esto es mejor porque los desarrolladores de Moodle a veces harán cambios en el tema estándar para estar al día con las nuevas características de Moodle. Esto significa que en cada actualización de Moodle, su carpeta de tema estándar se actualizará automáticamente, evitando así cualquier problema desagradable de visualización causado por las actualizaciones de Moodle.

La forma en que configure los temas de Moodle depende completamente de usted. Si ves un tema que es casi lo que quieres y no se necesitan muchos cambios, entonces usar un tema principal tiene sentido, ya que la mayoría de los estilos que necesitas ya se han escrito. Sin embargo, si desea crear un tema que sea completamente diferente de cualquier otro tema o desea realmente entrar en la tematización de Moodle, entonces usar una copia de una de las hojas estándar sería lo mejor.

Así que continuemos y veamos cuáles son las diferencias al usar diferentes configuraciones de temas, y veamos qué efecto tienen estos diferentes métodos en el proceso de tematización.

• Busque en su carpeta de temas en C: Archivos de programa, Caché de software, Fundación de software, Caché 2.2 htdocstheme.
• Copie el tema estándar haciendo clic con el botón derecho en la carpeta del tema y eligiendo Copiar.
• Pegue el tema copiado en el directorio del tema (el mismo directorio en el que se encuentra actualmente).
• Cambie el nombre de la copia de la carpeta estándar a blackandblue o a cualquier otro nombre que desee elegir (recuerde no usar mayúsculas ni espacios).
• Abra su sitio Moodle y vaya a Apariencia de Administración del Sitio / Temas / Selector de Temas|, y elija el tema blackandblue que acaba de crear.

Puede que haya notado que el tema mostrado en la captura de pantalla anterior tiene un encabezado que dice Tema Negro y Azul. Esto se debe a que he agregado esto al nombre completo del sitio en la página de configuración de la página principal.

Tiempo para la acción – establecer un tema para padres

1. Abra su navegador web y navegue a su sitio Moodle e inicie sesión como administrador.
2. Vaya a Administración del sitio | Apariencia | Temas | Selector de temas y elija su tema blackandblue si aún no está seleccionado.
3. Vaya a la raíz de su carpeta blackandblue, haga clic con el botón derecho en la configuración.archivo php, y elija Abrir con / WordPad.

4. Debe realizar cuatro cambios en este archivo para poder usar este tema y un tema principal, al tiempo que se asegura de seguir utilizando el tema estándar predeterminado como base. Aquí están los cambios:

   THEME THEME->sheets = array('user_styles');
   THEME THEME->standardsheets = true;
   THEME THEME->parent = 'autumn';
   THEME THEME->parentsheets = array('estilos');

   Echemos un vistazo a cada una de estas instrucciones, a su vez.

    THEME THEME - > sheets = array ('user_styles');

   Contiene los nombres de todos los archivos de hojas de estilo que desea incluir en este tema blackandblue, es decir, estilos de usuario.

   THEME THEME - > standardsheets = true;

   Este parámetro se utiliza para incluir las hojas de estilo del tema estándar. Si se establece en True, utilizará todas las hojas de estilo del tema estándar. Alternativamente, se puede configurar como una matriz para cargar hojas de estilo individuales en el orden que se requiera. Hemos establecido esto en True, por lo que usaremos todas las hojas de estilo del tema estándar.

    THEME THEME - > parent = 'autumn';

   Esta variable se puede configurar para usar un tema como tema principal, que se incluye antes del tema actual. Esto hará que sea más fácil realizar cambios en otro tema sin tener que cambiar los archivos reales.

   THEME THEME - >parentsheets = array ('estilos');

   Esta variable se puede usar para elegir todas las hojas de estilo del tema principal o archivos individuales. Se ha configurado para incluir los estilos.archivo css del tema principal, es decir, otoño. Debido a que solo hay una hoja de estilo en el tema de otoño, puede establecer esta variable en True. De cualquier manera, tendrás el mismo resultado.

5. Guardar la configuración de black y blueconfig.php, y actualice la ventana de su navegador web. Deberías ver algo similar a la siguiente captura de pantalla. Tenga en cuenta que sus bloques pueden ser diferentes a los de abajo, pero puede ignorar esto.

¿Qué acaba de pasar?

Bien, así que ahora tienes una copia del tema estándar que usa el tema de otoño (de Patrick Malley) como su padre. Es posible que haya notado que el encabezado no es correcto y que el encabezado del tema de otoño adecuado no se muestra. Bueno, esto se debe a que esencialmente está utilizando la copia del tema estándar y que el encabezado de este tema es el que ve arriba. Solo se incluyen los archivos CSS en esta jerarquía, por lo que los cambios en HTML no se verán hasta que edite el encabezado de su tema estándar.archivo html.

Ten un héroe listo: elige otro tema para padres

Regresa y echa un vistazo a algunos de los temas en Moodle.org y descarga uno que te guste. Agregue este tema como tema principal a la configuración de su tema blackandblue.archivo php, pero esta vez elija qué hojas de estilo desea usar de ese tema. El tema de Regreso a la escuela es bueno para este ejercicio, ya que sus hojas de estilo están claramente etiquetadas. Para que

Copie los archivos de encabezado y pie de página

Para mostrar que está utilizando los archivos CSS del tema de otoño y los archivos HTML del tema estándar, puede ir y copiar el encabezado.html y pie de página.archivos html del tema Otoño de Patrick Malley y pégalos en la carpeta de tu tema blackandblue. No se preocupe por sobrescribir sus archivos de encabezado y pie de página, ya que siempre puede copiarlos de nuevo desde la carpeta de tema estándar ac tual.

Tiempo de acción: copiar el encabezado.html y pie de página.archivos html

1. Vaya a la carpeta del tema de otoño y resalte el encabezado.html y pie de página.archivos html manteniendo pulsada la tecla Ctrl y haciendo clic en ambos. Haga clic con el botón derecho en los archivos seleccionados y elija Copiar.
2. Vaya a la carpeta de su tema blackandblue y haga clic con el botón derecho y elija Pegar.
3. Vuelva a la ventana de su navegador y presione el botón F5 para actualizar la página. Ahora verás el tema completo de otoño.

¿Qué acaba de pasar?

Ha copiado el encabezado del tema de otoño.html y pie de página.archivos html en su tema blackandblue, para que pueda ver el tema de otoño completo funcionando. Es probable que en realidad no use el encabezado.html y pie de página.archivos html que acaba de copiar, ya que esto era solo un ejemplo de cómo funciona el proceso de tematización de Moodle.

Por lo que ahora tiene una copia sin modificar del tema estándar llamado blackandblue, que utiliza el tema de otoño como su tema principal. Todo lo que necesita hacer ahora para realizar cambios en este tema es editar su archivo CSS en la carpeta de temas blackandblue.

Carpeta de temas tareas domésticas

Sin embargo, hay un par de cosas que debe hacer primero, ya que tiene una copia exacta del tema estándar aparte del encabezado.html y pie de página.archivos html. Esta carpeta copiada tiene archivos que no necesita, ya que el único archivo que configuró para su tema fue user_styles.archivo css en la configuración.archivo php anterior. Este fue el primer cambio que hizo:

THEME THEME->sheets = array('estilos de usuario');

El estilo de usuario.el archivo css no existe en la carpeta de tu tema blackandblue, por lo que tendrás que crearlo. También tendrá que eliminar cualquier otro archivo CSS que esté presente, ya que su nuevo tema blackandblue usará solo una hoja de estilos, a saber, user_styles.archivo css que va a crear en las siguientes secciones.

Tiempo para la acción: crear nuestra hoja de estilos

1. Haga clic con el botón derecho en cualquier lugar de su carpeta blackandblue y elija Nuevo documento de texto|.
2. Cambie el nombre de este documento de texto a estilos de usuario.css haciendo clic con el botón derecho de nuevo y eligiendo Renombrar.

Tiempo para la acción: eliminar archivos CSS que no necesitamos

1. Elimine los siguientes archivos CSS seleccionándolos y luego haciendo clic con el botón derecho en los archivos seleccionados y eligiendo Eliminar.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {antecedentes: #000000;}

   

¿Qué acaba de pasar?

En las dos últimas tareas, creó un archivo CSS vacío llamado user_style.css en la carpeta de tu tema blackandblue. A continuación, eliminó todos los archivos CSS de la carpeta del tema blackandblue, ya que ya no los necesitará. Recuerde, estas son solo copias de los archivos CSS en la carpeta de temas estándar y ha configurado su tema para usar el tema estándar como base en la configuración del tema blackandblue.archivo php.

Hagamos algunos cambios

Ahora ha configurado su tema de la manera que lo desea, es decir, está utilizando su propio tema blackandblue utilizando el tema estándar como base y el tema de otoño como padre. Sigue adelante y haz algunos cambios en tu estilo de usuario.archivo css para que pueda ver qué efecto tiene esto en su tema y verificar que toda su configuración.la configuración del archivo php es correcta. Recuerde que todos los estilos actuales se heredan del tema de otoño.

Tiempo para la acción – comprobar nuestra configuración

1. Abra su sitio Moodle con el tema actual (que debería ser negro y azul, pero se parece al tema de otoño).
2. Vaya a la carpeta de su tema blackandblue, haga clic con el botón derecho en el estilo de usuario.archivo css, y elija Abrir. Este archivo debe estar completamente en blanco.

3. Escriba la siguiente línea de CSS para el elemento body y, a continuación, guarde el archivo:

    body {
    background: #000000;
   }

   

4. Ahora actualice la ventana de su navegador. Verás que el fondo ahora es negro.

   

Nota: Al usar Firebug para identificar estilos que se están utilizando, puede que no siempre sea obvio dónde están o qué estilo controla ese elemento de la página. Un ejemplo de esto es el código body {background: #000000;}que acabamos de pegar en nuestro user_style.archivo css. Si hubiéramos usado Firebug para identificar ese estilo, no lo habríamos encontrado. En su lugar, solo eché un vistazo al archivo CSS del tema de otoño. Lo que estoy tratando de decir aquí es que siempre habrá un elemento de hurgar y ensayo y error.

¿Qué acaba de pasar?

Todo parece estar bien, ¿no? Has añadido una declaración de estilo a tu estilo de usuario vacío.archivo css para cambiar el color de fondo, y ha comprobado los cambios en su navegador. Ahora sabe cómo funcionan los temas principales y sabe que solo necesita copiar los estilos de Firebug en su estilo de usuario.archivo css y editar las declaraciones de estilo que deben cambiarse.