Theme para PHP-Nuke que permite asignar un alto definido en pixeles para la presentación de las secciones del sitio. Útil en páginas Web con mucho contenido escrito.
Este modelo permite guardar la estética del sitio sin importar el volumen del contenido.
Es importante que revises el manual Cómo hacer un Theme con archivos HTML, ya que utilizo los mismos archivos en este nuevo modelo.
Basándonos en el theme PC_HTML, del manual Cómo hacer un Theme con archivos HTML, se modifican los archivos:
- theme.php
- style/style.css
- left_center.html
- footer.html
En el archivo theme.php borramos el área en que se llaman los bloques derechos (función themefooter), es decir, así está:
function themefooter() {
global $index, $foot1, $foot2, $foot3, $foot4, $copyright, $totaltime, $footer_message;
if ($index == 1) {
$tmpl_file = "themes/tutema/center_right.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
blocks(right);
}
$tmpl_file = "themes/tutema/footer.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
echo "<center>\n";
$footer_message = footmsg();
echo "</center><br>\n";
}
Y así debe quedar:
function themefooter() {
global $index, $foot1, $foot2, $foot3, $foot4, $copyright, $totaltime, $footer_message;
$tmpl_file = "themes/DWDpa_cfijo/footer.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
echo "<center>\n";
$footer_message = footmsg();
echo "</center><br>\n";
}
Seguimos con el archivo style.css que está en la carpeta style del theme.
Aquí se definen las características de la barra de desplazamiento, el ancho y alto del área que encierra el contenido.
El nuevo estilo es el siguiente:
.contenido {
BORDER-RIGHT: #e6e6e6 0px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #e6e6e6 0px solid;
SCROLLBAR-FACE-COLOR: #f3f3f3;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
OVERFLOW: auto;
BORDER-LEFT: #e6e6e6 0px solid;
WIDTH: 100%;
SCROLLBAR-SHADOW-COLOR: #9f9fa0;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
BORDER-BOTTOM: #e6e6e6 0px solid;
HEIGHT: 500px;
TEXT-ALIGN: justify
}
Hay valores en 0 pixeles que puedes modificar para que se generen bordes, también el alto de la ventana, etc.
Ya tenemos definido el estilo "contenido", ahora lo agregamos con un "div" en el archivo left_center.html y cerramos el "div" en el archivo footer.html.
El archivo left_center.html es así por defecto:
</td><td valign="top" width="100%">
Cuando agregamos el "div" con la clase "contenido" queda así:
</td><td valign="top" width="100%"><div class="contenido"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Ahora cerramos el "div" en el archivo footer.html, que por defecto es así:
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Para cerrar el "div" queda así:
</td>
</tr>
</table></div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Eso es todo, guarda los cambios y ya tienes un theme con proporciones definidas sin importar el volumen del contenido.
Ya que este modelo lo diseñé principalmente para sitios con gran volumen de contenido, eliminé los bloques derechos, sin embargo no es imprescindible. Puedes usar este formato con el modelo tradicional (contenido a la izquierda -- centro -- derecha).
Espero les sea de utilidad.
Saludos...
Este modelo permite guardar la estética del sitio sin importar el volumen del contenido.
Es importante que revises el manual Cómo hacer un Theme con archivos HTML, ya que utilizo los mismos archivos en este nuevo modelo.
Basándonos en el theme PC_HTML, del manual Cómo hacer un Theme con archivos HTML, se modifican los archivos:
- theme.php
- style/style.css
- left_center.html
- footer.html
En el archivo theme.php borramos el área en que se llaman los bloques derechos (función themefooter), es decir, así está:
function themefooter() {
global $index, $foot1, $foot2, $foot3, $foot4, $copyright, $totaltime, $footer_message;
if ($index == 1) {
$tmpl_file = "themes/tutema/center_right.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
blocks(right);
}
$tmpl_file = "themes/tutema/footer.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
echo "<center>\n";
$footer_message = footmsg();
echo "</center><br>\n";
}
Y así debe quedar:
function themefooter() {
global $index, $foot1, $foot2, $foot3, $foot4, $copyright, $totaltime, $footer_message;
$tmpl_file = "themes/DWDpa_cfijo/footer.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
echo "<center>\n";
$footer_message = footmsg();
echo "</center><br>\n";
}
Seguimos con el archivo style.css que está en la carpeta style del theme.
Aquí se definen las características de la barra de desplazamiento, el ancho y alto del área que encierra el contenido.
El nuevo estilo es el siguiente:
.contenido {
BORDER-RIGHT: #e6e6e6 0px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #e6e6e6 0px solid;
SCROLLBAR-FACE-COLOR: #f3f3f3;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
OVERFLOW: auto;
BORDER-LEFT: #e6e6e6 0px solid;
WIDTH: 100%;
SCROLLBAR-SHADOW-COLOR: #9f9fa0;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
BORDER-BOTTOM: #e6e6e6 0px solid;
HEIGHT: 500px;
TEXT-ALIGN: justify
}
Hay valores en 0 pixeles que puedes modificar para que se generen bordes, también el alto de la ventana, etc.
Ya tenemos definido el estilo "contenido", ahora lo agregamos con un "div" en el archivo left_center.html y cerramos el "div" en el archivo footer.html.
El archivo left_center.html es así por defecto:
</td><td valign="top" width="100%">
Cuando agregamos el "div" con la clase "contenido" queda así:
</td><td valign="top" width="100%"><div class="contenido"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Ahora cerramos el "div" en el archivo footer.html, que por defecto es así:
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Para cerrar el "div" queda así:
</td>
</tr>
</table></div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Eso es todo, guarda los cambios y ya tienes un theme con proporciones definidas sin importar el volumen del contenido.
Ya que este modelo lo diseñé principalmente para sitios con gran volumen de contenido, eliminé los bloques derechos, sin embargo no es imprescindible. Puedes usar este formato con el modelo tradicional (contenido a la izquierda -- centro -- derecha).
Espero les sea de utilidad.
Saludos...
