Tutorial showing how to adapt a HTML/CSS template to XOOPS CMS

2. Es un sistema de administración de contenido (CMS) poderoso, flexible y fácil de usar, que está escrito en lenguaje PHP; nos permite a los administradores manejar sitios Web dinámicos, construir comunidades en línea, gestionar usuarios, modificar la estructura del sitio y proveer de contenido a través de una interfaz sencilla. XOOPS maneja todo “lo difícil” dejándote en libertad de concentrarte en el contenido de tu sitio.
Panel de Control

3. •Veremos paso a paso como adaptar plantillas en HTML y CSS a nuestro sistema XOOPS no importando si es responsivo o no
•Aprenderemos como está compuesto una plantilla XOOPS para poder adaptarla a la nuestra
•Conoceremos los códigos de inserción que nos permitirán mostrar el contenido personalizado de los bloques de cada módulo de XOOPS
•Atajos con los bloques (mediante su ID)
•Aprenderemos como cambiar nuestro themeprincipal por uno secundario para mostrar el contenido de una noticia por ejemplo.
•Al final estandarizaremos procesos para evitar errores y equivocaciones
Temas a tratar

4. •No veremos nada relacionado a como hacer plantillas o temas en HTML y CSS
•Tampoco veremos como hacer módulos o personalizar código fuente de los módulos
•No se explicará como instalar XOOPS de forma local ni en servidor
•Solo se explicará como insertar el código que hará que nuestro tema funcione con cualquier módulo en XOOPS pero no se explicará a profundidad en el tema.
Temas:

5. Ayudar a los principiantes a entender
como están compuestos los themes o
plantillas en XOOPS y puedan tener un
mayor manejo de las plantillas y a su vez
del contenido de sus sitios web
Ayudarlos a estandarizar el proceso de
adaptación de sus plantillas en HTML y
CSS para poder ser usados en XOOPS sin
que se pierdan en el camino
Para todos aquellos programadores y
desarrolladores les ayudará de igual
forma a adaptar una plantilla en HTML y
CSS a XOOPS sin preocuparse de que
salgan mal las cosas
A Principiantes A Diseñadores Experimentados

6. •Tener instalado XOOPS de forma local (con XAMPP, WAMP o similares)
•Editor de código HTML y CSS (Se recomienda en un principio Dreamweaver)
•Tener elaborada una plantilla en HTML y CSS que contenga una sección de portada y otra para mostrar una noticia
•Conocimientos básicos a intermedios de programación en HTML y CSS (sobre todo este último)
•Módulo Publisher instalado (para el caso del ejemplo solamente)
•Paciencia
Requisitos:

7. 1.El headero encabezado de la página de internet
2.Columna izquierda
3.Columna superior izquierda
4.Columna superior central
5.Columna superior derecha
6.Columna inferior izquierda
7.Columna inferior central
8.Columna inferior derecha
9.Columna derecha
10.Pie de página
Está compuesta así:
1
2
3
4
5
6
7
8
9
10

8. Agregar esos códigos directamente en nuestro tema en HTML y CSS.
En la parte del header(encabezado) y el footer(pie de página) el código lo agregamos tal y como lo vemos aquí. Mientras que en el caso de las columnas se agregará mediante la instrucción “include”.
En cualquiera de los casos, veremos la forma de hacerlo más adelante de forma práctica.
Lo que haremos será:
1.<{$xoops_module_header}>
2.<{assign var=theme_namevalue=$xoTheme->folderName}>
theme_blockcenter_c.html
theme_blockcenter_r.html
theme_blockcenter_l.html
theme_blockleft.html
theme_blockcenter_l.html
theme_blockcenter_c.html
theme_blockcenter_r.html
theme_blockright.html
<{$xoops_footer}>

10. 1.Haremos la carpeta con nuestro tema y la pondremos en la carpeta “Themes” de nuestra instalación en XOOPS. Le pondremos el nombre de nuestra plantilla a la carpeta y pondremos los archivos ahí dentro. Después cambiaremos el nombre del archivo index.htmlpor theme.htmly colocaremos los archivos htmlde los bloques.
2.Actualizaremos los links de los scripts y las imágenes que use nuestra plantilla con el código <{xoImgUrl}> sustituyéndolo por el de la ubicación que traían.
3.Colocaremos el código que hace referencia a nuestros bloques en el lugar que hemos designado para que aparezca el contenido.
4.Agregaremos el código CSS de nuestro bloques para fijar el estilo de la información.

