Quiero modificar un template y necesito ayuda!

StreaK · #1 (**permalink**) 25/10/2008, 06:19

Hola que tal.

Estoy modificando un template para adaptarlo a lo que necesito. Básicamente juego con el index.php del template y el template.css, no tengo casi nada de idea de estos lenguajes, pero probando a cambiar por aquí y por allá voy consiguiendo cosas.

Llevo un buen rato intentando algo que no consigo, asi que ya tengo que pedir ayuda. En la página principal, la primera página que se ve al entrar, tengo una imagen de fondo, no pertenece a ningún artículo, es una imagen de fondo pero que solo ocupa una pequeña parte de la página. He visto que el código está en index.php.

Quiero que esta imagen salga siempre, incluida en los artículos, solo que el texto no pise la imagen. Lo he conseguido más o menos incluyéndo el código en el template.css poniendo background: url(../images/01.jpg) no-repeat; pero esto no evita que el texto pase sobre la imagen.

Espero haberme explicado bien!

Saludos, StreaK.

Larenz · #2 (**permalink**) 25/10/2008, 11:26

Si logro entender bien lo que quieres hacer es que por lo menos la imagen se muestre a la izquierda del artículo y luego al lado de ella comience el artículo? es así? Por que de ser así mejor te recomiendo usar el editor de texto de tu Joomla y luego agregar la imagen y luego el texto al lado de la imagen. En este caso vas a tener que alinear la imagen a la izquierda o derecha según sea tu gusto.

Por otro lado si lo que te digo no es lo que deseas hacer [ya que no logro entender bien lo que deseas] puedes hacer lo siguiente mediante tu hoja de estilos [puede ser creando un nuevo estilo y llamándolo luego]:

Cita:

.imagenfondo {
background: url("../images/imagen.png") no-repeat top left;
padding: 10px 10px 0 40px;
}

En este caso si te fijas a través del "padding" tu puedes hacer que el texto se desplace de la siguiente forma: arriba, derecha, abajo, izquierda... O sea que el primer 10px hace que el texto se desplace 10 pixeles desde arriba... y por lo menos el 40 representa que tu texto comenzará luego de los 40 pixeles de espacio del borde izquierdo, lo cual puede permitir que el texto no pase encima de tu imagen porque éste [texto] comenzará a aparecer hasta 40 pixeles después de ella [pero comenzando desde la izquierda]

Espero que me hayas entendido. Pero preferiría que explicaras mejor tu problema y más detallado para que así cualquiera pueda ayudarte mejor.

StreaK · #3 (**permalink**) 26/10/2008, 11:04

Cuelgo los archivos a ver si sacais algo en claro, si quereis miro de colgar unas capturas ok

Código PHP:

 
<!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> 
<!-- 
author: raduga http://mambasana.ru 
author: Pat Heard   http://fullAhead.org 
--> 
<jdoc:include type="head" /> 
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> 
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> 
 
 
<?php 
 
     $view = JRequest::getVar('view'); 
     $option = JRequest::getCmd('option'); 
 
     if( ($this->params->get('showImageFrontpage') && $view == 'frontpage') 
          || ($this->params->get('showImageCom_Newsfeeds') && $option == 'com_newsfeeds') 
          || ($this->params->get('showImageCom_Weblinks') && $option == 'com_weblinks') 
          || ($this->params->get('showImageArticle') && $view == 'article') 
          || ($this->params->get('showImageCategory') && $view == 'category') 
          || ($this->params->get('showImageSection') && $view == 'section')  
          || ($this->params->get('showImageNewsfeed') && $view == 'newsfeed') ){  
?> 
 
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/noimage.css" type="text/css" /> 
 
<?php } ?>  
 
</head> 
 
 
<body id="bg_body"> 
 
  <div id="header"> 
     <div id="menu"> 
         <?php if($this->countModules('user3')) : ?> 
                      <jdoc:include type="modules" name="user3" /> 
         <?php endif; ?> 
 
     </div> 
  </div> 
 
<div id="content"> 
  <div id="text"> 
   <?php if($this->countModules('top')) : ?> 
                      <jdoc:include type="modules" name="top" style="table"/> 
   <?php endif; ?> 
   <?php if($this->params->get('showComponent')) : ?> 
                    <jdoc:include type="component" /> 
   <?php endif; ?> 
 
   <?php if($this->countModules('user1')) : ?> 
                      <jdoc:include type="modules" name="user1" style="table"/> 
   <?php endif; ?> 
   
