Configurar Joomla con css3 responsive
Vamos a crear una plantilla hijo para que al actualizar joomla no la toque. Entramos en la izda en Sistema y en la derecha en Plantillas del Sitio y clicamos en Detalles y archivos de la plantilla Cassiopeia. Ahora arriba clicamos en Crear plantilla secundaria y le ponemos el nombre de child y clicamos en crear plantilla secundaria y cerramos.
Ahora vamos a los archivos y en templates/Cassiopeia copiamos el index.php y lo pegamos en Cassiopeia_child. Ahora en el panel de administración vamos a Sistema y a Estilos de plantillas del Sitio, lo abrimos y asignamos como predeterminada a Cassiopeia_child
Vamos a instalar un plugin para usar scss y tener nuestros estilos personalizados. Primero crea en la raiz de Cassiopeia_child dos carpetas: scss y css con permisos de escritura.
. En scss crea el archivo custom.scss, lo abres y pon por ejemplo body {background:red} guarda y cierra. Ahora descarga el plugin desde https://extensions.joomla.org/extension/scss-compiler/. En el panel de control en Sistema clicas en Gestionar > Extensiones > Instalar Extensiones. Examinas tu pc y clicas doble en el zip del plugin que bajaste y lo instalas. Ahora en la izda en Panel de Inicio clicas en Plugins en la derecha y buscas SCSS y aparecerá el plugin instalado.
En Estado lo habilitas.Lo demás lo dejas tal cual, Guardar y cerrar. Edita el archivo templates/Cassiopeia_child/index.php y debajo de jdoc:include type="styles pegas esto:
<link type="text/css" rel="stylesheet" href="/templates/cassiopeia_child/css/custom.css" />
Y ya puedes poner reglas css en tu archivo scss/custom.scss que se copiarán a css/custom.css
Instalar Materialize en Joomla
Mejor que cargar Materialize en línea nos vamos a bajar el css de https://cdnjs.cloudflare.com . Copias todo el código y lo pegas en un nuevo archivo creado en /templates/Cassiopeia_child/css/materialize.css. Ahora editas el index.php de la plantilla y debajo del estilo que copiaste antes pegas
<link type="text/css" rel="stylesheet" href="/templates/cassiopeia_child/css/materialize.css" />
Ahora tendrás que llamar al javascript con:
< script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha512-NiWqa2rceHnN3Z5j6mSAvbwwg3tiwVNxiAQaaSMSXnRRDh5C2mk/+sKQRw8qjV1vN4nf8iK2a0b048PnHbyx+Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
que copiarás en el index.php justo debajo de jdoc:include type="scripts
Sistema de rejillas con Flexy Boxes
En este enlace Flexy Boxes podrás ver cómo generar rejillas perfectas para diseñar tus contenedores de la web.
En el ejemplo del enlace vemos como crear tres cajas dentro de un contenedor. Si a la primera y tercera caja le decimos con css que ocupe un 20% y a la segunda caja le decimos que ocupe un 50% tendremos un diseño atractivo para crear contenidos.
