¿Cómo crearon esto en el header?

Awarez · 12 Mar 2010

Hola! A todos, lo siento por molestar un poco más acá...
Tengo una pequeña duda, en como crearon esto en el Header, osea ponen la imagen y texto ¿Cómo se crea?
Alguien me puede pasar el código, o algo similar

Acá tienen muestra.
Ver el archivo adjunto 3141
Es lo que está subrayado

Andrés Durán · 13 Mar 2010

Hola Awarez.

Al parecer es una personalización propia. Examinando un poco el código fuente, verás esto:

HTML:

<table align="center" width="1%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span onClick="TRACKlink("http://www.comandogp.com.ar/f0/programa-25976.html")"><a href="http://www.comandogp.com.ar/f0/programa-25976.html"><img src="http://i46.tinypic.com/1dwdi.png" align="left"><span>WINRAR ESPAÑOL</span><p>El mejor descompresor y de mas utilidad a la hora de descomprimir tus archivos (descargatelo ahora)</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">

<span onClick="TRACKlink("http://www.comandogp.com.ar/f0/programa-26797.html")"><a href="http://www.comandogp.com.ar/f0/programa-26797.html"><img src="http://i49.tinypic.com/2004ebc.png" align="left"><span>JDOWNLOADER</span><p>Tu gestor de descarga numero uno, te permite Rapidshare, Megaupload y Otros. (descargatelo ahora)</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span onClick="TRACKlink("http://www.comandogp.com.ar/f0/programa-26432.html")"><a href="http://www.comandogp.com.ar/f0/programa-26432.html"><img src="http://i45.tinypic.com/rjpeab.png" align="left"><span>NOD 32 VERSION 4</span><p>El mas confiable y util protector contra virus. Inc. lisencias gratis y duraderas. (descargatelo ahora)</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span onClick="TRACKlink("http://www.comandogp.com.ar/f0/programa-26209.html")"><a href="http://www.comandogp.com.ar/f0/programa-26209.html"><img src="http://i45.tinypic.com/o545fp.png" align="left"><span>KMPLAYER</span><p>Uno de los mejores R. de video, que permite ver la gran mayoria de formatos en HD. (descargatelo ahora)</p></a></span></div></div></td>

  </tr>
</table>

El problema es que necesitarás el contenido del class="bannerad728".

Awarez · 14 Mar 2010

Disculpa Andrés, ¿Qué es eso de class="bannerad728" ?

Ricardo Núñez · 14 Mar 2010

Es una definición adicional del CSS que lamentablemente no puedes ver con el código fuente.

Awarez · 14 Mar 2010

Muchas gracias Rinunez, Me sacaste de una gran duda...

Andrés Durán · 14 Mar 2010

Además de lo mencionado por Rinunez, el class es lo que le da el estilo a cada uno de los recuadros en esa tabla HTML.

mephisto · 14 Mar 2010

Perdonad la molestia, pero... ¿es esto lo que buscáis?

HTML:

<style>
.bannerad728 {font:12px Verdana, Arial, sans-serif; line-height: 16px; width:auto; height:80px height:80px;}
.bannerad728 a {float:right; text-decoration:none; border:1px solid #dfdfdf;padding: 6px 8px; margin:3px 3px; width:218px !important; width:218px; height:80px !important; height:80px;}
.bannerad728 a:hover {text-decoration:none;border:1px solid #AFD6FF;background: #F0F7FF; }
.bannerad728 a span {color: #0C5BB3; text-decoration: none; font-weight:bold;}
.bannerad728 a p {color: #383a3b; margin-top: 5px;}
.bannerad728 img {margin-top:4px; margin-right:10px; border:0;}
</style>

Andrés Durán · 14 Mar 2010

Efectivamente el código que coloca mephisto es el del class ese. Lo he probado y funciona perfecto.

Con ambos aportes, te digo lo que debes hacer:

Busca en la plantilla FORUMHOME esto:

Insertar CODE, HTML o PHP:

$navbar

Añade debajo:

HTML:

<!-- Inicio de Tabla -->
<table align="center" width="1%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span><a href="http://www.ruta.com"><img src="http://rutaimagen.com/imagen.png" align="left"><span>ENCABEZADO 1</span><p>Descripción 1</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span><a href="http://www.ruta.com"><img src="http://rutaimagen.com/imagen.png" align="left"><span>ENCABEZADO 2</span><p>Descripción 2</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span><a href="http://www.ruta.com"><img src="http://rutaimagen.com/imagen.png" align="left"><span>ENCABEZADO 3</span><p>Descripción 3</p></a></span></div></div></td>

    <td>
<div style="width: 100%;  background-color: #FFFFFF;">
<div width="100%" class="bannerad728">
<span><a href="http://www.ruta.com"><img src="http://rutaimagen.com/imagen.png" align="left"><span>ENCABEZADO 4</span><p>Descripción 4</p></a></span></div></div></td>

  </tr>
</table>
<!-- /Fin tabla -->

Luego te dirijes a:

AdminCP -> Estilos y Plantillas -> Administrar Estilos

Para el estilo al que desees agregar la tabla, selecciona del menú de la derecha la opción CSS Principal.

Añade al final de la página, en el segundo recuadro de Definición Adicional de CSS el código citado por mephisto:

Insertar CODE, HTML o PHP:

.bannerad728 {font:12px Verdana, Arial, sans-serif; line-height: 16px; width:auto; height:80px height:80px;}
.bannerad728 a {float:right; text-decoration:none; border:1px solid #dfdfdf;padding: 6px 8px; margin:3px 3px; width:218px !important; width:218px; height:80px !important; height:80px;}
.bannerad728 a:hover {text-decoration:none;border:1px solid #AFD6FF;background: #F0F7FF; }
.bannerad728 a span {color: #0C5BB3; text-decoration: none; font-weight:bold;}
.bannerad728 a p {color: #383a3b; margin-top: 5px;}
.bannerad728 img {margin-top:4px; margin-right:10px; border:0;}

Y eso sería todo.

Se agradece mephisto por compartir el código CSS, ni idea de donde lo hayas sacado.

Awarez · 15 Mar 2010

Muchas gracias

Por ahora podre en cuenta eso, para ver si funciona perfectamente

---------- Actualizado a las 06:14 ---------- Original a las 05:05 ----------

Disculpa Andrés, para poner la imagen en el código de fuente, es así por ejemplo: Así
<img src="http://rutaimagen.com/imagen.png" o
<img src="/images/miimagen/Foros.png" ¿Cuál de los 2 es correcta? ¿Cómo se llama a eso?

Andrés Durán · 15 Mar 2010

Cualquier ruta que desees colocar puede servirte. Si deseas una URL absoluta, sería algo como esto:

<img src="http://rutaimagen.com/imagen.png"

Si deseas una URL relativa, sería algo como esto:

<img src="./images/miimagen/Foros.png"

No olvides el punto antes del /images.

Awarez · 16 Mar 2010

Muchas gracias