Hacer tu Propio Theme de PHP-Nuke

Iniciado por MinusFour, 24 Abril 2005, 15:36 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

MinusFour

24 Abril 2005, 15:36 PM
Como alguna vez me aplico mi buen amigo Ramon. Lo voy a poner como eh entendido :P

1. Hay dos tipos de Theme:
a)Estilo NukeNews(aprenderemos este)
b)Codeado en php

Ok, explico las bases...
NukeNews.. es un theme de php-nuke en el cual hacen includes a archivos .html... claro pasados a php... todos esos documentos escriben una parte del nuke.

Estructura

PHPs
theme.php<-Este es el que arma a todos
tables.php<-Las tablas del nuke... en este se puede apreciar que theme.php hace un include a este..los que sabe php.. ya sabran que hacer para no tener este archivo

Imagenes y HTML
images<-Imagenes
header.html<-Cabecera
blocks.html<-Bloques del Nuke
footer.html<-El pie de la pagina
center_right.html<-El espacio que deja a la derecha del main
left_center.html<-El espacio que deja a la izquieda del main
story_home.html<-Las noticias que se publican en el home :P
story_page.html<-El estilo que toman las noticias cuando la vees sola

Ya para este momento te estaras preguntando... donde esta este maldito theme?? obviamente este en themes/NukeNews
sino lo tienes bajalo de la pagina de php-nuke.org.. de seguro hay viene..

Antes que nada vamos a echarnos un clavado en el tables.php
si gustas abrelo con un bloc de notas,dreamweaver o cualquier editor de texto... que no te cierre automaticamente las tags!!

busquen esto..

tables.php
Código [Seleccionar]

<?php 
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=\"8\" 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=\"8\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}

function CloseTable2() {
    echo "</td></tr></table></td></tr></table>\n";
}

?>

tienes que buscar esto dentro del archivo.. lo vas a ver.. claro que lo vas a ver.. despues de los comentarios...

fijense que mientras que OpenTable(); es una funcion que usa el 100% width... mientras que OpenTable2(); usa unos valores definidos :P

les voy a explicar que es esto sencillo.. esto es para que el nuke abra las tablas en el main y toma un color.. el color se define en el theme.php

theme.php
Código [Seleccionar]

$bgcolor1 = "#efefef";
$bgcolor2 = "#cfcfbb";


ahh y trankis.. que los otros de por ahi.. son para texto y para la tabla numero 2

Header

Aqui va todo lo referente con el html del header... que se le agrega algunos codigos en php si quieres en el theme.php

ahora veamos el codigo de Header.html

Header.html
Código [Seleccionar]

