|
En este Manual explicaré cómo hacer un theme utilizando archivos
HTML. En lo personal, me parece la forma más práctica, hay mejor
organización y al momento de hacer modificaciones es más sencillo
y rápido.
Primero creamos la carpeta del theme, vamos a nombrarla PC-HTML. Dentro de
la carpeta PC-HTML crea los siguientes archivos:
1. theme.php
2. blocks.html
3. header.html
4. footer.html
5. left_center.html
6. center_right.html
7. story_home.html
8. story_page.html
Dentro de la carpeta PC-HTML crea las siguientes carpetas:
1. images
2. style
Dentro de las carpetas images y style crea un archivo index.html sin contenido.
Dentro de la carpeta style crea un archivo llamado style.css
Aquí está el archivo theme.php que vas a utilizar. Revísalo,
estúdialo, pero por ahora no lo modifiques.
Archivo theme.php (presiona para copiar el archivo)
Copia y lo guardas con el nombre theme.php en la carpeta PC-HTML.
Si leíste el manual Cómo hacer un Theme, ya conoces el funcionamiento
básico, lo diferente de este modelo, es que casi no escribimos código
directamente sino que llamamos archivos externos. Por ejemplo la función
themefooter:
function themefooter() {
global $index, $foot1, $foot2, $foot3, $foot4, $copyright, $totaltime, $footer_message;
if ($index == 1) {
$tmpl_file = "themes/PC-HTML/center_right.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
blocks(right);
}
$tmpl_file = "themes/PC-HTML/footer.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
echo "<center>\n";
$footer_message = footmsg();
echo "<br>\n";
}
Como ves al inicio remarcado en negrita, se está llamando
al archivo themes/PC-HTML/center_right.html, es decir, lo que
esté en ese archivo se integra a la función themefooter. Más
abajo se llama igualmente al archivo themes/PC-HTML/footer.html.
Si deseas hacer tu propio theme, puedes utilizar este archivo como base, sólo
tienes que cambiar el nombre del theme, donde dice PC-HTML,
por el nombre de tu theme.
Ahora vamos con el archivo header.html
<table class="bodyline" width="100%"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="110" bgcolor="#F0F0F0" align="left"><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="400" height="110">
<param name="movie" value="themes/PC-HTML/images/logo.swf"><PARAM
NAME=wmode VALUE=transparent><PARAM NAME=menu VALUE=false>
<param name="quality" value="high">
<embed src="themes/PC-HTML/images/logo.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
width="400" height="110"></embed></object></td>
<td bgcolor="#F0F0F0" width="300" height="110"
background="themes/PC-HTML/images/logoder.gif"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="right" valign="top"><a
href="index.php"><img src="themes/PC-HTML/images/home.gif"
border="0" width="24" height="21" alt="Inicio"></a><a
href="modules.php?name=Forums"><img src="themes/PC-HTML/images/forums.gif"
border="0" width="24" height="21" alt="Foros"></a><a
href="modules.php?name=Search"><img src="themes/PC-HTML/images/search.gif"
border="0" width="24" height="21" alt="Buscar"></a><a
href="modules.php?name=Submit_News"><img src="themes/PC-HTML/images/sent.gif"
border="0" width="24" height="21" alt="Enviar
Noticia"></a><a href="modules.php?name=Your_Account"><img
src="themes/PC-HTML/images/account.gif" border="0" width="24"
height="21" alt="Tu Cuenta"></a></td>
</tr>
<tr>
<td height="60" align="right" valign="bottom"
width="100%"><font class="head">$theuser</font> <br>
<font class="head">Hoy es <script type="text/javascript">
<!-- // Array ofmonth Names
var monthNames = new Array( "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre");
var now = new Date();
thisYear = now.getYear();
if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem
document.write(monthNames[now.getMonth()] + " " + now.getDate() +
" del " + thisYear);
// -->
</script></font> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellpadding="0"
cellspacing="0" border="0" align="center">
<tr valign="top">
<td valign="top" width="1" background="themes/PC-HTML/images/pixel.gif">
Ahora una breve explicación:
Es una tabla aninada, es decir, una dentro de otra. La principal tiene un class
llamado "bodyline", que está definido en el archivo style.css
(puedes revisarlo). Esto produce una línea que rodea toda la página.
La tabla interior está dividida en dos celdas, y la celda de la derecha
tiene una tabla dividida en dos filas.
La celda izquierda tiene un Flash que en este caso es el Logo. Integro un logo
en flash para que vean lo sencillo que es.
El código del flash es color chocolate, y resaltado
en negrita pueden ver el código
para hacer el flash transparente.
En la celda de la derecha , fila superior, están las imágenes
que forman un pequeño menú de navegación (cuando instales
el theme lo verás). En la celda derecha, fila inferior, está $theuser
(Bienvenido NOMBRE!) y un renglón abajo un script
que dice el día y año.
Más abajo, en rojo, una tabla abierta que
se cierra en el archivo footer.html. Cuando hagas un theme recuerda esta parte
que es muy importante.
Continuamos con el archivo footer.html
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="4">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
En rojo, el cierre de la tabla que abrimos en
el header.html. Los espacios en blanco puedes usarlos
para colocar banners o lo que quieras.
Archivo left_center.html
</td><td valign="top" width="100%">
Es el final de la celda izquierda y el inicio de la celda central.
Archivo center_right.html
</td><td valign="top" width="165">
Es el cierre de la celda central y el inicio de la celda derecha.
Archivo blocks.html
<table width="165" border="0"
cellspacing="0" cellpadding="5">
<tr>
<td><table width="165" border="0" cellspacing="0"
cellpadding="1">
<tr>
<td bgcolor="#F0F0F0"><table width="100%" border="0"
cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#F7F7F7"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td height="30" bgcolor="#F0F0F0"><table width="100%"
border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="block-title"><strong>$title</strong></font></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="4">
<tr>
<td><font class="content">$content</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
Es un conjunto de tablas anidadas que forman un borde un tanto más oscuro.
Arriba el $title, que es donde aparece el título
del bloque. En el medio el $content, donde aparece
el contenido del bloque y más abajo una celda con 10 de alto que deja
un espacio en blanco bajo el contenido.
Archivo story_home.html
<table width="100%" border="0"
cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="1">
<tr>
<td bgcolor="#F0F0F0"><table width="100%" border="0"
cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#F7F7F7"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td height="30" bgcolor="#F0F0F0"><table width="100%"
border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="storytitle"><b>$title</b></font></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="4">
<tr>
<td><a href="modules.php?name=News&new_topic=$topic"><img
src="$tipath$topicimage" border="0" alt="$topictext"
title="$topictext" align="right" hspace="10" vspace="10"></a><font
class="storycontent">$content</font></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><table width="100%" border="0"
cellspacing="0" cellpadding="4">
<tr>
<td nowrap><div align="center">
<font class="content">$posted</font><br>
<font class="content">$morelink</font></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Celdas anidadas que producen el mismo efecto que en los bloques. Las noticias
en la portada del Nuke. Al inicio vemos el $title,
que sin duda ya sabes que es, más abajo la imágen
del tópico (es un link), y justo al lado el $content,
o contenido. Luego el $posted, que es donde se
llama los textos Enviado por nick el
día, # mes a las hora(#
Lecturas), y $morelink, que es (Leer
más... | # bytes más | ¿Comentarios? |
Puntuación #).
Archivo story_page.html
<table width="100%" border="0"
cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="1">
<tr>
<td bgcolor="#F0F0F0"><table width="100%" border="0"
cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#F7F7F7"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td height="30" bgcolor="#F0F0F0"><table width="100%"
border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="storytitle"><b>$title</b></font></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0"
cellpadding="4">
<tr>
<td><a href="modules.php?name=News&new_topic=$topic"><img
src="$tipath$topicimage" border="0" alt="$topictext"
title="$topictext" align="right" hspace="10" vspace="10"></a><font
class="storycontent">$content</font></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><table width="100%" border="0"
cellspacing="0" cellpadding="4">
<tr>
<td nowrap><div align="center">
<font class="content">$posted</font></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Casi lo mismo que en el story_home.html. Esta parte es visible al presionar
"Leer más" en alguna noticia. La única diferencia es
que no agregamos $morelink.
Terminamos con los archivos HTML, ahora vamos con el archivo style.css
que está en la carpeta style del theme
FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
TD {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
P {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
DIV {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
.bodyline{background: #FFFFFF; border:
1px solid #E9E8E8}
body{background: #FFFFFF;color: #000000;font:10px Verdana,Arial,Helvetica,sans-serif;scrollbar-3dlight-color:
#FFFFFF;scrollbar-arrow-color: #FFFFFF;scrollbar-darkshadow-color: #FFFFFF;scrollbar-face-color:
#F0F0F0;scrollbar-highlight-color: #F7F7F7;scrollbar-shadow-color: #FFFFFF;scrollbar-track-color:
#F7F7F7;}
hr { height: 0px; border: solid #F0F0F0 0px; border-top-width:
1px;}
a:link,a:active,a:visited{color:#000000;text-decoration:underline; FONT-SIZE:
10px}
a:hover{color: #BFBEBE;text-decoration:none; FONT-SIZE: 10px}
.title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 14px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica}
.block-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY:
Verdana, Helvetica}
.storytitle {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT:
bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY:
Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.tiny {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.small {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 9px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.head {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: normal;
FONT-FAMILY: Comic Sans MS, Verdana, Helvetica; TEXT-DECORATION: none}
.footmsg {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 9px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
Es cuestión de copiar, pegar y nombrar al archivo style.css, lo colocas
en la carpeta style y listo. Puedes observar el bodyline que mencioné
anteriormente, el área en que modificas el color de las barras de desplazamiento,
en fin, Hojas de Estilo. Quien no tenga idea sobre el asunto,
pone esa palabra en google y encontrará información.
Por último las imágenes que se las agrego en
la descarga.
Es todo señoras y señores, espero les sirva de algo...., por
cierto, hay mucho más sobre themes que puedo decir, pero eso en el próximo
manual.
Este theme es sumamente sencillo, sin embargo ante la reciente aparición
de una comunidad de lammers que no tienen la creatividad suficiente para hacer
sus propios diseños, me veo obligado a nombrar este theme de manera oficial
como PC-HTML, sólo para evitar cualquier confusión, que quieran
ponerle otro nombre o peor aún que se llamen "los creadores del
diseño".
Aquí tienen el link para descargar el theme completo. Si crean los archivos
manualmente, usen las imágenes incluidas en la descarga.
Link: PC-HTML.rar
Tamaño: 32879 bytes
Psico
Prohibido Reproducir este Manual en otro Sitio
Web
Copyright © por DWDpa Derechos Reservados.
Views: 3902
Solo los usuarios registrados pueden agregar sus comentarios.
Por favor, vaya a login, o regístrese. |
