Mi primer Theme (NukeET) sin tablas con: Alex Aguiar

¿Qué es un theme?

Bueno todo sera explicado en mis terminos ok? Un theme es todo lo visual en tu web, un estilo diferente con imagenes colores y tal. Todo parte de una plantilla.

¿Que es una plantilla?

Es la "imagen" o "diseño" previo que deseas implementar (maquetar) en tu sitio. Donde la puedes crear en tu editor favorito de "diseño". (Fireworks, Photoshop, Gimp, Paint, etc...)

Ya tenemos todo lo "basico" (en idea) para hacer un jodido theme. Imaginaros que ya tenemos la plantilla. Plub (imagen 1.0).

(img 1.0) Recordad que lo de hoy es la velocidad de su sitio... menos imagenes=menos carga asi que si pueden usar colores en lugar de imagenes haganlo, igual que las imagenes repetitivas 1px de ancho si es repetitiva horizontalmente y viceversa cuando es vertical.

Haz click aqui para bajar el PNG editable de esta plantilla

Imaginando el sitio antes de maquetar.

Sencillo haber tenemos; Cabecera, izquierda, centro, derecha y Pie. Ahora debemos partir en la mente, claro viendo vuestra imagen a maquetar..., las zonas de nuestro sitio, pero antes expliquemos estas. Zonas:

Cabecera.- O bien HEADER, es la parte superior de nuestro sitio.

Izquierda.- Aqui se alojaran todos los bloques de la izquierda

Centro.- Aqui se alojaran todos los bloques del centro y las noticias

Derecha.- Aqui se alojaran todos los bloques de la derecha

Haremos una especie de "arbol"... ok? Donde inconcientemente con conocimientos basicos de html, ya tendremos el codigo casi listo. Entonces tenemos. (Parece xml jeje).

/* En la CABECERA (HEADER) tendremos alojado el fondo, el slogan del sitio y el menú */
<CABECERA>
<SLOGAN>Tu Logo</SLOGAN>
<MENU>Inicio | Tu cuenta | Descargas | Foros</MENU>
</CABECERA>
/* Ahora tenemos el CONTENIDO donde tendremos el cuerpo (BODY) de nuestra web y este contiene los “BLOQUES", IZQUIERDA, CENTRO, DERECHA y por esta ocasión el PIE */
<CONTENEDOR>
<IZQUIERDA>Bloques de la izquierda</IZQUIERDA>
/* Aquí en el centro Irán las noticias también o el modulo que tengamos en la pagina de inicio */
<CENTRO>
Bloques del centro
<NOTICIAS>Noticias en el inicio de la pagina</NOTICIAS>
</CENTRO>
<DERECHA>Bloques de la derecha</DERECHA>
<PIE>Pie de pagina de nuestro sitio copyright etc</PIE>
</CONTENEDOR>

Esta claro; No?, pues aquí mas grafico para entenderlo por completo(imagen 1.1).

(img 1.1) Pues si nuestra imagen para maquetarla se divide en dos en "CABECERA" y en "CONTENEDOR" y estas contienen otras secciones dentro.

Cortando Imagenes.

Aquí no tardaremos mucho ya que si supieron hacer su “imagen" a maquetar
sabrán como cortar las secciones. Sino pues a lo obvio cuantas imágenes tenemos? O bien cuantas no se pueden suplir por color de fondo?... pues en este caso solo una, la de la cabecera así que cojemos el rectángulos que hace el degradado y abrimos un nuevo documento, ya que tengamos el alto exacto al que queremos, le ponemos en el lienzo que mida 1px de ancho lo guardamos en jpg o como gusten y listo.
(si aun no saben cortar se hablara de esto en otro manual)

QUE HAGO!!!? HELP!!! S.O.S.

Aquí es la parte donde muchos llegan y pocos terminan (me incluyo) ya que tenemos nuestra “imagen" o “diseño", y ya tenemos todo cortado, pero ahora que?, el siguiente paso… es abrir un nuevo documento html, en vuestro editor favorito, utilizaremos Dreamweaver CS4, pero pueden usar cualquiera, copiamos nuestro código anterior recuerdan?.... y pegamos en el html. Tan solo cambiamos las etiquetas en mayusculas y colocamos “DIV" ok? Y el nombre que tenia en mayúsculas le asignamos como una una clase (class="") en CSS que luego haremos en este archivo. (Los estilos) y queda así.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="cabecera">
   <div class="slogan">Tu Logo</div>
   <div class="menu">Inicio | Tu cuenta | Descargas | Foros</div>