11. Haremos una carpeta dentro de la carpeta “themes” donde hayamos instalado XOOPS y le pondremos el nombre que queramos. Después colocaremos los todos los archivos de nuestro tema dentro de la carpeta.
Por último colocaremos los archivos HTML que corresponden a los bloques que son:
•theme_blockcenter_c
•theme_blockcenter_l
•theme_blockcenter_r
•theme_blockleft
•theme_blockright
•Index.html
Haremos lo siguiente:
En nuestro caso hemos hecho una carpeta con ese nombre

12. Primero actualizaremos cada enlace en nuestro tema agregando el código <{xoImgUrl}> en la ubicación como se ve en la imagen de la izquierda. Esto lo haremos tanto para scripts como para imágenes.
Después agregaremos código propio de XOOPS antes y abajo del <head> que explicaremos a continuación.
Por último colocaremos el código correspondiente al pie de página siendo este opcional.
Haremos 2 cosas:
De esta forma se verá con el código agregado a cada enlace

13. Como vemos en la imagen de la izquierda, sustituiremos todo el contenido que estaba en un principio y lo cambiaremos por el código que hará que funcionen nuestros bloques y pueda verse el contenido de nuestros módulos.
El código también lo facilitaremos en este tutorial y explicaremos algunos tipssobre la forma de uso de los bloques para mostrar contenido.
La forma de agregarlos

14. Es necesario para que los menús de usuario y administrador así como los bloquesprincipalmente tengan su correspondiente estilo. Sin esto, nos vamos a encontrar que no se muestran correctamente los menús y que no va acorde a nuestro tema.
Este es el paso final y a partir de aquí pueden modificar el CSS de los menús y de cada bloque para que se muestre con el estilo que más les convenga.
¿Por qué agregarlo?

16. Es un módulo que nos permitirá cambiar de plantilla o tema que tengamos instalado en XOOPS, y asignársela a un módulo.
Por ejemplo, al módulo Publisher podemos asignarle la plantilla que hemos elaborado, mientras que al módulos de sistema podemos asignarle la plantilla que trae por default XOOPS desde su instalación.
Definición

17. •Iremos a la pestaña Page Manager
•Damos click en el botón Agregar
•En Page Module escogemos el módulo que queramos que cambie la plantilla, en nuestro caso, Publisher.
•En Page Title, ponemos cualquier nombre que queramos.
•En Page URL lo dejamos como está.
•Y por último en Page Display, dejamos la opción por default que es: SÍ.
•Al final hacemos click en Enviar.
Primer paso del proceso

18. •Iremos a la pestaña ThemeManager.
•Damos click en el botón Agregar
•En Page escogemos la página que creamos recientemente.
•En Themeescogemos la plantilla la cual se usará cada que entemosa ese módulo.
•Por último hacemos click en Enviar.
Segundo paso del proceso

20. El ID de un bloque es un número identificador que XOOPS usa para ordenar los bloques de cada bloque. Por lo que en cada instalación de XOOPS este número puede variar.
Nosotros podemos usar dicho número para desplegar la información de un bloque de manera manual de la siguiente manera.
Definición

21. •Primero debemos colocar el cursor sobre el símbolo Clonardel bloque del cual queramos conocer su ID, sin hacer click sobre el.
•Después si nos fijamos en la parte de abajo del navegador, en donde aparece la dirección a la apuntan los enlaces de una página web, nos fijaremos que al final nos aparece un número. Ese número es el ID del bloque, el cual podremos usarlo en nuestro sitio de la siguiente forma.
La forma es muy sencilla

22. •Lo único que debemos hacer es identificar el lugar en donde queremos que se muestra la información de un bloque.
•Después solo colocamos la instrucción <{block id= >} seguido del número del bloque.
•Con esto habremos integrado un bloque manualmente a nuestro sitio web en XOOPS.