Like Tree5Likes
  • 1 Post By Andrés Durán
  • 2 Post By mephisto
  • 1 Post By Andrés Durán
  • 1 Post By Andrés Durán

¿Cómo crearon esto en el header?

Esta es una discusión para el tema ¿Cómo crearon esto en el header? en el foro vBulletin 3 - Preguntas, Problemas y Soluciones, bajo la categoría Soporte vBulletin; 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 ...
Página:


Resultados 1 al 11 de 11

Temas similares

  1. Por jaribas en el foro Soporte para Productos/Plugins
  2. Hacer esto en el Header Respuestas: 0
    Por Ricardo Núñez en el foro vBulletin 3 - Preguntas, Problemas y Soluciones
  3. Por Skavenger en el foro vBulletin 3 - Preguntas, Problemas y Soluciones
  4. Por rolito en el foro vBulletin 3 - Preguntas, Problemas y Soluciones
  5. como achicar header Respuestas: 0
    Por hiscl en el foro Archivos de vBulletin 3.0 - 3.7
  1. #1
    Miembro especial Miembro de oro Array Avatar de Awarez
    Fecha de ingreso
    27 jul, 09
    Mensajes
    216
    Gustado
    8 Veces
    Me Gustan
    39 Veces

    Exclamation ¿Cómo crearon esto en el header?

    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.
    Dibujo..PNG
    Es lo que está subrayado

  2. #2
    Miembro especial Miembro de diamante Array Avatar de Andrés Durán
    Fecha de ingreso
    23 abr, 09
    Ubicación
    Costa Rica
    Mensajes
    5,480
    Gustado
    1999 Veces
    Me Gustan
    142 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    Hola Awarez.

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

    Código 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".
    Yo solía ser un gurú de vBulletin. Solía...

    Find me on Facebook.

  3. #3
    Miembro especial Miembro de oro Array Avatar de Awarez
    Fecha de ingreso
    27 jul, 09
    Mensajes
    216
    Gustado
    8 Veces
    Me Gustan
    39 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

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

  4. #4
    Miembro especial Miembro de diamante Array Avatar de Ricardo Núñez
    Fecha de ingreso
    17 dic, 08
    Ubicación
    San Diego, CA
    Mensajes
    2,057
    Gustado
    426 Veces
    Me Gustan
    148 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    Es una definición adicional del CSS que lamentablemente no puedes ver con el código fuente.
    Ricardo Núñez
    Las reglas están hechas para romperse, menos las de vBhispano.

  5. #5
    Miembro especial Miembro de oro Array Avatar de Awarez
    Fecha de ingreso
    27 jul, 09
    Mensajes
    216
    Gustado
    8 Veces
    Me Gustan
    39 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

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

  6. #6
    Miembro especial Miembro de diamante Array Avatar de Andrés Durán
    Fecha de ingreso
    23 abr, 09
    Ubicación
    Costa Rica
    Mensajes
    5,480
    Gustado
    1999 Veces
    Me Gustan
    142 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    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.
    Awarez le gusta esto.
    Yo solía ser un gurú de vBulletin. Solía...

    Find me on Facebook.

  7. #7
    Banned Array
    Fecha de ingreso
    07 nov, 08
    Mensajes
    86
    Gustado
    11 Veces
    Me Gustan
    1 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    Perdonad la molestia, pero... ¿es esto lo que buscáis?
    Código 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 y Awarez les gusta esto.

  8. #8
    Miembro especial Miembro de diamante Array Avatar de Andrés Durán
    Fecha de ingreso
    23 abr, 09
    Ubicación
    Costa Rica
    Mensajes
    5,480
    Gustado
    1999 Veces
    Me Gustan
    142 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    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:

    Código:
    $navbar
    Añade debajo:

    Código 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:

    Código:
    .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 le gusta esto.
    Yo solía ser un gurú de vBulletin. Solía...

    Find me on Facebook.

  9. #9
    Miembro especial Miembro de oro Array Avatar de Awarez
    Fecha de ingreso
    27 jul, 09
    Mensajes
    216
    Gustado
    8 Veces
    Me Gustan
    39 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    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?



  10. #10
    Miembro especial Miembro de diamante Array Avatar de Andrés Durán
    Fecha de ingreso
    23 abr, 09
    Ubicación
    Costa Rica
    Mensajes
    5,480
    Gustado
    1999 Veces
    Me Gustan
    142 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    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 le gusta esto.
    Yo solía ser un gurú de vBulletin. Solía...

    Find me on Facebook.

  11. #11
    Miembro especial Miembro de oro Array Avatar de Awarez
    Fecha de ingreso
    27 jul, 09
    Mensajes
    216
    Gustado
    8 Veces
    Me Gustan
    39 Veces

    Predeterminado Re: ¿Cómo crearon esto en el header?

    Muchas gracias