</div> 
 
    <div id="image"><?php 
      $ga=rand(1,4); 
 
    if ($ga==1) $cab="templates\greenery_ii\images\plants1.jpg"; 
    if ($ga==2) $cab="templates\greenery_ii\images\plants2.jpg"; 
    if ($ga==3) $cab="templates\greenery_ii\images\plants3.jpg"; 
    if ($ga==4) $cab="templates\greenery_ii\images\plants4.jpg"; 
 
    echo "<img src=".$cab.">"; 
?> 
    </div> 
 
    <div id="sideBar"> 
      <jdoc:include type="modules" name="left" style="table"/> 
      <jdoc:include type="modules" name="right" style="table"/> 
    </div> 
    
    <div id="footer"> 
      <p>Theme by <a href="http://mambasana.ru">raduga</a> | <a href="http://fullahead.org">Pat Heard</a></p> 
    </div> 
 </div> 
 
</body> 
</html>

La imagen de la que hablo en realidad son 4 imágenes, solo se muestra 1 de forma aleatoria.

StreaK · #4 (**permalink**) 26/10/2008, 11:05

template.css

Código:

/**
author: rgb(raduga) http://mambasana.ru
author: Pat Heard   http://fullAhead.org
template: Greenery 
copyright: GNU/GPL
**/


/**#################### DEFAULT and FORMS CSS ####################**/

body{
  margin: 0;
  padding: 0;  
    
}
#bg_body{
  text-align: center;
  background: #585858 url(../images/bg_body.jpg) repeat-y top center;
}

td, tr, p, div {
  font-family      : Verdana, Arial, Tahoma, Helvetica, sans-serif;
  font-size        : 12px;
  color            : #EEE;
  line-height      : 15px;
  
}

hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}

ul {
  margin           : 2px;
  padding-left     : 10px;
  list-style       : none;
}

li {
  list-style       : none;
  line-height      : 14px;
  padding-left     : 15px;
  background-image : url(../images/li_bullet.gif);
  background-repeat: no-repeat;
  background-position: 0 2px;
  
}

.article_separator{
display: block;
height: 20px;
}
td.article_column{
padding-right: 5px;
}

a:link, a:visited  {
  color: #86E160;
 
}

a:hover {
  color: #FFF;
}

form {
margin           : 0; 
padding          : 0;
}


.inputbox {
  padding          : 2px !important;
  padding          : 1px;
  margin: 3px 0;
  font: 1em verdana, arial, sans-serif;  
  color: #EEE;
  background-color: #777;
  border: 1px solid #999;
}

  input:hover,
  input:focus,
  textarea:hover,
  textarea:focus {
  color: #FFF;
  background-color: #999;
  
}

