Les traigo este toturial para poder modificar el background de la plantilla joomla en las secciones que ustedes quieran así pueden generar sitios con fondos de distintos colores o con distintas imágenes y agregarle dinamismo al sitio.
Primer paso Para poder comenzar, debemos saber en que ítem del menú estamos posicionados, para esto usaremos la variable $Itemid (el $Itemid, es el id del ítem del menú para ubicarte) ,que en el caso de la portada es 1, entonces definimos como se ve a continuación la variable en el en le Header del index.php: global $Itemid; Una vez que declaramos la variable insertamos el siguiente código condicional en lugar de la etiqueta <body> para definir que clase de css usaremos dependiendo en que sección estemos.
if ($Itemid==1) { echo ('<body id="portada"'>'); //codigo de cabecera para el home } else{ echo ('<body id="otro"'>'); //codigo de cabecera para otras páginas }
Paso 2
A continuación les muestro el código CSS para que funcione perfecto. En la etiqueta Body van a poner todas las funciones especificas de la web en general y luego crearemos estiquetas con los nombres de las secciones para el codigo especifico de cada seccion.
body
{
margin: 0 auto;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
}
#portada{
margin: 0 auto;
padding: 0;
background-color: #C7C7C7;
background-image: url('../images/page_t.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
#otro{
margin: 0 auto;
padding: 0;
background-color: #C7C7C7;
background-image: url('../images/otro.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
Noten que utilizamos para las etiquetas de las secciones el operador # , ya que luego le asignamos cada estilo con el campo ID del Body .
Les dejo imagenes de la web donde lo implemente asi ven como funciona, espero que les sirva!
Muchas gracias, estoy intentando hacer lo mismo pero me da error, el index.php al q hace referencia es el del raiz del sitio o el q se encuentra en la carpeta de la plantilla, yo lo ubique en este ultimo pero no me funciona…marca error en:
linea 88.
Hola John, el archivo index.php en el que se debe modificar es el que se encuentra en la plantilla de joomla, si podes dame mas datos sobre el error que te da, o mostrame el codigo que estas usando, asi te puedo ayudar mejor !
Espero tus comentarios
Saludos
Ing. Gelman Bruno
Netrails Diseño Web
Ing. Gelman Bruno buenas tardes, estoy interesado en este tema debido a que tengo un cliente al que le estoy haciendo una web y quiere que le cambie el fondo en cada articulo, justo lo que dice en este tutorial, funciona también con joomla 2.5?
Me podrías ayudar, no manejo muy bien php.
Gracias de antemano.
Omar Macias Arevalo
Buenos días Omar
Hasta donde yo se supongo que debe funcionar, yo lo utilice en Joomla 1.5 , todavía no he utilizado joomla 2.5 así que no sabría decirte bien si ah cambiado algo como para que este script deje de funcionar. pero cualquier cosa lo vemos
espero te sirva!
Bruno
De nada John! Un gusto! y me alegro que te haya servido! Abrazo
Ing. Gelman Bruno
Netrails Diseño Web
Gracias Gelman por responder tan pronto.
Creo que el problema esta en la sgte instruccion:
echo (”);
Al colocarla el resto de codigo queda comentareado e intento acomodarla
pero no funciona.
El index.php de la plantilla:
<?php
defined('_JEXEC') or die('Restricted access'); // no direct access
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
$document = null;
global $Itemid;
if($Itemid==7)
{
<?php
echo ('’);
?>
}
el archivo template.css
body
{
margin: 0 auto;
padding: 0;
color: #0D1216;
background-image: url(‘../images/Bottom_texture.jpg’);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}
#hoja
{
margin: 0 auto;
padding: 0;
color: #0D1216;
background-image: url(‘../images/Bottom_texture2.jpg’);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}
Esto es lo deberías poner para que funcione, no esta asignandoles el id al Body, por eso te salta el error
probalo y avisame cualquier cosa
if($Itemid==7)
{
<?php
echo ('’);
?>
}
elseif ($Itemid==50 ){
echo (' ');
Saludos
Gelman Bruno
Gelman, muchas gracias, ya me funciono justamente como lo necesitaba. Muy agradecido por el aporte y por el soporte…jeje.
Genial, me ha venido perfecto. Limpio, sencillo y eficiente. Gracias!
Gracias por tu comentario! Saludos y éxitos!
Hola amigos, quiero hacer lo mismo y no he podido, quisieran saber si es el index que se encuentra dentro de la carpeta templates de mi sitio joomla el que debo midificar. Gracias
Hola Ramiro, si ese archivo es en el que debes hacer las modificaciones , cualquier otra consulta avisame , saludos
Hola de nuevo. Escribí anteriormente para darte las gracias, pero al comprobar el funcionamiento en IE7 veo que me descentra la página, es decir, lo tengo todo centrado y al poner el texto en IE se alinea todo a la izquierda. Si elimino el código se vuelve a centrar. No comprendo por qué puede pasar esto, tampoco comprendo por que IE da tantos problemas…
El código lo tengo pegado justo después de esta línea:
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . ‘functions.php’;
y estas son las líneas de código:
$document = null;
global $Itemid;
if ($Itemid==1) { echo (”);} //codigo de cabecera para el home
if ($Itemid==54) { echo (”);} //codigo de cabecera para el home
Hola ! con que código estas centrando la pagina ? yo por lo general uso después del body eso centra cualquier cosa jaja , si eso no funciona mostrame como lo haces así te puedo ayudar
saludos
Bruno
Disculpa que no haya respondido antes. Lo he retomado de nuevo pero no encuentro el problema en IE. Centro con css margin:0 auto; en el div que comprende al contenido. Trabajo en local. Voy a intentar subir el sitio a un servidor para que puedas ver el code.
Te aviso en cuanto lo tenga subido y te doy una dirección a ver si me puedes ayudar por que estoy seguro que es una tontería en algún css, pero IE me trae de cabeza…
Saludos,
Hola de nuevo. Lo he subido a un servidor. (http://goyo.site90.com/) Tanto en Firefox como en Chrome se ve el contenido centrado en la página. En IE pierde el centro y queda todo a la izquierda. Si quito el código:
$document = null;
global $Itemid;
if ($Itemid==1) { echo (”);} //codigo de cabecera para el home
if ($Itemid==27) { echo (”);} //codigo de cabecera para el home
if ($Itemid==2) { echo (”);} //codigo de cabecera para el home
se centra también el IE pero pierdo el poder poner las imágenes de fondo para cada menú.
Hola Greserg
Disculpa la demora! va bien la web! la forma que tenes que probar para resolver es usar la etiqueta que va funcionar para todos los navegadores seguro! de la siguiente manera y no tendrías que tener mas problemas! De paso te recomiendo usar fuentes color blanco o algo que corte con los colores oscuros del fondo así se ven mejor los textos!
Abrazo y espero que te funcione!
Buen día
La solución que te pase, en teoría debería resolver tu problema con IE7 ya que es una etiqueta que permite centrar todo el contenido por eso te puse un ejemplo para que te guíes de como ponerlo, vi el código, pero igual no puedo ver el código fuente, veo el html que se genera nomas, así que desde acá lo único que se me ocurre que puede resolver el problema es la etiqueta o si no fijate en el css si setear el margen del body para que centre la pagina, capas cada vez q cambia se desconfigura el margin y por eso se alinea al costado
Abrazo
Bruno
GENIAL EL CÓDIGO MUCHAS GRACIAS ME SIRVIÓ MUCHO
He estado siguiendo el hilo, funciona correctamente en firefox y chrome. Qué es lo que se tiene que modificar para que se vuelva a centrar el contenido usando IE??
Un saludo!!
buenos días Carlos, para centrarlo en explorer yo utilice la etiqueta luego del y con eso lo resolví bien, cualquier cosa me avisas
Salduos
Bruno
Cuendo mencionas “luego del”, a que etiqueta te refieres, la del body??
Gracias!
Claro quedaria asi
contenido del sitio web…
Saludos
Bruno
<
Hola Otra vez,
No logro hacerlo bien y en IE se sigue viendo desplazado.
Te pongo el código de mi index de la template.
// no direct access
defined ( ‘_JEXEC’ ) or die ( ‘Restricted access’ );
/*——————CAMBIAR FONDO EN CADA SECCIÓN——–(Carlitos)————–*/
global $Itemid;
$Itemid=$_GET[‘Itemid’];
if ($Itemid==543)
{ echo (”);
}
elseif ($Itemid==233) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
elseif ($Itemid==10000) {
echo (”);
}
else {
echo (”);
}
if (class_exists(‘T3Template’)) {
$tmpl = T3Template::getInstance();
$tmpl->setTemplate($this);
$tmpl->render();
return;
} else {
//Need to install or enable JAT3 Plugin
echo JText::_(‘MISSING_JAT3_FRAMEWORK_PLUGIN’);
}
Gracias otra vez por la ayuda!!
lo que deberías poner es lo siguiente
if ($Itemid==543)
{ echo (‘
‘);
}
elseif ($Itemid==233) {
echo (‘
‘);
}
donde id=”contacto” es la clase donde definis que clase de css haces referencia y cambias el fondo, Ej:
#portada{
margin: 0 auto;
padding: 0;
background-color: #C7C7C7;
background-image: url(‘../images/page_t.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
y acordarte de cerrar la etiqueta al antes del body del final del template
Espero que te ayude
SAludos
Bruno
Hola, el tutorial es gusto lo que estoy buscando. he intentado realizarlo pero no lo he logrado. creo que no entiendo bien los dos primeros pasos, he de decir que no controlo casi nada de php. no sé si se podría ser más explícito. muchas graias de antemano
Hola
Los dos primeros pasos son bien simples, en el primero defines una variable que será la que tendrá en cuenta en que sección te encuentras y después define el if con el cual definirás que clase del CSS usaras para mostrar la plantilla de la pagina. analizalo tranquilo veras que es simple
En el segundo paso lo que haces es definir las clases de css para cada sección, en donde defines la imagen de background que vas a usar para cada una.
espero te sirva, cualquier cosa seguime preguntando y vemos como lo arreglamos
Abrazo
Bruno
hola Bruno, lo primero gracias por tu amalidad y rapidez.
sé que esto también lo puedo hacer con copias de plantillas modificadas según sección, pero me parece mejor este método. No he comentado que estoy trabajando con la versión 2.5.4. vamos a ir paso a paso a ver si me entero.
1. la variable itemid,dices de colocarla en el header, pero lo que tiene el index.php es head, que es donde yo lo he colocado en la primera línea despues del .¿es correcto?. por otro lado, para saber qué número corresponde a cada categoría/item ¿cómo lo sabemos por el id del ítem de menu, como sabes tú que a la portada le corresponde un 1?
2.el codigo condicional que se usa ¿qué se pone a continuación de lo anterior, es decir qué quedaría así?
global $Itemid; if ($Itemid==1) { echo (”); //codigo de cabecera para el home } else{ echo (”); //codigo de cabecera para otras páginas }
3.el paso tres lo hacemos en una css aparte asociada/vinculada al index.php?, y si es dentro del index.php, ¿dónde van?
no Entiendo nada de php y eso se nota
Muchísimas gracias de antemano
Se puede hacer en el mismo archivo php, pero siempre es mejor hacerlo por separado por una cuestión de mantenibilidad del sitio a futuro, pero en el paso 3 lo único que te resta es hacer una clase para cada sección con un background image en cada clase q definirá la imagen de fondo
Disculpa la demora!
Espero te sirva!
Bruno
me auto respondo en el primer y segundo punto.
1.Entiendo que global $itemid va en el head. El número del item es el id de hecho itemid es la mewzcla de item + id
2.creo que en el segundo punto estoy en lo cierto.
lo que sigo sin tener claro es el punto 3
gracias de nuevo
en el punto 1, no entiendo que hay que poner en “codigo cabecera para el home”
en código cabecera para el home deberías poner “” entonces vos ahí le asignas la clase portada al body
Saludos
Para el Joomla 2.5:
<?php
global $Itemid;
$Itemid=$_GET['Itemid'];
if ($Itemid==101){ echo ('’); }
elseif ($Itemid==102){echo (”); }
elseif ($Itemid==103){echo (”); }
elseif ($Itemid==104){echo (”); }
elseif ($Itemid==105){echo (”); }
elseif ($Itemid==106){echo (”); }
else {echo (”); }
?>
Gracias por tu aporte!
Saludos y mil gracias por estas instrucciones. si no tengo conocimientos muy profundos en php podría hacer esto? esque estoy un poco enredado porque no entiendo como hacer para que por codigo me identifique que yo quiero ponerle un fondo x a una sección. por ejemplo la sección llamada “puntoTV”, que debo tener en cuenta? por favor te pido ayuda. esta es la pagina raíz http://www.telecafe.tv/site/ y esta seria a la que le quiero cambiar el fondo http://www.telecafe.tv/site/index.php?option=com_content&view=category&id=58:puntotv&Itemid=194&layout=default
Buen día ALexander, no hace falta que sepas mucho de php para implementar eso, solo debes entender que joomla siempre tiene un itemId para cada articulo, que se esta mostrando en la pantalla en ese momento y al declarar la variable $ItemId en el codigo puedes tomar la varible del articulo que esta abierto en ese momento, en el caso de articulo que quieres abrir vos es “Itemid=194” asi que si usas
if ($Itemid==194) { echo ('<body class="ClaseCss" );} //codigo de cabecera para el homey defines en tu hoja de css la ClaseCss con el background-image que quieras cambiara cuando entres en esa sección
Exitos! y esta muy buena tu pagina
Saludos
Bruno
órale! cómo se supone que debería quedar el código en el index.php? lo pongo y el dreamweaver dice que la línea donde coloco el segundo código está mal, alguien podría porfavor explicarme como si se hiciera de cuenta que le explica a un niño?
Buenas noches.. no se si me iran a responder pero necesito su ayuda… muchas gracias desde ya.. necesito cambiar el fondo del centro de la plantilla o de los artículos, pero no soy muy experto en programacion.. ayudenme por favor. http://www.joelcastrofunez.com gracias
buenas Joel, como andas?
Decime con que tenes problema? seguiste el tutorial? por q si sigues eso paso a paso podrás hacer lo que tu deseas para tu página
es algo sencillo, solo debes editar tu plantilla, busca la apertura de la etiqueta body “” y la sustituyes por esta:
<body id="alias; ?>”>
eso hará que el body tenga el alias del nombre del menú como ID, ejemplo, si estás en la sección “Contacto”, en esa sección el body tendrá un ID con el alias, se verá así:
ahí con css puedes asignar un fondo a cada página o a cada cosa que quieras, un ejemplo podría ser este:
body {
background-color:#fff;
}
body#contacto {
background-color:#000;
}
y así el inicio incluyendo el resto de las páginas tendrá el fondo blanco, y solo la sección contacto tendrá el fondo negro, espero que te sirva de algo.
Heya my business is somebody in charge of below. I discovered this kind of board i think it is genuinely valuable & the item solved the problem away a whole lot. I really hope to provide one thing again and assist other individuals as if you helped me to.
excelente, gracias por el aporte