Cómo modificar un Theme

Hay 29 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

El el Manual anterior vimos la explicación de cómo hacer algunos cambios, ahora no sólo van a leer, sino que también van a practicar de una manera didáctica cada punto que tratemos.

Comenzamos...

Vamos a Modificar el theme DeepBlue, que viene por defecto en el Nuke y es el primero que vemos, así que no hay excusa de "que no lo encuentran" o cualquier otra.

Lo primero que vamos a hacer es a definir los colores, eso lo hacemos al inicio del archivo theme.php.

$bgcolor1 = "#ffffff";
$bgcolor2 = "#9cbee6";
$bgcolor3 = "#d3e2ea";
$bgcolor4 = "#0E3259";
$textcolor1 = "#000000";
$textcolor2 = "#000000";

Entonces vemos 4 colores de fondo(bgcolor) y dos colores de texto (textcolor).

Hay un color fácil de reconocer, el blanco (#ffffff), los otros dos no me los sé de memoria e imagino que ustedes tampoco, así que tenemos que hacer el cambio, guardarlo y ver el efecto en la página.

Entonces hacemos un cambio de prueba al $bgcolor2, y le ponemos color negro (#000000):

$bgcolor2 = "#000000";

Listo..., el cambio es casi imperceptible, fíjate en los bordes del bloque central con el mensaje de bienvenida... Ok ya sabemos dónde afecta el $bgcolor2, ahora regrésale el color que tenía (#9cbee6).

Vamos con el $bgcolor3, y le ponemos otra vez el negro (para ver el contraste más fácil).

$bgcolor3 = "#000000";

Aparentemente no ocurre ningún cambio, pero más adelante seguramente veremos su efecto, déjalo en negro así lo detectamos más rápido... Vamos con el $bgcolor4.

$bgcolor4 = "#000000";

Diablos..!!, otro misterio... Bueno..., para detectarlo más adelante le vamos a poner color gris (#c0c0c0)

$bgcolor4 = "#c0c0c0";

Déjalo así...

Siguiendo el tour, están los OpenTable(), que es donde se declaran la etiquetas html para el inicio de una tabla, y los CloseTable() que es exactamente lo opuesto (cerrar las tablas).

Sigue la function FormatStory, que se refiere a las noticias. Sin entrar en detalles, dice que si un usuario publica la Noticia sale su nombre, y si es anónimo... pués sale que es Anónimo..., en ambos las letras serán en itálica. El único cambio que por el momento pueden hacer es quitar las itálicas (<i>), si quieres que las noticias de los usuarios no salgan en itálica (claro..!)... Es esta parte:

}
$boxstuff .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
echo "<font class=\"content\">$boxstuff</font>\n";
}

En negrita marqué las itálicas.

Continuamos con function themeheader. Aquí hacemos algunos cambios importantes en cuanto a visualización. Busca donde inicia el cuerpo de la página (body):

echo "<body bgcolor=\"#0E3259\" text=\"#000000\" link=\"0000ff\">"

Aquí dice que por defecto el fondo de la página es este color #0E3259, el texto es negro y los vínculos #0000ff.

Entonces tenemos que decidir los colores de la página......................................................... Ok...., para que se puedan ver los contrastes que pusimos anteriormente, vamos a crear una web Verde. Entonces hacemos este cambio:

echo "<body bgcolor=\"#1A404D\" text=\"#000000\" link=\"0000ff\">"

Guarda el cambio y mira la web......................., cambiamos el fondo.

Ahora que tenemos más control de los colores, vamos a regresar al inicio, donde están los colores y hacemos estos cambios:

Así esta:

$bgcolor1 = "#ffffff";
$bgcolor2 = "#9cbee6";
$bgcolor3 = "#d3e2ea";
$bgcolor4 = "#c0c0c0";
$textcolor1 = "#000000";
$textcolor2 = "#000000";

Lo cambiamos así:

$bgcolor1 = "#276376";
$bgcolor2 = "#9cbee6";
$bgcolor3 = "#d3e2ea";
$bgcolor4 = "#c0c0c0";
$textcolor1 = "#000000";
$textcolor2 = "#000000";

Sólo cambió de color el bloque principal..., ahora emparejamos los demás.

Lo que viene es la parte de arriba del Nuke, en donde está el Logo y el menú horizontal. Todo esto:

echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\" align=\"center\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\" height=\"88\" bgcolor=\"#FFFFFF\">\n"
."<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td align=\"left\"><a href=\"index.php\"><img border=\"0\" src=\"themes/DeepBlue/images/logo.gif\" alt=\"Welcome to $sitename!\" hspace=\"20\"></a></td><td align=\"right\"><img border=\"0\" src=\"themes/DeepBlue/images/logo-graphic.gif\"></td></tr></table></td></tr>\n"
."<tr><td width=\"100%\" bgcolor=\"#000000\" height=\"19\" valign=\"bottom\">\n"
."<a href=\"index.php\"><img border=\"0\" src=\"themes/DeepBlue/images/home.gif\" width=\"140\" height=\"18\"></a>"
."<a href=\"modules.php?name=Your_Account\"><img border=\"0\" src=\"themes/DeepBlue/images/account.gif\" width=\"140\" height=\"18\"></a>"
."<a href=\"modules.php?name=Downloads\"><img border=\"0\" src=\"themes/DeepBlue/images/downloads.gif\" width=\"140\" height=\"18\"></a>"
."<a href=\"modules.php?name=Submit_News\"><img border=\"0\" src=\"themes/DeepBlue/images/submit.gif\" width=\"140\" height=\"18\"></a>"
."<a href=\"modules.php?name=Topics\"><img border=\"0\" src=\"themes/DeepBlue/images/topics.gif\" width=\"140\" height=\"18\"></a>"
."<a href=\"modules.php?name=Top\"><img border=\"0\" src=\"themes/DeepBlue/images/top10.gif\" width=\"140\" height=\"18\"></a>"
."</td></tr><tr><td width=\"100%\" height=\"10\" bgcolor=\"#d3e2ea\">\n"
."</td></tr></table>\n"

Que visualmente es esto:

Logo	imagen derecha

Portada Tu Cuenta Descargas Enviar Noticias Tópicos Top 10

**No puse las imágenes pero con claridad observas la estructura y dónde va cada cosa.

Lo primero que tienes que hacer es quitar las imágenes del menú (las azúles), o cambiarlas por otras. Para cambiarlas a texto hacemos lo siguiente (copia y pega):

echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\" align=\"center\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\" height=\"88\" bgcolor=\"#FFFFFF\">\n"
."<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td align=\"left\"><a href=\"index.php\"><img border=\"0\" src=\"themes/DeepBlue/images/logo.gif\" alt=\"Welcome to $sitename!\" hspace=\"20\"></a></td><td align=\"right\"><img border=\"0\" src=\"themes/DeepBlue/images/logo-graphic.gif\"></td></tr></table></td></tr>\n"
."<tr><td align=\"center\" width=\"100%\" bgcolor=\"#276376\" height=\"19\" valign=\"bottom\">\n"
."<strong>::</strong> <a href=\"index.php\">Inicio</a>"
." <strong>::</strong> <a href=\"modules.php?name=Your_Account\">Tu Cuenta</a>"
." <strong>::</strong> <a href=\"modules.php?name=Downloads\">Descargas</a>"
." <strong>::</strong> <a href=\"modules.php?name=Submit_News\">Enviar Noticias</a>"
." <strong>::</strong> <a href=\"modules.php?name=Topics\">Tópicos</a>"
." <strong>::</strong> <a href=\"modules.php?name=Top\">Top 10</a>"
."</td></tr><tr><td width=\"100%\" height=\"10\" bgcolor=\"#d3e2ea\">\n"
."</td></tr></table>\n"

Primero le cambié el fondo a verde, ya que por defecto es negro, y luego cambié imágenes por texto. También le agregué los muy usados 4 puntos ( :: ) y los puse en el centro.

Sigue el function themefooter() (la parte de abajo de la página), pero vamos a dejarlo como está.

Avanzamos a function themeindex, es todo esto:

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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#FFFFFF\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#FFFFFF\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#FFFFFF\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#FFFFFF\"><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=\"#FFFFFF\" 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"
."<img src=\"themes/DeepBlue/images/pixel.gif\" border=\"0\" height=\"3\">\n"
."</td></tr></table>\n"
."</td></tr></table><br>\n";
}

Vamos a cambiar los colores para que las noticias se acoplen al nuevo estilo de web (copia y pega).

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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#1A404D\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#276376\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#1A404D\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#276376\"><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=\"#276376\" 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"
."<img src=\"themes/DeepBlue/images/pixel.gif\" border=\"0\" height=\"3\">\n"
."</td></tr></table>\n"
."</td></tr></table><br>\n";
}

