Hay 30 invitados en línea
Bienvenido, por favor ingrese sus datos o regístrese aquí
DWDpa es una comunidad dedicada al desarrollo y optimización de sitios Web      |      Requiere programaciòn especial para su sitio Web ?, Diseño Gráfico o simplemente crear su propia página Web ?, contáctenos      |      Posicionamiento Web en Google, el archivo .htaccess y otros temas te ayudarán a optimizar sitios Web

Manuales Posicionamiento Web Términos sobre Posicionamiento Posicionamiento Web en Google .htaccess Parámetros en .htaccess Directivas de .htaccess Joomla Manual de Instalación del Joomla Crear Templates para Joomla Migrar usuarios de Nuke a Joomla PHP-Nuke Instalación del PHP-Nuke en Español Cómo hacer tus propios Módulos Subir mi Portal y no morir en el intento Mis Primeros pasos con PHP-Nuke Configurar y Hacer tus Propios Bloques Base de Datos desde el FTP Tu Nuke Multilingüe Crear un Bloque con Scroll Cómo modificar un Theme Segundo rango para los Foros Cómo Hacer un Theme desde Cero Crear Menú Desplegable Rango en Lista de Miembros Crear un Precargador para Nuke Crear theme con archivos HTML Theme con bloques a la izquierda Theme: contenido con alto fijo Nuketips Adobe Photoshop Rejuvenecer Máscara Rápida Transformar de Foto a Dibujo Firmas con Adobe Photoshop Texto de fuego Desvanecimiento con Photoshop Efecto de Plástico Efecto de Aceite Animación con Image Ready Blast Burbuja Efecto Canica Cemento Mojado

Cómo Hacer un Theme desde Cero Enviar a un amigo
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
dwdpa.com
[ subir ]

 

Prohibido Reproducir este Manual en otro Sitio Web

Copyright © por DWDpa Derechos Reservados.


Views: 5481

Sea el primero en comentar el artículo

Solo los usuarios registrados pueden agregar sus comentarios.
Por favor, vaya a login, o regístrese.