<br>
<table cellpadding="0" cellspacing="0" width="100%" border="0" align="center" bgcolor="#ffffff">
<tr>
<td bgcolor="#ffffff">
<img height="16" alt="" hspace="0" src="themes/NukeNews/images/corner-top-left.gif" width="17" align="left">
<a href="index.php"><img src="themes/NukeNews/images/logo.gif" align="left" alt=""._WELCOMETO." $sitename" border="0" hspace="10"></a></td>
<td bgcolor="#999999"><IMG src="themes/NukeNews/images/pixel.gif" width="1" height="1" alt="" border="0" hspace="0"></td>
<td bgcolor="#cfcfbb" align="center">
<center><form action="modules.php?name=Search" method="post"><font class="content" color="#000000"><b>Search </b>
<input type="text" name="query" size="14"></font></form></center></td>
<td bgcolor="#cfcfbb" align="center">
<center><form action="modules.php?name=News&new_topic" method="post"><font class="content"><b>Topics </b>
$topics_list
</select></font></form></center></td>
<td bgcolor="#cfcfbb" valign="top"><img height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-top-right.gif" width="17" align="right"></td>
</tr></table>
<table cellpadding="0" cellspacing="0" width="100%" border="0" align="center" bgcolor="#fefefe">
<tr>
<td bgcolor="#000000" colspan="4"><IMG src="themes/NukeNews/images/pixel.gif" width="1" height=1 alt="" border="0" hspace="0"></td>
</tr>
<tr valign="middle" bgcolor="#dedebb">
<td width="15%" nowrap><font class="content" color="#363636">
<b>$theuser</b></font></td>
<td align="center" height="20" width="70%"><font class="content"><B>
<A href="index.php">Home</a>
&nbsp;&middot;&nbsp;
<A href="modules.php?name=Topics">Topics</a>
&nbsp;&middot;&nbsp;
<A href="modules.php?name=Downloads">Downloads</a>
&nbsp;&middot;&nbsp;
<A href="modules.php?name=Your_Account">Your Account</a>
&nbsp;&middot;&nbsp;
<A href="modules.php?name=Submit_News">Submit News</a>
&nbsp;&middot;&nbsp;
<A href="modules.php?name=Top">Top 10</a>
</B></font>
</td>
<td align="right" width="15%"><font class="content"><b>
<script type="text/javascript">
<!--   // Array ofmonth Names
var monthNames = new Array( "January","February","March","April","May","June","July","August","September","October","November","December");
var now = new Date();
thisYear = now.getYear();
if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem
document.write(monthNames[now.getMonth()] + " " + now.getDate() + ", " + thisYear);
// -->
</script></b></font></td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#000000" colspan="4"><IMG src="themes/NukeNews/images/pixel.gif" width="1" height="1" alt="" border="0" hspace="0"></td>
</tr>
</table>
<!-- FIN DEL TITULO -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"><tr valign="top">
<td bgcolor="#ffffff">$public_msg<img src="themes/NukeNews/images/pixel.gif" width="1" height="20" border="0" alt=""></td></tr></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"><tr valign="top">
<td bgcolor="#ffffff"><img src="themes/NukeNews/images/pixel.gif" width="10" height="1" border="0" alt=""></td>
<td bgcolor="#ffffff" width="150" valign="top">

No les voy a enseñar HTML pero les dire que lo que hace la mayoria del codigo es hacer un dropdown para las noticias y algo de fechas... :P
si quieres remplazenlo.. no hay problema.. juegen un poco con el...

ahora el header.html No es el unico Editable para la cabecera..
veremos una funcion del nuke llamada themeheader()