En negrita están los cambios de color. Son los mismos que usamos anteriormente.

Seguimos con function themearticle, aquí configuramos el formato de Noticia al hacer click en leer más. Es todo esto:

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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#FFFFFF\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#FFFFFF\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#FFFFFF\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#FFFFFF\"><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";
}

Simplemente le cambiamos los colores igual que antes, de esta forma:

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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#1A404D\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#276376\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#1A404D\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td colspan=\"2\" bgcolor=\"#276376\"><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";
}

Listo, quedó igual a las noticias del Home.

Continuamos con function themesidebox, que se refiere a los bloques. Aquí está:

function themesidebox($title, $content) {
echo "<table border=\"0\" align=\"center\" width=\"138\" cellpadding=\"0\" cellspacing=\"0\">"
."<tr><td background=\"themes/DeepBlue/images/table-title.gif\" width=\"138\" height=\"20\">"
." <font color=\"#FFFFFF\"><b>$title</b></font>"
."</td></tr><tr><td><img src=\"themes/DeepBlue/images/pixel.gif\" width=\"100%\" height=\"3\"></td></tr></table>\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#ffffff\">\n"
."$content"
."</td></tr></table></td></tr></table><br>";
}

Ahora los cambios de color:

function themesidebox($title, $content) {
echo "<table border=\"0\" align=\"center\" width=\"138\" cellpadding=\"0\" cellspacing=\"0\">"
."<tr><td background=\"themes/DeepBlue/images/table-title.gif\" width=\"138\" height=\"20\">"
." <font color=\"#FFFFFF\"><b>$title</b></font>"
."</td></tr><tr><td><img src=\"themes/DeepBlue/images/pixel.gif\" width=\"100%\" height=\"3\"></td></tr></table>\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#276376\">\n"
."$content"
."</td></tr></table></td></tr></table><br>";
}

