|
Bueno, en este manual trataré de explicar cómo hacer un theme de
cero, yo no me concidero un experto en el tema, sin embargo con lo mencionado
aquí tendrás la base suficiente para crear un theme sencillo. Comenzamos
Para aplicar el contenido de este Manual, es indispensable tener dominio del
lenguaje HTML, conocimientos básicos del PHP y el Funcionamiento del
Nuke.
Algunas Herramientas:
1. Bloc de Notas, también puedes usar el Dreamweaver
y otros programas Editores de texto.
2. Un Programa de Edición de imágenes. Los más recomendados
Adobe Photoshop, Paint Shop Pro.
3. Un programa que te ayude a descifrar colores. Te recomiendo el Color
to HTML que está en las descargas.
Vamos a crear un theme básico, para ello se debe crear:
1. Un archivo theme.php
2. Un archivo style.css, que ponemos dentro de una carpeta
llamada style.
3. Creamos otra carpeta llamada images (con las imágenes
del theme).
4. Agregamos un index.html a cada carpeta.
Ahora vamos a poner contenido
1. El archivo theme.php contiene la estructura del theme, tablas, header (la
parte superior), la forma en que se presentan las noticias, la forma de los
bloques, y el footer (la parte de abajo).
Entonces cada una de estas áreas se representa en una función,
que son las siguientes:
OpenTable() define la apertura y el estilo de las tablas.
CloseTable() define el cierre de la tablas del nuke.
ThemeHeader() define el estilo del cuerpo de la página
y la parte superior.
FormatStory() define el formato de las noticias.
ThemeIndex() define la estructura general de las noticias.
ThemeArticle() define la estructura de las noticias al presionar
Leer más....
ThemeSideBox() define la estructura de los bloques.
Ya tenemos las funciones ahora vamos a ponerle contenido:
Lo primero que incorporamos en el archivo theme.php son los colores que vamos
a utilizar. Esto se hace de una forma muy práctica para que todas las
secciones de la página se rigan por estos Colores.
$bgcolor1 = "#F6F4D7";
$bgcolor2 = "#D7F6F6";
$bgcolor3 = "#7DCEBA";
$bgcolor4 = "#7D8FCE";
$textcolor1 = "#000000";
$textcolor2 = "#FFFFFF";
Listo.., ahora cada vez que que querramos utilizar el color #F6F4D7, lo que
escribimos es $bgcolor1. Esto tiene su utilidad para los desarrolladores, por
ejemplo si alguien crea un módulo puede utilizar la variable $bgcolor1
de fondo y con esto logra que el módulo se adapte a los colores de cualquier
theme.
Entonces definimos 4 colores de fondo y dos colores de texto.
Ahora vamos con la función OpenTable() y CloseTable(),
las dos tablas.
function OpenTable() {
global $bgcolor1, $bgcolor2;
echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\"
cellpadding=\"0\" bgcolor=\"$bgcolor2\"><tr><td>\n";
echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\"
cellpadding=\"2\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}
function CloseTable() {
echo "</td></tr></table></td></tr></table>\n";
}
function OpenTable2() {
global $bgcolor1, $bgcolor2;
echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"0\"
bgcolor=\"$bgcolor2\" align=\"center\"><tr><td>\n";
echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"2\"
bgcolor=\"$bgcolor1\"><tr><td>\n";
}
function CloseTable2() {
echo "</td></tr></table></td></tr></table>\n";
}
Tenemos las tablas listas, como ves se utilizan las variables $bgcolor1, $bgcolor2
para definir colores.
El código es HTML básico, en los OpenTable están las etiquetas
de apertura y en las CloseTable las de cierre.
Aquí por ejemplo puedes mezclar los colores y también definir
la distancia de apertura con los cellspacing y cellpadding (en el Curso HTML
se explica qué es).
Esta función es la más utilizada en el contenido del Nuke. Cada
vez que deseamos abrir una tabla escribimos Opentable(); y
para cerrar la tabla escribimos Closetable();. Por ejemplo:
<?php
if (!stristr($_SERVER['SCRIPT_NAME'], "modules.php")) {
die ("You can't access this file directly...");
}
require_once("mainfile.php");
include("header.php");
Opentable();
?>
Aquí el contenido
<?php
Closetable();
include("footer.php");
?>
Si creas un módulo con este contenido, verás que la frase "Aquí
el contenido" aparece dentro de una tabla. Esta es la forma de utilizar
esta función.
Continuamos con el Formato de Noticia, FormatStory()
/************************************************************/
/* Function FormatStory() */
/************************************************************/
function FormatStory($thetext, $notes, $aid, $informant) {
global $anonymous;
if ($notes != "") {
$notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
} else {
$notes = "";
}
if ("$aid" == "$informant") {
echo "<font class=\"content\">$thetext$notes</font>\n";
} else {
if($informant != "") {
$boxstuff = "<a href=\"modules.php?name=Your_Account&op=userinfo&username=$informant\">$informant</a>
";
} else {
$boxstuff = "$anonymous ";
}
$boxstuff .= ""._WRITES." \"$thetext\"$notes\n";
echo "<font class=\"content\">$boxstuff</font>\n";
}
}
Formato de Noticia Listo. Aquí es donde se define por ejemplo el estilo
en Cursiva de los envíos, dependiendo de quién envió la
Noticia. Por ejemplo si eres Administrador las letras de la noticia son normales
y si eres un Usuario las noticias aparecerán en Cursiva. El cambio que
puedes hacer aquí es quitando las cursivas para los envíos de
noticias, esto lo haces modificando donde dice <i>\"$thetext\"</i>,
lo pones así \"$thetext\".
Lo demás queda igual. Las variables que hace referencia están
definidas en otros archivos.
Seguimos con la función ThemeHeader()
/************************************************************/
/* Function themeheader() */
/************************************************************/
function themeheader() {
global $admin, $user, $banners, $sitename, $slogan, $cookie, $prefix, $db, $nukeurl,
$anonymous;
echo "<body bgcolor=\"#000000\">";
if ($banners) {
include("banners.php");
echo "<br>";
}
// Lo que viene es el la tabla de arriba, con el logo y el menú horizontal
echo"<table width=\"100%\" border=\"0\" cellpadding=\"0\"
cellspacing=\"0\">"
. " <tr>"
. " <td height=\"20\" bgcolor=\"#7DCEBA\"><table
width=\"100%\" border=\"0\" height=\"20\" cellpadding=\"0\"
cellspacing=\"0\" background=\"themes/PC/images/bar2.gif\">"
. " <tr>"
. " <td height=\"20\" width=\"50%\"> Bienvenid@
a $sitename</td>"
. " <td height=\"20\"> </td>"
. " <td height=\"20\" align=\"right\"><a href=\"index.php\">Inicio</a>
:: <a href=\"modules.php?name=Search\">Buscar</a> :: <a
href=\"modules.php?name=Private_Messages\">MP</a></td>"
. " </tr>"
. " </table></td>"
. " </tr>"
. " <tr>"
. " <td height=\"50\" bgcolor=\"#F6F4D7\"><table
width=\"100%\" border=\"0\" bgcolor=\"#F6F4D7\"
cellpadding=\"0\" cellspacing=\"0\">"
. " <tr>"
. " <td width=\"50%\"><a href=\"index.php\"><img
border=\"0\" src=\"themes/PC/images/logo.gif\"></a></td>"
. " <td background=\"themes/PC/images/logo2.gif\"> </td>"
. " </tr>"
. " </table></td>"
. " </tr>"
. " <tr>"
. " <td height=\"25\" bgcolor=\"#7DCEBA\"><table
width=\"100%\" border=\"0\" cellpadding=\"0\"
cellspacing=\"0\" background=\"themes/PC/images/bar2.gif\">"
. " <tr>"
. " <td width=\"20%\" height=\"25\">$slogan</td>"
. " <td align=\"center\" width=\"60%\"><a
href=\"index.php\">Inicio</a> :: <a href=\"modules.php?name=Your_Account\">Tu
Cuenta</a> :: <a href=\"modules.php?name=Downloads\">Descargas</a>
:: <a href=\"modules.php?name=Submit_News\">Enviar Noticia</a>
:: <a href=\"modules.php?name=Topics\">Temas</a></td>"
// <---- ahí está el menú horizontal
. " <td align=\"right\" width=\"20%\">©
$nukeurl</td>"
. " </tr>"
. " </table></td>"
. " </tr>"
. "</table>\n";
//aquí termina
//lo que sigue es la división en tres columnas que por lo general se
usa, sus tablas quedan abiertas porque se cierran en el footer
$public_msg = public_message();
echo "$public_msg<br>";
echo "</td></tr></table><table width=\"100%\"
cellpadding=\"0\" bgcolor=\"000000\" cellspacing=\"0\"
border=\"0\">\n"
."<tr valign=\"top\">\n"
."<td> </td>\n"
."<td width=\"138\" bgcolor=\"000000\" valign=\"top\">\n";
blocks(left);
echo "</td><td> </td><td width=\"100%\">\n";
}
Esta sí que está un tanto larga. Al principio agrego un par de
Variables ($banners, $sitename, $slogan, $nukeurl), estas me permiten llamar
funciones en algunas partes. Por ejemplo ven que al escribir "$slogan",
en la página aparece el Slogan configurado, también escribí
"Bienvenid@ a $sitename" y en la página leerás
Bienvenido a NOMBRE DE LA PÁGINA..., bueno seguro ya
tienes la idea para qué sirven.
Agregué el color de fondo en la etiqueta BODY que es
donde se abre el cuerpo de la página . En esta etiqueta también
puedes agregar una imagen de fondo (background=\"URL.gif\").
Sigue la estructura de la tabla, le agregué color y una imagen de fondo
en las celdas de arriba y abajo. Está marcado el inicio y final de la
tabla superior para que sepas dónde modificar. Puedes cambiar al número
de Celdas, la posición y el tamaño de cada una.
Esta área
es muy configurable y puedes hacer bastantes variaciones, primero haciendo las
celdas y luego agregando imágenes y colores.
Luego agregué donde aparecen los mensajes públicos ($public_msg),
y abajo de eso están las tres divisiones de la página... (derecha,
centro, izquiera), y les agregué el color #000000 de fondo.
Continuamos con el ThemeIndex()
Aquí definimos la forma en que se mostrarán las Noticias
/************************************************************/
/* Function themeindex */
/************************************************************/
function themeindex ($aid, $informant, $time, $title,
$counter, $topic, $thetext, $notes, $morelink, $topicname, $topicimage, $topictext)
{
global $anonymous, $tipath;
echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"
width=\"100%\"><tr><td bgcolor=\"#31407B\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\"
width=\"100%\"><tr><td bgcolor=\"#F6F4D7\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"
width=\"100%\"><tr><td bgcolor=\"#F6F4D7\">\n"
."</td><td width=\"100%\" bgcolor=\"#7DCEBA\"><font
class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#F6F4D7\"><br>\n"
."<table border=\"0\" width=\"98%\" align=\"center\"><tr><td>\n"
."<a href=\"modules.php?name=News&new_topic=$topic\"><img
src=\"$tipath$topicimage\" alt=\"$topictext\" border=\"0\"
align=\"right\"></a>";
FormatStory($thetext, $notes, $aid, $informant);
echo "</td></tr></table>\n"
."</td></tr></table><br>\n"
."</td></tr><tr><td bgcolor=\"#7DCEBA\"
align=\"center\">\n"
."<font class=\"tiny\">"._POSTEDBY." ";
formatAidHeader($aid);
echo " "._ON." $time $timezone ($counter "._READS.")<br></font>\n"
."<font class=\"content\">$morelink</font></center><br>\n"
."</td></tr></table>\n"
."</td></tr></table><br>\n";
}
Este es el modelo básico, el Título resaltado arriba, texto en
el centro y luego lo de Enviado por..., Comentarios y demás.
Igual que antes se inicia declarando las funciones que utilizaremos, más
abajo llamamos estas funciones y otras que corresponden al archivo de idioma
que tienes configurado por defecto:
$title = Título de la Noticia
$topicimage = la imagen del Tópico
$topictext = texto que aparece al pasar sobre la imagen
"._POSTEDBY." = Enviado por
"._ON." = el
$time $timezone ($counter "._READS.") = el día,
la hora y el número de lecturas
$morelink = Contiene Leer más..., el peso en bytes,
¿Comentarios? y la Puntuación. Esta variable se define en el archivo
index.php del módulo News.
Y qué puedes hacer ?..., bueno..., podrías agregar imágenes
en la parte superior y la inferior o ponerle una imagen de fondo. Si te estás
preguntando ¿Y Dónde diablos hago eso ?, la respuesta es muy sencilla:
Simplemente agrega los background justo al lado de las áreas en que coloqué
los colores, la mejor forma es utilizando el método más eficiente,
"Ensayo y Error". También puedes cambiar la disposición
de todo el contenido, por ejemplo puedes mover la imagen del tópico en
una celda a la izquierda o hacer que el texto del $morelink
aparezca en una celda sobre el contenido de la Noticia. Es cuestión de
crear la tabla, acomodar las celdas y luego le agregas todas las variables en
el lugar que quieres que aparezcan.
Continuamos con la Función themearticle
Como expliqué anteriormente, aquí se define la apariencia de las
noticias al presionar "Leer más..."
El formato también es básico y casi todos los themes usan el mismo.
/************************************************************/
/* Function themearticle */
/************************************************************/
function themearticle ($aid, $informant, $datetime, $title,
$thetext, $topic, $topicname, $topicimage, $topictext) {
global $admin, $sid, $tipath;
echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"
width=\"100%\"><tr><td bgcolor=\"#31407B\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\"
width=\"100%\"><tr><td bgcolor=\"#7DCEBA\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"
width=\"100%\"><tr><td bgcolor=\"#7D8FCE\">\n"
."</td><td width=\"100%\" bgcolor=\"#7DCEBA\"><font
class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#F6F4D7\"><br>\n"
."<table border=\"0\" width=\"98%\" align=\"center\"><tr><td>\n"
."<a href=\"modules.php?name=News&new_topic=$topic\"><img
src=\"$tipath$topicimage\" alt=\"$topictext\" border=\"0\"
align=\"right\"></a>";
FormatStory($thetext, $notes="", $aid, $informant);
echo "</td></tr></table>\n"
."</td></tr></table><br>\n"
."</td></tr></table>\n"
."</td></tr></table><br><br>\n";
}
Los cambios deben ser los mismos que hiciste en función themeindex para
que se vean iguales.
Seguimos con function themesidebox
Aquí se define la apariencia de los bloques laterales, ancho, color,
imágenes.
/************************************************************/
/* Function themesidebox */
/************************************************************/
function themesidebox($title, $content) {
echo "<table border=\"0\" align=\"center\" width=\"140\"
cellpadding=\"0\" cellspacing=\"0\">"
."<tr><td align=\"center\" background=\"themes/PC/images/title.gif\"
height=\"20\">"
."<b>$title</b>"
."</td></table>\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"
width=\"140\">\n"
."<tr><td width=\"140\" bgcolor=\"#70BBA9\">\n"
."<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\"
width=\"140\">\n"
."<tr><td width=\"140\" background=\"themes/PC/images/back-block.gif\"
bgcolor=\"#7DCEBA\">\n"
."$content"
."</td></tr></table></td></tr></table><br>";
}
La modificación es bastante sencilla. Creamos la tabla y definimos ancho
y los espacios de celdas en cero (cellpadding y cellspacing), claro que varías
esto de acuerdo a tu diseño. Abrimos la primera celda le agregregamos
una imagen de fondo y luego colocamos la variable $title para
que aparezca el título del bloque.
Sigue la celda donde aparecerá el contenido, le agregué color
de fondo para que se muestre mientras que baja la imagen de fondo que tiene
los mismos colores. Luego la variable $content para que en
ese lugar se muestre el contenido del bloque y cerramos la tabla.
Y para terminar con el archivo theme.php agregamos la función themefooter()
Aquí se define la parte de abajo del Nuke.
/************************************************************/
/* Function themefooter() */
/************************************************************/
function themefooter() {
global $index;
echo "<br>";
if ($index == 1) {
echo "</td><td> </td><td valign=\"top\"
width=\"140\" bgcolor=\"000000\">\n";
blocks(right);
echo "<td> ";
}
else {
echo "</td><td colspan=\"2\"> ";
}
echo "<br><br></td></tr></table>\n"
."<br><center>";
footmsg();
echo "</center>";
}
Lo único que varias es el color de fondo en los bloques derechos, que
en este caso es negro (#000000). Lo demás son las etiquetas de cierre
y el mensaje que escribas en los pies de página desde Preferencias.
Así terminamos el archivo theme.php, ahora unimos todas las funciones
para formar el archivo theme.php:
Presiona aquí para que veas el archivo theme.php completo.
Ahora vamos a crear otro archivo del theme, llamado style.css
Esta es la Hoja de Estilo de la página en donde se define
los colores de:
1. Fondo de la página
2. Scroll Bars
3. Texto
4. Links
El tamaño de las letras del texto y los links, color de fondo, y estilo.
Iniciamos este archivo describiendo las características del Texto en
diferentes circunstancias, por ejemplo:
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
Con esto decimos que el texto del cuerpo del documento utilizará tales
tipos de letra con un tamaño de 10px.
Definimos la apariencia de las letras al utilizar etiquetas específicas,
por ejemplo:
textarea{border-color: #ffffff;color:#000000;font:normal
10px Verdana,Arial,Helvetica}
Esto quiere decir que en una Textarea la letras y el fondo tendrán las
características especificadas.
Hacemos otra definición del Body más abajo y le agregamos las
características de las letras del theme y los scroll
bars.
body{color: #000000;font:10px Verdana,Arial,Helvetica,sans-serif;scrollbar-3dlight-color:
#FFFFFF;scrollbar-arrow-color: #FFFFFF;scrollbar-darkshadow-color: #FFFFFF;scrollbar-face-color:
#000000;scrollbar-highlight-color: #c0c0c0;scrollbar-shadow-color: #FFFFFF;scrollbar-track-color:
#c0c0c0;}
Luego definimos las características de los links:
A:link {BACKGROUND: none; COLOR: #000000; FONT-SIZE:
10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:active {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
A:hover {BACKGROUND: c0c0c0; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
Una breve explicación:
A:link = los links normales
A:active = los links cuando presionas
A:visited = los links que ya presionaste
A:hover = la apariencia cuando pasas sobre un link
Ya sabes lo que modificas en cada caso, lo demás es que hagas una buena
combinación.
Luego vienen los Class:
.title {BACKGROUND: none; COLOR: #000000; FONT-SIZE:
13px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana,
Helvetica}
.storytitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 14px; FONT-WEIGHT:
bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 11px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 12px; FONT-FAMILY:
Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; 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}
.footmsg {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE:
8px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION:
none}
.footmsg_l {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 8px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.box {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px; border: 1px solid #000000;
background-color: #FFFFFF}
Estas se utilizan cuando quieres aplicar una modificación en algún
texto específico. Por ejemplo mira las características de .footmsg,
define el tipo de letra, color, tamaño..., entonces si estás escribiendo
un texto y quieres que una palabra o frase específica tenga esas características
puedes hacerlo como vez en este ejemplo:
PHP-Nuke es el <span class="footmsg">Sistema
Generador de Portales</span> más avanzado.
El efecto sería que en la frase "Sistema Generador de Portales"
el texto sería de color #CCCCCC, con tamaño 8px, etc.
Espero que haya quedado claro cómo funcionan las hojas de estilo, para
qué sirven y cómo utilizarlas.
Entonces escribo la Hoja de Estilo Completa para el 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}
INPUT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
TEXTAREA {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
FORM {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
A:link {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
A:active {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
A:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica; TEXT-DECORATION: underline}
.title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana,
Helvetica}
.storytitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 13px; FONT-WEIGHT:
bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 10px; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY:
Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 12px; 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}
.footmsg {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 8px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.footmsg_l {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 8px; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.box {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px; border: 1px solid #000000;
background-color: #FFFFFF}
Haz las modificaciones de color, tamaño etc., tomando como base esta
hoja
Recuerda guardar tu Hoja de Estilo con el nombre style.css
en la carpeta style junto a un archivo index.html
sin contenido.
Bueno..., ya casi terminamos sólo faltan las imágenes.
Para que puedas usar el theme de este Manual te voy a anexar las imágenes
que están definidas en el header y en los bloques. Debes copiarlas y
las pones en la carpeta images de tu theme.
Es sólo para que tengas un ejemplo, las imágenes son bastante
sencillas. Guarda las imágenes con el nombre que tienen a un lado en
la carpeta images. Nombra al theme ----> PC (para que se
puedan leer las imágenes).
bar2.gif
back-block.gif
title.gif
leftbar.gif
mainbar.gif
rightbar.gif
Recuerda que a todas las carpetas debes agregarle un archivo index.html sin
contenido, en general son 3:
La carpeta principal del theme
La carpeta style
La carpeta images
Ahora sí..., hemos terminado con este Manual, espero que les sirva para
entender un poco más el Nuke por lo menos. El Theme que resulta de este
Manual no es gran cosa en cuanto a diseño grafico, es sólo para
que sepan cómo hacerlo, depende de cada uno la creación de un
buen paquete de imágenes para decorar el Theme.
**Si quieres ver este theme, debes crearlo con el nombre PC
y pones el theme PC en la carpeta themes con sus archivos.
Saludos...
Psico
Prohibido Reproducir este Manual en otro Sitio
Web
Copyright © por DWDpa Derechos Reservados.
Views: 5481
Solo los usuarios registrados pueden agregar sus comentarios. Por favor, vaya a login, o regístrese. |