</div>
<div class="contenedor">
   <div class="izquierda">Bloques de la izquierda</div>
   <div class="centro">Bloques del centro
         <div class="noticias">Noticias en el inicio de la pagina</div>
   </div>
   <div class="derecha">Bloques de la derecha</div>
   <div class="pie">Pie de pagina de nuestro sitio copyright etc</div>

</div>

Creando el Theme.

Bien nos vamos nuestra carpeta de “themes" en nuestro sitio desde el ftp o si estas en local o como sea. Y creamos una carpeta con el nombre que deseen, yo le llamare “MiPrimerThem-Art", y en ella creamos una carpeta con el nombre “images" y otra de nombre “style" en esta ultima es donde meteremos el corazón de nuestra web; el archivo “style.css" que luego veremos. En nuestro documento anterior de html lo guardaremos como “theme.php" y lo meteremos en la carpeta de nuestro theme (MiPrimerThem-Art), ok no es php pero tenemos que guardarlo así por que tendrá sentencias o bien trozos de código php para que nuestro NukeET sepa interpretar el theme.

Insertando Funciones

Si algo esta incorrecto por favor corregirme por mail, que no se mucho php, pero funciona perfecto no os preocupeis pueden continuar leyendo.
En estas funciones indicaremos las zonas de nuestro sitio en el código.
Con nuestro HTML anterior arriba del primer “div" (cabecera) agregamos la primera función.

1
2
3

<? function themeheader(){?>
<div class="cabecera">
<div class="slogan">Tu Logo</div>

Hasta ahí vamos bien… no hay que hacer mas nada… ahora vamos con los bloques, es muy sencillo. Lo colocamos dentro de izquierda agregándole 2 “div" mas uno para el titulo de los bloques y otro para el contenido del mismo así.

1
2
3
4
5
6
7
8
9

Listo ya tenemos el bloque izquierdo... Ahora nos vamos a la parte del centro, y empezamos con los bloques.

1
2
3

<? function OpenTable() { echo'<div class="centro">'; } /* Abrimos el bloque central y su “div” */
function CloseTable(){ echo'</div>'; } /* Cerramos el bloque central y si “div” */
} /* Cerramos el head */ ?>

Ya podemos poner tranquilamente los “div” para las noticias del inicio de nuestro sitio y al del modulo
(cuando pulsen en leer mas…).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<? function themeindex /* Esta funcion muesta la noticia en la pagina de inicio */
($aid,$informant,$time,$title,$counter,$topic,$thetext,$notes,$morelink,$topicname, $topicimage,$topictext)
{global $tipath; /* De preferencia no movamos nada de lo anterior */
        echo '<div>'.$title.'</div> /* este es el titulo de la noticia */
        <div class="cuerpo_noticia">'.$thetext.'</div> /* este es el cuerpo de la noticia */
        <div class="leer_mas">'.$morelink.'</div>'; /* este es la caja de “leer mas y comentarios” */
        }/* Cerramos el themeindex */
function themearticle /* Esta funcion es para el leer mas cuando estamos en el modulo NEWS */ ($aid,$informant,$datetime,$title,$thetext,$topic,$topicname,$topicimage,$topictext)
{global $tipath;/* De preferencia no movamos nada de lo anterior */
echo '<div>'.$title.'</div> /* este es el titulo de la noticia */
         <div class="cuerpo_noticia">'.$thetext.'</div>'; /* este es el cuerpo de la noticia */
       }/* Cerramos el themearticle */
function themefooter(){/* aprovechamos para abrir el foot y lo cerramos hasta el final del documento */ ?>

Ahora nos falta los bloques de la derecha pero como ya le dimos la funcion de los bloques en "bloque izquierda" para poner los de la derecha es tansolo este codigo

1
2
3

Y listo ya tenemos nuestro theme solo falta cerrar el fot poner el copy y nos vamos a darle una estructura a nuestro codigo para que sea mas facil maquetar para luego darle estilos a nuestro theme que por ahora solo tenemos la estructura simple falta ponerle mas divisiones. Por ultimo le ponemos el footer o pie de pagina.

1
2
3
4
5
6

<div class="footer">Web site engine code is Copyright © 2003 by <a href="http://phpnuke.org">PHP-Nuke</a>. All Rights Reserved. PHP-Nuke is Free Software released under the <a href="http://www.gnu.org" target="_blank">GNU/GPL license</a>.Nuke ET Copyright © 2004-2006 por <a href="http://www.truzone.org">Truzone</a>. Theme: MiPrimerThem-Art: By <a href="http://zoneartcss.com" target="_blank">Akilesart</a> © 2008.</div>

<? /* Alex Aguiar alexkaguiar@gmail.com zoneartcss.com */ } ?>