veamos
Theme.php(function themeheader();<--Busca)
Código [Seleccionar]
function themeheader() {
    global $user, $banners, $sitename, $slogan, $cookie, $prefix, $db;
    cookiedecode($user);
    $username = $cookie[1];
    if ($username == "") {
        $username = "Anonymous";
    }
    echo "<body bgcolor=\"#505050\" text=\"#000000\" link=\"#363636\" vlink=\"#363636\" alink=\"#d5ae83\">";
    if ($banners == 1) {
include("banners.php");
    }
    $topics_list = "<select name=\"new_topic\" onChange='submit()'>\n";
    $topics_list .= "<option value=\"\">All Topics</option>\n";
    $toplist = $db->sql_query("select topicid, topictext from ".$prefix."_topics order by topictext");
    while(list($topicid, $topics) = $db->sql_fetchrow($toplist)) {
$topicid = intval($topicid);
    if ($topicid==$topic) { $sel = "selected "; }
$topics_list .= "<option $sel value=\"$topicid\">$topics</option>\n";
$sel = "";
    }
    if ($username == "Anonymous") {
$theuser = "&nbsp;&nbsp;<a href=\"modules.php?name=Your_Account&op=new_user\">Create an account";
    } else {
$theuser = "&nbsp;&nbsp;Welcome $username!";
    }
    $public_msg = public_message();
    $tmpl_file = "themes/NukeNews/header.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
    blocks(left);
    $tmpl_file = "themes/NukeNews/left_center.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}

si podemos observar.. lo que hace este codigo es ver si el usuario esta online... e incluir banners si los ay.. tambien hace el dropdown de las noticias nuke..

editenlo.. juegen con el.. si les sale mal algo.. pues se bajan otra vez el theme xD

solo no borren esto
Código [Seleccionar]
$tmpl_file = "themes/NukeNews/header.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
    blocks(left);
    $tmpl_file = "themes/NukeNews/left_center.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}

Footer

Que hace el footer? Sencillo.. lo unico que hace este codigo es poner el texto que tu previamente has
hecho desde preferencias o Settings... Aqui va la copyright del nuke etc... y tambien si lo deseas una imagen
veamos su codigo

Código [Seleccionar]
</td><td bgcolor="#ffffff"><img src="themes/NukeNews/images/pixel.gif" width=10 height=1 border=0 alt="">
</td></tr></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"><tr valign="top">
<td align="center" height="17">
<IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-bottom-left.gif" width="17" align="left">
<IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-bottom-right.gif" width="17" align="right">
</td></tr></table>
<br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"><tr valign="top">
<td><IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-top-left.gif" width="17" align="left"></td>
<td width="100%">&nbsp;</td>
<td><IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-top-right.gif" width="17" align="right"></td>
</tr><tr align="center">
<td width="100%" colspan="3">
$footer_message
</td>
</tr><tr>
<td><IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-bottom-left.gif" width="17" align="left"></td>
<td width="100%">&nbsp;</td>
<td><IMG height="17" alt="" hspace="0" src="themes/NukeNews/images/corner-bottom-right.gif" width="17" align="right"></td>
</tr></table>

modificalo a tu gusto.. solo recuerda no borrar el $footer_message.. que es donde iran tu texto de pie de pagina.. tu sabes..

lo que hace este codigo es sencillisimo... hace que las imagenes formen una especie de borde... y en medio ponga el mensaje
ya has puesto.. si te acuerdas?? en preferencias...o settings.

ahora bien veamos.. que no es el unico que influye.. aqui.. tambien esta el theme.php

abrimos theme.php

theme.php(function themefooter();)
Código [Seleccionar]
function themefooter() {
    global $index, $foot1, $foot2, $foot3, $copyright, $totaltime;
    if ($index == 1) {
$tmpl_file = "themes/NukeNews/center_right.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
blocks(right);
    }
    $footer_message = "$foot1<br>$foot2<br>$foot3<br>$copyright<br>$totaltime";
    $tmpl_file = "themes/NukeNews/footer.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}


bien ese es el codigo para el footer.. lo que hace es convertir nuestro footer.html a codigo en php..
bien ahora que demonios le cambiamos aqui?? nada!! no le muevas absolutamente nada.. incluso si eres un maestro de php..
no serviria de nada esto :S

Blocks

En este lugar iran los bloques del nuke... son muy faciles de hacer y mas facil tratar de editarlos

observemos el blocks.html

blocks.html
Código [Seleccionar]
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="150"><tr><td>
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#dedebb" width="100%"><tr><td align="left">
<font class="content" color="#363636"><b>$title</b></font>
</td></tr></table></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="150">
<tr valign="top"><td bgcolor="#ffffff">
$content
</td></tr></table>
<br>

lo ven .. codigo sencillisimo.. lo editamos a nuestro gusto.. y solamente recordando que $title y $content son las variables de los blocks
ahora dos cosas que tenemos que tener en cuenta para que quede chulo el diseño.. $title.. es el titulo.. $content es el contenido.. no juegen con el orden
se ve mal...

ahora el theme.php juega parte tambien aqui :P pero les recomiendo que no lo toquen.. pondre su funcion.. pero no les aconsejo que lo toquen..

theme.php(function themesidebox();)
Código [Seleccionar]
function themesidebox($title, $content) {
    $tmpl_file = "themes/NukeNews/blocks.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}

que hace este codigo.. ?? namas convertir el blocks.html a algun codigo en php..

Noticias al home
aqui van las noticias al home.. sencillito.. el archivo es story_home.html
veamos..

story_home.html
Código [Seleccionar]
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr><td>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#cfcfbb" width="100%"><tr><td align="left">
<font class="option" color="#363636"><b>$title</b></font>
</td></tr></table></td></tr></table>
<a href="modules.php?name=News&amp;new_topic=$topic"><img src="$t_image" border="0" alt="$topictext" title="$topictext" align="right" hspace="10" vspace="10"></a>
<font class="content">$content</font>
</td></tr></table>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#efefef" width="100%"><tr><td align="center">
<font class="content">$posted</font><br>
<font class="content">$morelink</font>
</td></tr></table></td></tr></table>
<br><br><br>

y sencillamente lo que hace esto es hacer que las variables$title... Titulo $content muestre el contenido, $posted... quien lo envia $morelink.. lee mas, comentarios,etc..

hay que tener en cuenta el orden.... no lo distorsionen.. ahora.. juegen con el html.. haber que pasa...

ahora.. no es el unico archivo el story_home.html.. de nuevo esta el Theme.php!! xD

lo abrimos

theme.php(function theme_index();)
Código [Seleccionar]
function themeindex ($aid, $informant, $time, $title, $counter, $topic, $thetext, $notes, $morelink, $topicname, $topicimage, $topictext) {
    global $anonymous, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
$t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
$t_image = "$tipath$topicimage";
    }
    if ($notes != "") {
$notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
$notes = "";
    }
    if ("$aid" == "$informant") {
$content = "$thetext$notes\n";
    } else {
if($informant != "") {
    $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
} else {
    $content = "$anonymous ";
}
$content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
    $posted = ""._POSTEDBY." ";
    $posted .= get_author($aid);
    $posted .= " "._ON." $time $timezone ($counter "._READS.")";
    $tmpl_file = "themes/NukeNews/story_home.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}

les recomiendo aqui mover nada.. es igual de peligroso que el themefooter() ...

Noticias por pagina

Noticias por pagina es donde van los codigos para las noticias cuando le das click en leer mas.. comentarios etc...
veamos su codigo.. es muy sencillo

story_page.html
Código [Seleccionar]
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr><td>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#cfcfbb" width="100%"><tr><td align="left">
<font class="option" color="#363636"><b>$title</b></font><br>
<font class="content">$posted</font>
</td></tr></table></td></tr></table><br>
<a href="modules.php?name=News&amp;new_topic=$topic"><img src="$t_image" border="0" alt="$topictext" title="$topictext" align="right" hspace="10" vspace="10"></a>
<font class="content">$content</font>
</td></tr></table><br>

si podemos observar.. esto es casi lo mismo que en Noticias al home.. les voy a explicar.. que aqui.. solo importan las variables
lo que hace aqui.. es mostrar una imagen.. de la sección.. que nos lleva a la noticia :P
ahora la editamos y jugamos con ella.. solo tomen en cuenta las variables.. $title->titulo $content->contenido $posted->envia

tambien hay un codigo en theme.php

theme.php(function themearticle();)
Código [Seleccionar]

function themearticle ($aid, $informant, $datetime, $title, $thetext, $topic, $topicname, $topicimage, $topictext) {
    global $admin, $sid, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
$t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
$t_image = "$tipath$topicimage";
    }
    $posted = ""._POSTEDON." $datetime "._BY." ";
    $posted .= get_author($aid);
    if ($notes != "") {
$notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
$notes = "";
    }
    if ("$aid" == "$informant") {
$content = "$thetext$notes\n";
    } else {
if($informant != "") {
    $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
} else {
    $content = "$anonymous ";
}
$content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
    $tmpl_file = "themes/NukeNews/story_page.html";
    $thefile = implode("", file($tmpl_file));
    $thefile = addslashes($thefile);
    $thefile = "\$r_file=\"".$thefile."\";";
    eval($thefile);
    print $r_file;
}

Que hace.. mejor ni le muevan.. pero para los que saben php.. lo unico que hace es definir $title, $content, $posted.. etc..

Con esto concluyo mi tuto de como hacer un theme en php-nuke

Espero y lo disfruten.. cualquier duda.. pregunten.. no se queden cortos

Cita de: elBurro
preguntame...preguntameeeeee....
xD

Sub_Cero

#1
24 Abril 2005, 15:54 PM
Muchas gracias punkerman, espero poder entenderlo, el lunes ya te cuento si lo entiendo o no ;)
Imprimir
Ir Arriba Páginas1
Acciones del Usuario