Ya avanzamos bastante, pero como vez hay un azul claro "colao" en la página. Buscamos desde el inicio del archivo y encontramos el código de color #d3e2ea. Así que donde veamos ese color, lo cambiamos a negro (#000000).

El Primero está debajo de la palabra Top, en function themeheader().

El Segundo está dos renglones más abajo y a la derecha.

Otro 4 renglones más abajo, después de public_message()

El cuarto esta 3 renglones más abajo.

Ok... ya los tenemos casi todos..., sólo falta el que pinta el fondo de los bloques de la derecha...................................

Está en function themefooter(), cuenta 4 renglones hacia abajo y busca a la derecha al final.

Ahora sí, cambiaste todo el fondo a negro.

Regresa al inicio del archivo y donde están los colores cambia el $bgcolor2 a este color #398FAC, queda así:

$bgcolor2 = "#398FAC";

Seguimos ahora con el cambio de color en las letras y los vínculos.

Abre el archivo styles del theme, verás esto:

FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
TD {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
P {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
DIV {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
INPUT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
TEXTAREA {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
FORM {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
A:link {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:active {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; 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: 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}

Lo cambiamos así (copia y pega):

FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
TD {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
P {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
DIV {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
INPUT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
TEXTAREA {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
FORM {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}
A:link {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:active {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:hover {BACKGROUND: none; COLOR: #398FAC; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.title {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 13px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}
.storytitle {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 13px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 13px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.tiny {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.footmsg {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 8px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.footmsg_l {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 8px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.box {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px; border: 1px solid #FFFFFF; background-color: #000000}

En negrita están todos los cambios. Todo el texto de color blanco excepto A:hover (al pasar por el link) que le puse un color verde claro.

Antes de continuar es necesario les explique un poco sobre la hoja de estilo (el archivo style), y algunas modificaciones que pueden hacer:

En este archivo se describen las características del texto..., por ejemplo:

FONT-FAMILY -----------> Tipo de Letra, que por lo general es ---->Arial,Verdana,Helvetica

FONT-SIZE ---------------> Tamaño de Fuente (ejemplo: 11px)

BACKGROUND ----------> Color de Fondo para el Texto

COLOR -------------------> Color del Texto (ejemplo: #000000)

TEXT-DECORATION ----> Decoración del Texto -------------------> none = Sin nada / underline = Subrayado

Entonces... lo anterior define la apariencia del texto en diferentes circunstancias. Estas "circunstancias" son definidas en el archivo:

FONT

BODY

INPUT

Estos son algunos. Para que veas el efecto que tiene cada uno de ellos modificar las variables que expliqué anteriormente..., ya sea agregando código, borrando o editando.

A continuación el estilo de los vínculos:

A:link ---------> Link normal

A:active -------> Link activo. Aquí defines la apariencia del link al momento de presionar en él.

A:visited ------> Link visitado. Defines la apariencia de los links que ya has presionado.

A:hover -------> Aquí defines la apariencia del link al pasar sobre él.

Modifica los links agregando las variables que expliqué arriba. Depende de tu imaginación hacer les combinaciones.

Para que no cometas algún error, sigue el mismo patrón que tiene el archivo...., por ejemplo:

FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 11px}

Observa bien dónde tienes que colocar los "Dos Puntos" ( : ), o el "Punto y Coma" ( ; ).

A pesar del cambio que hicimos en el archivo style, aún quedan textos de color negro. Para arreglarlo abre nuevamente el archivo theme.php y busca donde está "body"..., es donde cambiamos el fondo de la página:

Así está:

echo "<body bgcolor=\"#1A404D\" text=\"#000000\" link=\"0000ff\">"

Lo cambias así:

echo "<body bgcolor=\"#1A404D\" text=\"#ffffff\" link=\"ffffff\">"

Ahora sí, todo el texto y vínculos son blancos.

Continuamos haciendo más cambios, ahora vamos con la imágenes.

Copia estas imagenes y guárdalas con el nombre que tienen a un lado, en la carpeta images del theme DeepBlue.

bar

table-title

fondo

En el archivo theme.php busca la function themeheader(), más abajo está donde cambiamos las imágenes del menú por letras. El cambio es el siguiente.

Así está:

echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\" align=\"center\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\" height=\"88\" bgcolor=\"#FFFFFF\">\n"
."<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td align=\"left\"><a href=\"index.php\"><img border=\"0\" src=\"themes/DeepBlue/images/logo.gif\" alt=\"Welcome to $sitename!\" hspace=\"20\"></a></td><td align=\"right\"><img border=\"0\" src=\"themes/DeepBlue/images/logo-graphic.gif\"></td></tr></table></td></tr>\n"
."<tr><td align=\"center\" width=\"100%\" bgcolor=\"#276376\" height=\"19\" valign=\"bottom\">\n"
."<strong>::</strong> <a href=\"index.php\">Inicio</a>"
." <strong>::</strong> <a href=\"modules.php?name=Your_Account\">Tu Cuenta</a>"
." <strong>::</strong> <a href=\"modules.php?name=Downloads\">Descargas</a>"
." <strong>::</strong> <a href=\"modules.php?name=Submit_News\">Enviar Noticias</a>"
." <strong>::</strong> <a href=\"modules.php?name=Topics\">Tópicos</a>"
." <strong>::</strong> <a href=\"modules.php?name=Top\">Top 10</a>"
."</td></tr><tr><td width=\"100%\" height=\"10\" bgcolor=\"#000000\">\n"
."</td></tr></table>\n"

Lo cambias así:

echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\" align=\"center\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
."<tr><td width=\"100%\" height=\"88\" bgcolor=\"#FFFFFF\">\n"
."<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td align=\"left\"><a href=\"index.php\"><img border=\"0\" src=\"themes/DeepBlue/images/logo.gif\" alt=\"Welcome to $sitename!\" hspace=\"20\"></a></td><td align=\"right\"><img border=\"0\" src=\"themes/DeepBlue/images/logo-graphic.gif\"></td></tr></table></td></tr>\n"
."<tr><td background=\"themes/DeepBlue/images/bar.gif\" align=\"center\" width=\"100%\" bgcolor=\"#276376\" height=\"22\">\n"
."<strong>::</strong> <a href=\"index.php\">Inicio</a>"
." <strong>::</strong> <a href=\"modules.php?name=Your_Account\">Tu Cuenta</a>"
." <strong>::</strong> <a href=\"modules.php?name=Downloads\">Descargas</a>"
." <strong>::</strong> <a href=\"modules.php?name=Submit_News\">Enviar Noticias</a>"
." <strong>::</strong> <a href=\"modules.php?name=Topics\">Tópicos</a>"
." <strong>::</strong> <a href=\"modules.php?name=Top\">Top 10</a>"
."</td></tr><tr><td width=\"100%\" height=\"10\" bgcolor=\"#000000\">\n"
."</td></tr></table>\n"

En negrita ves los cambios que hice, agregué la imagen bar.gif de fondo en el menú horizontal.

Ahora utilizaremos la imagen fondo.gif, para agregar fondo a todos los bloques.

Vamos a ir de abajo hacia arriba. Primero editamos function themesidebox.

Así está:

function themesidebox($title, $content) {
echo "<table border=\"0\" align=\"center\" width=\"138\" cellpadding=\"0\" cellspacing=\"0\">"
."<tr><td background=\"themes/DeepBlue/images/table-title.gif\" width=\"138\" height=\"20\">"
." <font color=\"#ffffff\"><b>$title</b></font>"
."</td></tr><tr><td><img src=\"themes/DeepBlue/images/pixel.gif\" width=\"100%\" height=\"3\"></td></tr></table>\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#276376\">\n"
."$content"
."</td></tr></table></td></tr></table><br>";
}

Le agregamos el fondo así:

function themesidebox($title, $content) {
echo "<table border=\"0\" align=\"center\" width=\"138\" cellpadding=\"0\" cellspacing=\"0\">"
."<tr><td background=\"themes/DeepBlue/images/table-title.gif\" width=\"138\" height=\"20\">"
." <font color=\"#ffffff\"><b>$title</b></font>"
."</td></tr><tr><td><img src=\"themes/DeepBlue/images/pixel.gif\" width=\"100%\" height=\"3\"></td></tr></table>\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"138\">\n"
."<tr><td width=\"138\" bgcolor=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\" width=\"138\">\n"
."<tr><td background=\"themes/DeepBlue/images/fondo.gif\" width=\"138\" bgcolor=\"#276376\">\n"
."$content"
."</td></tr></table></td></tr></table><br>";
}

Está marcado en negrita el cambio. Ahora siguen las Noticias, sólo voy a escribir el cambio que debes hacer (copia y pega).

Primero en 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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#1A404D\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#276376\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#1A404D\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td background=\"themes/DeepBlue/images/fondo.gif\" colspan=\"2\" bgcolor=\"#276376\"><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";
}

En 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=\"#000000\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td bgcolor=\"#1A404D\">\n"
."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td bgcolor=\"#276376\">\n"
."<img src=\"themes/DeepBlue/images/dot.gif\" border=\"0\"></td><td width=\"100%\" bgcolor=\"#1A404D\"><font class=\"option\"><b> $title</b></font></td></tr>\n"
."<tr><td background=\"themes/DeepBlue/images/fondo.gif\" colspan=\"2\" bgcolor=\"#276376\"><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 background=\"themes/DeepBlue/images/fondo.gif\" bgcolor=\"#276376\" 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"
."<img src=\"themes/DeepBlue/images/pixel.gif\" border=\"0\" height=\"3\">\n"
."</td></tr></table>\n"
."</td></tr></table><br>\n";
}

Y para terminar, nos vamos hasta function OpenTable(), y hacemos este cambio:

function OpenTable() {
global $bgcolor1, $bgcolor2;
echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"$bgcolor2\"><tr><td>\n";
echo "<table background=\"themes/DeepBlue/images/fondo.gif\" width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"8\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}

La forma que utilicé para guiarme en este paso, fue simplemente buscar donde había puesto el color #276376 y al lado le agregué la imagen, debido a que este es el color de fondo de los bloques. En cuanto al último, recuerden que $bgcolor1 corresponde al mismo color (#276376), por eso fue fácil detectarlo. Igual puedes hacer para agregar imágenes en los espacios de color verde oscuro (#1A404D).

Para cambiar el Logo ya tienen un Manual Especializado, así que no voy a tocar el tema.

Nota: Para colocar una Imagen de Fondo en el Nuke, lo haces en donde está la etiqueta body..., por ejemplo:

echo "<body bgcolor=\"#1A404D\" text=\"#000000\" link=\"0000ff\">"

Le agregas el fondo así:

echo "<body background=\"themes/DeepBlue/images/fondo.gif\" bgcolor=\"#1A404D\" text=\"#000000\" link=\"0000ff\">"

Que tal el Manual ?.........., espero les sirva.

Psico
dwdpa.com

subir

Prohibido Reproducir este Manual en otro Sitio Web

Sea el primero en comentar el artículo

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

[Volver]