h1 {font: 700 1.3em verdana, sans-serif;color:#86E160;}
h2 {font: 700 1.2em verdana, sans-serif;color:#86E160;}
h3 {font: 700 1.1em verdana, sans-serif;color:#86E160;}


/**#################### Joomla CSS ####################**/

/** Buttons **/

.back_button {
  display: block;
  color            : #999999;
  font-family      : Tahoma, Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : normal;
  padding-bottom   : 10px;
  margin-right           : 10px;
  text-align: right;
  height      : 30px;
  text-decoration  : underline;

  }
.button {
  font-size        : 11px;
  color            : #EEE;
  border           : 1px solid #999;
  margin           : 3px 0;
  background-color : #777;
  padding          : 2px !important;
  padding          : 1px;
  cursor           : pointer;
  
}




/** Contact **/

.contact_email  {
  width            : 100%;
}
.contact_email .inputbox {
  
}




/** Module table  **/

table.moduletable, table.moduletable_menu {
	margin           : 5px 0 10px 0;
      padding          : 0 0 3px 0;
	width            : 100%;
      background       : #686868;
      text-align: left;
      background: #686868 url(../images/rounded_bl.gif) no-repeat bottom left;
	}

table.moduletable th, table.moduletable_menu th  {
padding:4px 9px 4px 0;
text-align: right;
font: 700 1em verdana, sans-serif;
color: #7BD32C;
background: #686868 url(../images/rounded_tr.gif) no-repeat top right;

}

table.moduletable td {
   padding          : 3px 5px;
   text-align: left;
    
    	}
table.moduletable_menu table {
padding          : 0 10px;
}

/** Read more **/

a.readon:link, a.readon:visited {
  color            : #999999;
  font-family      : Tahoma, Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/arrow.png) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 14px;
  float            : right;
  line-height      : 13px;
  text-decoration  : underline;
}
a.readon:hover {
  color: #86E160;
  font-family      : Tahoma, Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/arrow.png) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 14px;
  line-height      : 13px;
  text-decoration  : underline;
}





/** Pagenavigation **/

.pagenavcounter {
  font-size        : 11px;
  color            : #999999;
}
.pagenavbar {
  border-top       : 1px solid #999999;
  padding          : 2px;
}
.pagination span { padding: 3px; }
.pagination a    { padding: 3px; } 

a.pagination:link, a.pagination:visited {
  font-size        : 11px;
  text-decoration  : none;
  font-weight      : normal;
}

a.pagination:hover {
  font-size        : 11px;
  text-decoration  : none;
  font-weight      : normal;
}

table.contenttoc {
  border           : 1px solid #dcdcdc;
  background       : #686868;
  padding          : 5px;
  margin-left      : 15px;
  margin-bottom    : 5px;
}



/** Content **/

table.content{
  width            : 100%;
  padding          : 5px;
  border-collapse  : collapse;
  border-spacing   : 0;
  margin-bottom    : 5px;
  
}
table.contentpane {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
  }
table.contentpaneopen {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 0;
  margin-bottom    : 5px;
  
}

.contentheading,.componentheading {
  text-align: left;
  margin: 5px 0;
  padding:3px;
  font: 700 1.2em verdana, sans-serif;
  text-transform: uppercase;
  color: #7BD32C;
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
}

.contentheading a{
text-decoration: none;
width:auto;
}

div.componentheading {
margin: 5px 0 10px 0;
}

td.componentheading {
display:block;
margin: 5px 0 10px 0;
}

.contentdescription { 
  width          : auto !important;
  margin         : 0;
  padding        :  0;
  padding-top    : 5px;
  text-align     : left;
}

.blog_more {
margin   : 10px 0 7px 7px;
}

.buttonheading {
padding  : 0 2px;
}

.content_vote {
  font-size        : 10px;
  height           : 22px;
  padding          : 2px 0;
  }

.content_rating {
  font-size        : 10px;
  color            : #999999;
}
.small {
  font-size        : 10px;
  color            : #999;
  line-height: 12px;
}
.smalldark {
  font-size        : 11px;
  color            : #999;
  text-align:left;
}
.createdate, .modifydate {
  float            : left;
  font-size        : 10px;
  color            : #999999;
  width            : 100%;
  line-height: 12px;
  margin-bottom: 5px;
}
.modifydate {
  text-align: right;
  }

a.category:link, a.category:visited {
  font-size        : 11px;
  font-weight      : bold;
}

.sectiontableheader {
  font-size        : 12px;
  font-weight      : normal;
  letter-spacing   : 1px;
  color            : #EEE;
  background       : #111111; 
  padding          : 3px 2px;
}

.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #333333;
  border-bottom    : 1px solid #8F8F8F;
  line-height      : 19px;

}
.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-bottom    : 1px solid #8F8F8F;
  background       : #4D4D4D;
  line-height      : 19px;
}

.sectiontableentry2 td, .sectiontableentry1 td{
  padding          : 3px;
  line-height      : 17px;
}


.sectiontableentry1 img{
margin: 0 2px;
}
.sectiontableentry2 img{
margin: 0 2px;
}

StreaK · #5 (**permalink**) 26/10/2008, 11:06

Código:

/** Polls **/

.poll {
	color : #999;
	line-height : 13px;
	font-weight: normal;
      text-align: left;
}
.pollstableborder{
  border-color     : #999999;
}

/** images **/



/** #################### index.php #################### **/



#menu {
  width: 100%;
  margin: 0 auto;
  text-align: left; 
  height: 50px;
  background: url(../images/logo.jpg)  no-repeat;
}

#content {  
  clear: both;
  width: 837px;
  margin: 0 auto;
  text-align: left;
}

