Adapting HTML and CSS Templates to XOOPS CMS

23

description

Excellent tutorial about "Adapting HTML and CSS Templates to XOOPS CMS". Also available a video showing the process in details...

Transcript of Adapting HTML and CSS Templates to XOOPS CMS

Page 1: Adapting HTML and CSS Templates to XOOPS CMS
Page 2: Adapting HTML and CSS Templates to XOOPS CMS

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

Page 3: Adapting HTML and CSS Templates to XOOPS CMS

• 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 theme principal por

uno secundario para mostrar el contenido de una noticia por ejemplo.

• Al final estandarizaremos procesos para evitar errores y equivocaciones

Temas a tratar

Page 4: Adapting HTML and CSS Templates to XOOPS CMS

• 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:

Page 5: Adapting HTML and CSS Templates to XOOPS CMS

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

ExperimentadosA DiseñadoresA Principiantes

Page 6: Adapting HTML and CSS Templates to XOOPS CMS

• 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:

Page 7: Adapting HTML and CSS Templates to XOOPS CMS

1. El header o encabezado de la página de internet

2. Columna izquierda3. Columna superior izquierda4. Columna superior central5. Columna superior derecha6. Columna inferior izquierda7. Columna inferior central8. Columna inferior derecha9. Columna derecha10. Pie de página

Está compuesta así:1

2

3 4 5

6 7 8

9

10

Page 8: Adapting HTML and CSS Templates to XOOPS CMS

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_name value=$xoTheme->folderName}>

theme_blockcenter_c.html

theme_blockcenter_r.html

theme_blockcenter_l.html

them

e_blo

ckleft.htm

l

theme_blockcenter_l.html

theme_blockcenter_c.html

theme_blockcenter_r.html

them

e_blo

ckright.h

tml

<{$xoops_footer}>

Page 9: Adapting HTML and CSS Templates to XOOPS CMS
Page 10: Adapting HTML and CSS Templates to XOOPS CMS

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.html por theme.html y colocaremos los archivos html de 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.

Page 11: Adapting HTML and CSS Templates to XOOPS CMS

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

Page 12: Adapting HTML and CSS Templates to XOOPS CMS

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

Page 13: Adapting HTML and CSS Templates to XOOPS CMS

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 tips sobre la forma de uso de los bloques para mostrar contenido.

La forma de agregarlos

Page 14: Adapting HTML and CSS Templates to XOOPS CMS

Es necesario para que los menús de usuario y administrador así como los bloques principalmente 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?

Page 15: Adapting HTML and CSS Templates to XOOPS CMS
Page 16: Adapting HTML and CSS Templates to XOOPS CMS

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

Page 17: Adapting HTML and CSS Templates to XOOPS CMS

• 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

Page 18: Adapting HTML and CSS Templates to XOOPS CMS

• Iremos a la pestaña ThemeManager.

• Damos click en el botón Agregar

• En Page escogemos la página que creamos recientemente.

• En Theme escogemos la plantilla la cual se usará cada que entemos a ese módulo.

• Por último hacemos click en Enviar.

Segundo paso del proceso

Page 19: Adapting HTML and CSS Templates to XOOPS CMS
Page 20: Adapting HTML and CSS Templates to XOOPS CMS

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

Page 21: Adapting HTML and CSS Templates to XOOPS CMS

• Primero debemos colocar el cursor sobre el símbolo Clonar del 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

Page 22: Adapting HTML and CSS Templates to XOOPS CMS

• 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.

Page 23: Adapting HTML and CSS Templates to XOOPS CMS