Plantilla: No toma las imagenes de fondo

cristian_cena · #1 (**permalink**) 05/09/2009, 11:20

Esta plantilla parecería estar poseída por el demonio ya que:

No toma los background-image:url(carpeta/mi_imagen.gif), imagenes que declaro entemplateDetails.xml y asigno al index.php a traves de una hoja de estilodefaul.css (css que es llamado desde index.php con <link> )

1. creo el siguiente index.php:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?><?php echo $this->template ;?>default.css" type="text/css" />

</head>

<body>
<div id="principal">

<div id="header">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>

<div id="izquierda">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>

<div id="contenido">
<jdoc:include type="component" />
</div>

<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>

</div>

</body>
</html>

2. Declaro los archivos en templateDetails.xml del siguiente modo:

<files>
<filename>index.php</filename>
<filename>css/default.css</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>extras/cabecera.gif</filename>
<filename>extras/left_menus.gif</filename>
<filename>extras/contenido_articulos.gif</filename>
<filename>extras/footer.gif</filename>
</files>

<positions>
<position>top</position>
<position>left</position>
/*como puedo incluir la columna de contenido y footer aqui?? (esta pregunta no corresponde al tema, pero me vendria bien también XD)*/
</positions>

3. ... y el siguiente default.css:

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
position:relative;
}
p {color:red;}

#principal {
width:1000px;
height:2180px;
margin:0 auto 0 auto;
}

#header {
background-image: url(extras/cabecera.gif);
background-repeat:no-repeat;
width:1000px;
height:350px;
clear:both;
overflow:hidden;
}

#izquierda, #contenido {
float:left;
display:inline;
overflow:hidden;}

#izquierda {
background-image:url(extras/left_menus.gif);
width:459px;
height:1768px;
}

#contenido {
background-image:url(extras/contenido_articulos.gif);
width:541px;
height:1768px;
overflow:hidden;
}

#footer {
background-image:url(extras/footer.gif);
background-repeat: no-repeat;
width:1000px;
height:62px;
clear:both;
overflow:hidden;
}

Este es el aspecto que debe tener: http://www.inicio2770.com.ar/demonio.html (si ven el codigo fuente de este archivo html verán que el anidamiento de divs es el mismo que en index.php)

Así se vé actualmente: http://jambaweb.zobyhost.com/

¿Cual es el problema? Aplico la teoría pero se me "quemaron los libros"

Desde ya muchas gracias

Larenz · #2 (**permalink**) 05/09/2009, 11:52

Puede ser por las rutas que has establecido o las posición de carpetas. Prueba con esto:

Código:

#footer {
    background:url (../extras/footer.gif) no-repeat;
    width: 1000px;
    height:62px;
    clear:both;
    overflow:hidden;
}

Intenta a aprender a acortar los css y así disminuirás peso y carga del sitio. Por ejemplo:

Código:

#footer {
    background-image: url(imagen);
    background-position: 4px 0px;
    background-color: #FFFFFF;
}

Al final te puede quedar así ya acortado:

Código:

#footer {
    background: #FFF url(../imagen/imagen.gif) no-repeat 4px 0;
}

P.D: Con respecto a incluir la posición de contenido y el footer, pues sólo el footer es el único que puedes agregar al templateDetails.xml ya que el contenido por fuerza tendrá que publicarse al momento de escribir el código.

En este caso sólo agrega el footer:

Código:

<position>footer</position>

cristian_cena · #3 (**permalink**) 05/09/2009, 13:30

Gracias Larenz, lástima no me deje darte el karma que mereces.

Agregue "../"

y cambie:

<link rel="stylesheet" href="<?php echo $this->baseurl ;?><?php echo $this->template ;?>default.css" type="text/css" />

por:

<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/mi_template/css/general.css" type="text/css" />

No hay palabras para agradecer esta rápida respuesta! dios lo bendiga

Larenz · #4 (**permalink**) 05/09/2009, 13:42

Cita:

Iniciado por cristian_cena

Gracias Larenz, lástima no me deje darte el karma que mereces.

No hay palabras para agradecer esta rápida respuesta! dios lo bendiga

No hay problema!!! Apenas recibí tu privado y como tenía chance respondí a tu problema. Siempre es un gusto poder ayudar bajo lo que mi conocimiento me de y tiempo también...

Saludos!