#text {
  float: left;
  width: 441px !important;
  width: 470px;
  w\idth:435px;
  padding: 10px 2px 20px 16px !important;
  padding: 20px 3px 20px 16px;
 
  
}

#sideBar {
  float: right;
  width: 195px !important;
  width: 198px;
  padding: 10px 15px 20px 0 !important;
  padding: 20px 15px 20px 0;
}


#footer {
  clear: both;
  width: 777px;
  padding: 15px 20px;
  
}

#footer p {
  color: #888;
  padding-top: 0 !important;
  padding-top: 10px;
  padding-bottom: 0 !important;
  padding-bottom: 20px;
  }

#footer a {
  color: #888;
}

#footer a:hover {
  color: #EEE;
}


/** Topmenu  **/

ul#mainlevel-nav {
  list-style       : none;
  margin           : 0;
  padding          : 0;
   
}

#mainlevel-nav li {
  float            : left;
  display          : block;
  list-style       : none;
  background-image : none;
  width				: auto;
  color				: #ffffff;
  margin           : 0;
  padding          : 6px 250px 10px;
  line-height: 38px;

  _height:0;
}

#mainlevel-nav li a {
  float            : left;
  display          : block;
      width				: auto;
	padding                 : 10px 6px 0 6px;
	color				: #000000;
      text-decoration		: none;
	font-weight			: bold;
	font-family: palatino linotype;
	font-size: medium;
      
}

#mainlevel-nav li a:hover {
  width				: auto;
height:10;
	color				: #01DFD7;
	background: url(../images/menu_tab.jpg) no-repeat top center;
      font-weight			: bold;
	text-decoration		: none;


    
}
ul#mainlevel-nav li #active_menu-nav {
      cursor			: default;
	position			: relative;
	width				: auto;

      color				: #000000;
      text-decoration		: none;
	}



ul#mainlevel-nav li #active_menu-nav:hover {
	cursor			: pointer;
	position			: relative;
	width				: auto;

 	color				: #01DFD7;
      text-decoration		: none;
	
	}


/** CSS for Mainmenu (Menu Style Legacy-Vertical) **/

a.mainlevel  {
 display           : block;
 width             : auto;
  margin           : 1px 0;
  font-size        : 12px;
  background       : none;
  
}

a.mainlevel:link, a.mainlevel:visited {
  display          : block;
  font-size        : 12px;
  border-bottom    : 1px solid #686868;
  background-color : #444444;
  font-weight      : normal;
  padding          : 2px 0;
  color            : #f1f1f1;
  padding-left      : 10px;
  text-decoration  : none;
}
a.mainlevel:hover {
  border-bottom    : 1px solid #686868;
  background-color : #333333;
  font-size        : 12px;
  font-weight      : normal;
  color            : #999999;
  text-decoration  : none;
  padding-left      : 10px;
}
#active_menu {
  color            : #999999;
  border-bottom    : 1px solid #686868;
  background       : url(../images/li_bullet.gif) #333333 96% 50% no-repeat;
  font-weight      : normal;
  text-decoration  : none;
}
a#active_menu:hover {
  color            : #f1f1f1;
}





/** Sublevel for Mainmenu  (Menu Style Legacy-Vertical) **/

.sublevel {
   font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size        : 11px;
   font-weight      : bold;
   color            : #cccccc;
   padding    	  : 3px 1px 3px 5px;
   margin		  : 3px;
   
}
a.sublevel:link, a.sublevel:visited {
  color		        : #cccccc;
  text-decoration	: none;
}
a.sublevel:hover {
  color            : #7BD32C;
  text-decoration  : none;
}
a.sublevel#active_menu  {
      background: transparent;
	color           : #7BD32C;
	text-decoration	: none;
      border-bottom    : none !important;      
}



/**  Main Menu  (Menu Style List) **/

.moduletable_menu ul, .moduletable_menu ul li
{
  background-image: none;
  list-slyle:none;
  display           : block;
  width             : auto;
  margin           : 1px 0px;
  padding          : 0;
  font-size        : 12px;
  background       : none;
  line-height: 18px;
    
}
.moduletable_menu ul{
padding     : 3px 10px 0 10px;
}

