Cambiar Background de la plantilla joomla para cada sección

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!
Seccion1

Anuncios

42 comentarios en “Cambiar Background de la plantilla joomla para cada sección

  1. john dijo:

    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.

    • brunogelman dijo:

      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

      • Omar dijo:

        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

      • brunogelman dijo:

        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

  2. john dijo:

    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;
    }

    • brunogelman dijo:

      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

  3. Ramiro dijo:

    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

  4. greserg dijo:

    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

    • brunogelman dijo:

      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

      • greserg dijo:

        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,

      • greserg dijo:

        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ú.

      • brunogelman dijo:

        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!

      • brunogelman dijo:

        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

    • Carlos dijo:

      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!!

      • brunogelman dijo:

        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

  5. CArlos dijo:

    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!!

    • brunogelman dijo:

      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

  6. menanti dijo:

    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

    • brunogelman dijo:

      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

  7. Fran dijo:

    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

    • brunogelman dijo:

      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

  8. Fran dijo:

    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

  9. Francisco dijo:

    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 (”); }
    ?>

  10. Alexander Hoyos Boresoff dijo:

    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

    • brunogelman dijo:

      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 home

      y 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

  11. Aridio dijo:

    ó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?

    • brunogelman dijo:

      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

    • Aridio dijo:

      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.

  12. zeoption dijo:

    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.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s