Y listo todo el codigo les quedaria de esta manera.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<? function themeheader(){?>

<div class="cabecera">
<div class="slogan">Tu Logo</div>
<div class="menu">Inicio | Tu cuenta | Descargas | Foros</div>
</div>

<? function themeindex /* Esta funcion muesta la noticia en la pagina de inicio */
($aid,$informant,$time,$title,$counter,$topic,$thetext,$notes,$morelink,$topicname, $topicimage,$topictext)
{global $tipath; /* De preferencia no movamos nada de lo anterior */
echo '<div class="titulo_noticia">'.$title.'</div> /* este es el titulo de la noticia */
<div class="cuerpo_noticia">'.$thetext.'</div> /* este es el cuerpo de la noticia */
<div class="leer_mas">'.$morelink.'</div>'; /* este es la caja de “leer mas y comentarios” */
}/* Cerramos el themeindex */
function themearticle /* Esta funcion es para el leer mas cuando estamos en el modulo NEWS */ ($aid,$informant,$datetime,$title,$thetext,$topic,$topicname,$topicimage,$topictext)
{global $tipath;/* De preferencia no movamos nada de lo anterior */
echo '<div class="titulo_noticia">'.$title.'</div> /* este es el titulo de la noticia */
<div class="cuerpo_noticia">'.$thetext.'</div>'; /* este es el cuerpo de la noticia */
}/* Cerramos el themearticle */
function themefooter(){/* aprovechamos para abrir el foot y lo cerramos hasta el final del documento */ ?>

<div class="footer">Web site engine code is Copyright © 2003 by <a href="http://phpnuke.org">PHP-Nuke</a>. All Rights Reserved. PHP-Nuke is Free Software released under the <a href="http://www.gnu.org" target="_blank">GNU/GPL license</a>.Nuke ET Copyright © 2004-2006 por <a href="http://www.truzone.org">Truzone</a>. Theme: MiPrimerThem-Art: By <a href="http://zoneartcss.com" target="_blank">Akilesart</a> © 2009.</div>

<? /* Alex Aguiar alexkaguiar@gmail.com zoneartcss.com */ } ?>

ATENCION!!!: el codigo anterior si copian y pegan en su "theme.php" si funcionara pero falta organizarlo un poco vale? darle mas estructura y ponerle mas divisiones, cosa que hablaremos en el punto de abajo.

Creando el theme.php

El codigo anterior era solo de ejemplo para que entendieran com funciona el HTML y las sentencias en PHP pero ahora si vamos al verdadero codigo, porfavor lean, vean, y comprendan, y no copien y peguen que sino no servira de nada mi esfuerzo y el suyo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<? function themeheader(){?>

      <ul>
         <li><a href="#">Inicio</a></li> |
         <li><a href="#">Tu cuenta</a></li> |
         <li><a href="#">Descargas</a></li> |
         <li><a href="#">Foros</a></li>

   <div class="izquierda">
      <? function themesidebox($titulo, $contenido){ ?>
      <h1><? echo $titulo; ?></h1>
      <div class="contenido"><? echo $contenido; ?></div>
      <? }global $name;if ($name<>"Forums")blocks(left); ?>

</div>

<? function OpenTable() { echo'<div class="centro">'; }function CloseTable(){ echo'</div>'; }} ?>

      <? function themeindex($aid,$informant,$time,$title,$counter,$topic,$thetext,$notes,$morelink,$topicname, $topicimage,$topictext) {global $tipath;
      echo '<h1 class="titulo_noticia">'.$title.'</h1>
      <div class="cuerpo_noticia">'.$thetext.'</div>
      <div class="leer_mas">'.$morelink.'</div>';
      }
      function themearticle ($aid,$informant,$datetime,$title,$thetext,$topic,$topicname,$topicimage,$topictext){global $tipath;
      echo '<h1 class="titulo_noticia">'.$title.'</h1>
      <div class="cuerpo_noticia">'.$thetext.'</div>';
      }
      function themefooter(){?>

</div>

   <div class="derecha">
      <? global $name;if ($name<>"Forums")blocks(right);?>
   </div>

</div>
<? /* Alex Aguiar alexkaguiar@gmail.com zoneartcss.com */ } ?>

Listo ahora si el codigo anterior ya es el final para empezar a dar estilos a nuetro theme. pero antes para los que son muy nuevos en esto del CSS les hablare un poco no mucho pero lo suficiente para comprender un poco de que va este lenguaje.

Explicando un poquito sobre CSS

Bueno no soy un programador ni nada, así que no soy muy hábil en CSS, pero tengo el conocimiento necesario para hacer todo lo que yo necesite, entonces no habra problema en mostrarles mis costumbres o maneras de tratar con este lenguaje.
Primero lo básico para dar estilos es importante saber a quien se lo estamos dando ok?... Es un poco tedio pero es fácil si tienes paciencia y un poco de razonamiento.
Cuando damos un estilo es necesario saber si es a una etiqueta html o una clase o a una ID. Y en castellano se traduce a:

Etiqueta HTML o bien <div></div>
Esta propiedad CSS le dará el estilo a todas las etiquetas “div” de nuestro sitio,
(esta propiedad se le puede dar a otras etiquetas, table, span, h1, etc..)

/* Esto le dará un margen en la parte superior de 15px*/
div{ margin-top:15px; }

Estilo a una clase .miclase

Esta propiedad CSS le dará el estilo a una o varias clases en nuestro sitio dependiendo a que elementos se la hayamos asignado en nuestro código html.
(no importa si la etiqueta html es un “div” o cualquier otro, ya que tendrá el estilo que le demos en el siguiente código, aquí lo importante es la clase y no su etiqueta.)

/* Esto le dará un margen en la parte superior de 15px*/
.miclase{ margin-top:15px; }

Estilo a una ID #ESTILO
Esta propiedad CSS le dará el estilo a nuestra ID que por reglas HTML no se debe repetir en nuestro documento.
(a veces si querer se repite nuestra id, para estos casos se debe asignar una clase ya que un ID debe ser único. )

/* Esto le dará un margen en la parte superior de 15px*/
#ESTILO{ margin-top:15px; }

El punto es que cuando es una etiqueta HTML se escribe tal cual es, si es un “div” en el CSS es “div { }”, cuando es una clase lleva un punto antes
“.miclase { }” y cuando es una ID lleva un signo de gato antes “#ESTILO”.
En fin un tutorial de CSS no me siento cómodo para hacer ya que es muy extenso así que solo explicare las propiedades que usemos.
Ahora ya sabemos lo básico para darle estilos a nuestro código ya que sin el nuestro theme ahora esta feo y todo desordenado.

Dando Estilos CSS al Theme

Bueno ya al lio, a darle estilos a esto, tratare de ser lo mas breve, igual como ustedes aun estoy aprendiendo asi que muy al 100% nose CSS pero aqui vamos juntos a ver que sale vale? bueno...
Ya tenemos bueno en mi caso la carpeta "MiPrimerThem-Art" que es asi como se llamara mi theme dentro de esta se supone que ya tenemos otra con el nombre de "style" (como se indica en el inicio del mini-manual) que en ella crearemos un archivo con el nombre de "style.css" y lo abrimos con el "DW CS4" o donde gusten y empezamos con las primeras lineas. Perdon por tanta letra pero trate de explicar lo mas claro para que aprendas de una buena vez CSS a nivel basico claro jeje asi que vale la pena, lee porfavor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

*{margin:0;padding:0;}
/*Declaramos que cualquier objeto no tenga ni margen ni relleno*/
/*Le agregamos el "text-align:center" para que IE nos centre la web, ya que estamos trabajando con "XHTML 1.0 Transitional" y la version que trae el nuke es otra es "HTML 4.01 Transitional" y para eso le puse este "FIX" pero tranquilos que luego en las capas de "cabecera" y "contenedor" dejamos el texto denuevo a la izquierda*/
body{background:#232117;text-align:center;font-size:100%;font-family:Arial;}
/*EL cuerpo de nuestra pagina tendra fondo negro*/
/*Tambien le daremos una posision relativa para que nuestro logo y menu que esten flotando (posision absoluta) no se salgan de nuestra pagina*/
/*Al hacer esto ".cabecera, .contenedor" poner dos clases y separarlas con una coma "," quiere decir que los estilos se le daran a estas 2 clases*/
.cabecera, .contenedor{width:1003px;margin:10px auto;text-align:left;position:relative;}
/* la propiedad "repeat-x" quiere decir que esta imagen se repetira solo horizontalmente*/
.cabecera{background:url(../imagenes/hdbg.jpg) repeat-x; height:197px;}
/*Le damos la posision aboluta y con left y top colocamos la caja donde queremos*/
/*el line-height alinea el texto verticalmente*/
.slogan{position:absolute;left:10px;top:20px;height:62px;width:249px;background:#5CADCD;color:#0783B3;font-size:36px;line-height:1.6em;padding-left:20px;}
.menu{position:absolute;height:32px;top:165px;left:33%;right:33%;text-align:center;background:#232117;color:#A7A794;}
/*Cuando pongo ".menu" y luego SIN COMA (",") le pongo otra clase, etiqueta, o ID (#) esto quiere decir que solo tendra estilo si valga la redundancia una clase, etiqueta, o ID (#) esta dentro de esta ejemplo todas las etiquetas HTML "ul" que esten dentro de la clase ".menu" tendran un "padding-top:10px ok?, y todos los "li" que esten dentro de un "ul" y ala vez esten dentro de la clase ".menu" unicamente estos tendran esos estilos*/
.menu ul{padding:10px;}
/*el "display:inline" es para mostrar en este caso las etiquetas "li" en la misma linea es decir una junto a otra y no verticalmente como viene por defult, igual se puede usar el "float:left" que hara que todas las listas se floten a la izquierda dando el mismo efecto*/
.menu ul li{list-style:none;display:inline;padding:0 5px;}
/*El "text-decoration:none" es para quitar el molesto subrayado en los links*/
.menu ul li a{color:#A7A794;text-decoration:none;}
/*El display:inline-block es un pequeño fix para que muestre tal cual el tamaño de nuestra caja y respete el tamaño y el salto de linea ademas la altura de nuestros elementos "hijo" o bien nuestras 3 columnas.*/
.contenedor{background:#E6E7CF; display:inline-block; padding-top:10px;}
/*Le puse a las 3 columnas que se floten a la left para que esten una junto a otra, y el padding para que tengan un espacio entre estas.*/
.izquierda, .cent, .derecha, .contenido{float:left;padding:0 5px;width:178px;}
.contenido{ padding:0;}
/*El tamaño se lo volvi a dar a esta clase para que este mas grande, y no tener que dar las mismas propiedades de nuevo*/
.cent{width:613px;}
/*Aveces se puede ahorrar lineas como en este caso no puse "border-color" | "border-style" | "border-width" sino que lo hize todo lo que necesitaba en una sola propiedad, dandole el tamaño estilo y color, el "dotted" es un borde punteado*/
.centro{ border:2px dotted #A7A794; padding:5px; width:600px;}
.izquierda h1, .derecha h1{ width:178px;}
h1{ color:#7D7D68; font-size:15px; background:#CDCFA0; border:1px solid #A7A794; text-align:center;}
.cuerpo_noticia, .contenido{ background:#EEEFDE; border:solid #A7A794; margin-bottom:20px; border-width:0 1px 1px;}
.cuerpo_noticia{ margin:0;}
/* en este caso use el border-width recordemos que para el paddin, el margin, border, etc, podemos usar el "1, 2, 3 y 4" el uno es "arriba"-"derecha"-"abajo"-"izquierda" esto es en el orden de las manecillas del reloj es muy util para ahorrar lineas y en este caso lo hice de esta manera por que queria que muestre el borde de los lados y abajo, y arriba NO.*/
.leer_mas{ background:#DBDCBA;border:solid #A7A794; border-width:0 1px 1px; color:#6F4A00; font-size:12px;}
.leer_mas a{ color:#6F4A00;}
/*Usar el "clear:both" es para fijar este div siempre debajo de sus capas anteriores, aveces se usan cajas vacias con esta propiedad para que explorer respete bien los saltos de linea cuando la etiqueta "br" en html se pasa de largo o bieno no la muestra.*/
.footer{ clear:both; text-align:center;border-top:2px dotted #A7A794;}

Descarga el PNG Editable
Descarga el Theme Funcionando

NOTA!!!: Cuando hacemos themes sin tablas aveces hay problemas en NUKEET ya que siempre le damos tamaños fijos a las capas. y algunos modulos estan muy anchos, hay varias opciones para solucionar estos problemas, como dependiendo de cada modulo tenga "x" hoja de estilos o quitar los bloques como hacemos con los foros, o igual hacer como en este theme le puse al "overall_header.tpl" en la carpeta "forums" donde le digo que ".cent" y ".centro" sean mas grandes" seria modificar el index de cada modulo de esta manera, enfin para mas info pide ayuda en Truzone.

Gracias y Suerte

Para ZoneArtCSS: http://zoneartcss.com
E-Mail: alexkaguiar@gmail.com

Crea Tu Propio Theme en NukeET.

Mi primer Theme (NukeET) sin tablas con: Alex Aguiar

¿Qué es un theme?

¿Que es una plantilla?

Imaginando el sitio antes de maquetar.

Cortando Imagenes.

QUE HAGO!!!? HELP!!! S.O.S.

Creando el Theme.

Insertando Funciones

Creando el theme.php

Explicando un poquito sobre CSS

Dando Estilos CSS al Theme

Gracias y Suerte