.moduletable_menu ul li a, .moduletable_menu ul li a:link, .moduletable_menu ul li a:visited
{
  display          : block;
  font-size        : 13px;
  font-weight      : normal;
  padding          : 2px 0;
  color            : #f1f1f1;
  padding-left     : 10px;
  text-decoration    : none;
  border-bottom    : 1px solid #686868;
  background-color : #444444;

}

.moduletable_menu ul li a:hover
{
  
  font-size        : 13px;
  font-weight      : normal;
  color            : #999999;
  text-decoration  : none;
  padding-left     : 10px;
  text-decoration	 : none;
  border-bottom    : 1px solid #686868;
  background-color : #333333;
}
.moduletable_menu ul li.active a:link, .moduletable_menu ul li.active  a:visited
{
  color            : #999999;
  border-bottom    : 1px solid #686868;
  background       : url(../images/li_bullet.gif) #333333 96% 50% no-repeat;
  font-weight      : normal;
}



.moduletable_menu ul li ul li a:link, .moduletable_menu ul li ul li a:visited, .moduletable_menu ul li ul li ul li a:link, .moduletable_menu ul li ul li ul li a:visited
{
   display          : block;
   font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size        : 12px;
   font-weight      : bold;
   color            : #f1f1f1;
   padding    	  : 3px 1px 3px 5px;
   margin		  : 3px;
   text-decoration  : none;
   text-indent      : 10px;
   border           : none;
   background:none;
}

.moduletable_menu ul li ul li a:hover, .moduletable_menu ul li ul li ul li a:hover
{ background:none;
  font-size        : 12px;
  font-weight      : normal;
  color            : #cccccc;
  text-decoration  : none;
  text-indent      : 10px;

}

.moduletable_menu ul li.active ul li a:link, .moduletable_menu ul li.active ul li a:visited, .moduletable_menu ul li.active ul li ul li a:link, .moduletable_menu ul li.active ul li ul li a:visited
{
   display          : block;
   font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size        : 12px;
   font-weight      : normal;
   color            : #f1f1f1;
   padding    	  : 3px 1px 3px 5px;
   margin		  : 3px;
   text-decoration  : none;
   text-indent      : 10px;
   border: none;
   background:none;
   background-image : url(../images/arrow.png) ;
   background-repeat: no-repeat;
   background-position: 1px 5px;
   padding-left     : 10px;
}

.moduletable_menu ul li.active ul li a:hover, .moduletable_menu ul li.active ul li ul li a:hover
{ background:none;
  font-size        : 12px;
  font-weight      : normal;
  color            : #999999;
  text-decoration  : none;
  text-indent      : 10px;
  background-image : url(../images/arrow.png) ;
  background-repeat: no-repeat;
  background-position: 3px 5px;
  padding-left     : 10px;
}

Larenz · #6 (**permalink**) 26/10/2008, 11:07

Intenta colgar las imágenes y explica un poco mejor o da un ejemplo de lo que deseas hacer para así ir más detallado en las explicaciones.

StreaK · #7 (**permalink**) 27/10/2008, 01:55

Subo la imágenes a ver si se ve mejor.

En esta se ve la página inicial, se ve la imagen en el centro (vertical) y el artículo a la izquierda. Todo ok.
http:// LinkImagen.Com/Imagen.aspx?Id=55535

En esta... si clico en el menú categorías (parte superior de la primera imagen), aquí se mostrarán artículos u otras categorías, aquí la imagen desaparece y se ve como el texto no ocupa una columna como en la primera imagen, y pongo la imagen como background no evita que el texto quede en una columna, pasa sobre la imagen.
http:// LinkImagen.Com/Imagen.aspx?Id=55536

Larenz · #8 (**permalink**) 27/10/2008, 10:47

No se que pasa que la segunda imagen no logro verla completa. Refresco la página y nada, solo me sale hasta donde dice categoría.... y todavía no puedo ver como es tu problema...

StreaK · #9 (**permalink**) 29/10/2008, 12:07

es que la segunda imagen es asi

porque no le he puesto texto, pero solo con el titulo se ve que es mas largo que el de la página inicial. quiero toda la página con el mismo formato de la página inicial, columna a la izquierda con texto, imagen de el medio, a la derecha de momento libre.

Larenz · #10 (**permalink**) 29/10/2008, 14:12

Ok checo d nuevo y comparo tu código

StreaK · #11 (**permalink**) 30/10/2008, 02:20

ok gracias, quedo a la epera