Acceso rápido:
Añadir css en moodle
Es muy problemático enviar la salida de depuración al archivo CSS real, en su lugar esta función se supone que diagnostica el tema dado y destaca todos los problemas potenciales. Esta información debería estar disponible en la página de selección de tema o en alguna otra página de depuración para diseñadores de temas.
Este método post procesa todo el CSS antes de ser servido para este tema. Esto se hace para que cosas como las URLs de las imágenes puedan ser intercambiadas y para ejecutar cualquier método específico de post-procesamiento CSS que el tema haya solicitado. Esto permite a los temas utilizar ajustes CSS.
$svg fue introducido como un arg en 2.4. Es importante porque no todos los navegadores soportan el uso de SVG y necesitamos una forma de desactivarlo. Por defecto, SVG no se utilizará a menos que se solicite. Esto se hace por dos razones:
Esta es una característica avanzada. Si quieres hacer un post-procesamiento personalizado en el CSS antes de que salga (por ejemplo, para reemplazar ciertos nombres de variables con valores particulares) puedes dar el nombre de una función aquí.
Esta es una función avanzada. Si desea hacer un post-procesamiento personalizado en el CSS antes de que se emita, puede proporcionar el nombre de la función aquí. La función recibirá un documento de árbol CSS como primer parámetro, y el objeto theme_config como segundo parámetro. No se requiere un valor de retorno, el árbol puede ser editado en el lugar.
¿Cómo se edita una hoja de estilo?
Puede editar o eliminar una hoja de estilo ya adjunta pasando el ratón sobre ella y haciendo clic en Editar para modificarla o en la X para eliminarla. Después de añadir una hoja de estilo, haz clic en Publicar cambios en la esquina superior derecha para aplicar los cambios a las páginas activas que utilizan la plantilla.
¿Cómo modificar el código CSS?
Puede editar un archivo CSS directamente seleccionando las elipses (…) y luego seleccionando Editar código. Este paso abrirá el editor Visual Code para la Web. Seleccione CTRL-S para guardar los cambios. Seleccione Sincronizar en el estudio de diseño para actualizar el CSS y ver los cambios.
Plantillas Moodle
El plugin está desarrollado y probado en el tema Boost del núcleo de Moodle, por lo que también debería funcionar con cualquier tema hijo de Boost, incluyendo el tema Classic del núcleo de Moodle. Sin embargo, puede que no funcione con otros temas.
Stuart está interesado en todo lo relacionado con el e-learning, con intereses específicos en Moodle, la estrategia de e-learning y el desarrollo de negocios. Su experiencia en educación de más de 30 años, su MBA en Negocios Internacionales y su conocimiento de la implementación de sistemas de e-learning, junto con su formación en diseño gráfico, le dan un conjunto de habilidades únicas para proyectos de e-learning.
Stuart está interesado en todo lo relacionado con el e-learning, especialmente en Moodle, la estrategia de e-learning y el desarrollo empresarial. Su experiencia en educación de más de 30 años, su MBA en Negocios Internacionales y sus conocimientos sobre la implementación de sistemas de e-learning, junto con su formación en diseño gráfico, le confieren unas habilidades únicas para los proyectos de e-learning.
Personalización del tema Moodle boost
Un estilo de codificación consistente es importante en cualquier proyecto de desarrollo, y particularmente cuando hay muchos desarrolladores involucrados. Un estilo estándar ayuda a que el código sea más fácil de leer y entender, lo que contribuye a la calidad general.
Con la herramienta RTLCSS-PHP, los estilos se invierten automáticamente cuando el lenguaje es de derecha a izquierda. Sin embargo, como siempre hay algunas excepciones, se pueden añadir comentarios especiales a los archivos CSS para evitar que se volteen las reglas, etc.
Ten en cuenta también que los comentarios en SCSS o LESS no suelen producir el efecto deseado. Cuando trabajes con SCSS y LESS, asegúrate de que tus comentarios RTL especiales se adjuntan a declaraciones CSS puras: nada de @extend
que permite a los desarrolladores forzar la dirección del texto de izquierda a derecha. Esto es especialmente necesario para los campos de formularios como: URLs, rutas de carpetas y aplicaciones a nivel de sistema operativo, colores hexadecimales del tema, nombres de campo de BD en inglés, correos electrónicos, texto en inglés, números, patrones de expresiones regulares, símbolos, fragmentos de código o muestras de configuración.
En la medida de lo posible, un tema limpio no debe contener ningún contenido CSS o LESS. El tema More, en comparación, hereda los estilos CSS para el logotipo del tema Clean, pero también contiene una pequeña cantidad de LESS como ejemplo para cuando se personaliza un tema. Tanto Clean como More heredan completamente todo el CSS de su tema padre ‘Bootstrap Base’.
Desarrollo de temas para Moodle
CSS (Cascading Style Sheets) son archivos codificados que seleccionan elementos de su página y controlan su presentación. Piense en el HTML de su plantilla personalizada como los huesos de su sitio web y en el CSS como la piel de su sitio.
Una vez que haya creado o abierto un archivo CSS existente, realice sus ediciones en el editor de código. Además de CSS estándar, el editor de código soporta variables y macros HubL para facilitar el mantenimiento de tu CSS. Para obtener una vista previa de cómo se renderizará tu HubL, haz clic para activar el interruptor Mostrar salida en la parte superior del editor. Se abrirá un panel a la derecha con la vista previa renderizada.
Los errores que te impidan publicar aparecerán en rojo, mientras que las advertencias generales aparecerán en amarillo. En la parte inferior del editor de código, haz clic en Mostrar detalles para ver más información sobre los errores en la consola de errores y en Ocultar detalles para contraer la consola de errores.
En la consola de errores, habrá enlaces a cualquier lugar donde haya errores o advertencias de HubL en tu código o módulo personalizado. Pasa el ratón sobre los indicadores rojos de error en la parte izquierda del editor de código para ver el error o advertencia en tu código. Al hacer clic en el error, el cursor se desplazará a todos los errores o advertencias de esa línea. Si haces clic en una anotación de la barra de desplazamiento, irás a esa parte del archivo.