Ayuda Banner Responsive en Header

gariko · 6 Enero 2014

Hola:

Estoy intentando que el banner en el header sea responsive, pero no lo consigo.

En primer lugar comentar que el banner lo he metido directamente en la plantilla ad_header y luego desde allí he intentado hacer que sea responsive con diversas cosillas que he encontrado en xenforo, pero no me sale.

Por ejemplo la publicidad de Adsense si que es responsive, pero esto como es un banner que tengo yo en el servidor, no lo consigo, no se que hago mal, alguna sugerencia ??.

Saludos y gracias de antemano.

luis · 6 Enero 2014

Pega aquí el código que tienes, a ver si entre todos buscamos la solución.

Edito: Ya sé que soy un pesado, pero si no nos mostráis lo que estáis haciendo o intentado hacer y no nos facilitáis un poco la labor, se hace muy difícil colaborar.

gariko · 7 Enero 2014

Lo que tengo es lo siguiente:

HTML:

<xen:hook name="ad_header" />

<div style="float:right">
<a href="http://www.mi_url" target="_blank"><img src="mi_banner.jpg" width="468" height="60" /></a>
</div>

Lo que no sé es como hacer que eso sea responsive, porque he probado varias cosas, pero no funcionan.

He encontrado esto, pero no se como hacer para que me funcione:

HTML:

<xen:hook name="ad_header" />

<div id="ad_header">
<script type="text/javascript">
  width = document.documentElement.clientWidth;
  /* default 320 x 50 banner */

  var sc = document.createElement('script');
  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-320&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';



if(width > 483) {

  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-468&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';
}

if(width > 743) {

  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-728&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';
}

  sc.type = 'text/javascript';
  if(typeof sc['async'] !== 'undefined') {
     sc.async = true;
  }

  document.getElementById('ad_header').innerHTML=sc;


</script>
</div>

Cesarion · 7 Enero 2014

Tienes que crear en Adsense un bloque de anuncios adaptable. Copias el código y lo pegas en ad_header. Así debería mostrarse el banner adaptable en tu foro.

gariko · 7 Enero 2014

Ya pero el tema es que el banner no es Adsense es un imagen que tengo subida al servidor.

Los banners Adesense ya he conseguido que sean Resposive.

lms · 7 Enero 2014

Si me da tiempo, esta tarde te indico el como hacerlo. De paso, mira en esta página

Salud2

gariko · 7 Enero 2014

Perfecto.

Eso lo vi en Xenforo, aunque como tampoco es que controle mucho de código no se como implementarlo en la plantilla ad_header.

Investigare un poco a ver si consigo algo, que así es como voy aprendiendo poco a poco y con ayuda como la vuestra claro.

lms · 7 Enero 2014

gariko dijo:

Lo que tengo es lo siguiente:

HTML:

<xen:hook name="ad_header" />

<div style="float:right">
<a href="http://www.mi_url" target="_blank"><img src="mi_banner.jpg" width="468" height="60" /></a>
</div>

Lo que no sé es como hacer que eso sea responsive, porque he probado varias cosas, pero no funcionan.

He encontrado esto, pero no se como hacer para que me funcione:

HTML:

<xen:hook name="ad_header" />

<div id="ad_header">
<script type="text/javascript">
  width = document.documentElement.clientWidth;
  /* default 320 x 50 banner */

  var sc = document.createElement('script');
  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-320&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';



if(width > 483) {

  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-468&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';
}

if(width > 743) {

  sc.src = 'http://ads.domain.com/adpeeps.php?bf=showad&amp;uid=101662&amp;bmode=off&amp;gpos=center&amp;bzone=header-728&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;btotal=1&amp;btarget=_blank&amp;bborder=0';
}

  sc.type = 'text/javascript';
  if(typeof sc['async'] !== 'undefined') {
     sc.async = true;
  }

  document.getElementById('ad_header').innerHTML=sc;


</script>
</div>

Crea una plantilla y llámala (por ejemplo) ad_bannerMio y en ella pones este código

Insertar CODE, HTML o PHP:

<xen:require css="ad_bannerMio.css"/>

<div id="bannerMio" class="bannerMio">
<a href="http://www.mi_url" target="_blank"><img src="mi_banner.jpg" /></a>
</div>

Guárdala y crea una nueva plantilla llamada ad_bannerMio.css y en ella pones

Insertar CODE, HTML o PHP:

#bannerMio { max-width: 468px; max-height: 60px;float:right;vertical-align:middle; }
.bannerMio { width: 468px; height: 60px;vertical-align:middle; }
#bannerMio a img { vertical-align:middle; }
<xen:set var="$anchoB">{xen:calc '468 / 100'}</xen:set>
<xen:set var="$altoB">{xen:calc '60 / 100'}</xen:set>

<xen:if is="@enableResponsive">
   @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 80'}px;max-height:{xen:calc '{$altoB} * 80'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 80'}px;max-height:{xen:calc '{$altoB} * 80'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 61'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 61'}px;vertical-align:middle; } }
   @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 48'}px;vertical-align:middle; } }
   @media(max-width: 320px) { #bannerMio { max-width:{xen:calc '{$anchoB} * 32'}px;vertical-align:middle; }
#bannerMio img { max-width:{xen:calc '{$anchoB} * 32'}px;vertical-align:middle; } }
</xen:if>

En la plantilla ad_header poner debajo del hook:

Insertar CODE, HTML o PHP:

<xen:include template="ad_bannerMio" />

Espero que te rule bien. Me dices.

Salud2

PD: modificado con la última modificación

gariko · 7 Enero 2014

He añadido el código que me indicas y no se ve el banner.

Lo único que he hecho como no salía ha sido añadirle la posición en la plantilla:

Insertar CODE, HTML o PHP:

<xen:hook name="ad_header" />

Porque he pensado que si no le metía eso no iba a salir el banner, pero después de ponerlo tampoco se ha mostrado.

Mientras damos con ello, dejo lo que tenía antes aunque no sea responsive.

Gracias por el intento, imagino que al final lo conseguiremos.

lms · 7 Enero 2014

¡Uff! Se me olvidó decirte que en la plantilla ad_header pongas debajo del hook:

Insertar CODE, HTML o PHP:

<xen:include template="ad_bannerMio" />

Salud2

gariko · 7 Enero 2014

Perfecto, ahora si funciona y es responsive.

No se si abrir otro tema, necesito que el logo también sea responsive, porque ahora mismo se ve el banner perfectamente pero el logo del foro se ve enorme.

lms · 7 Enero 2014

Te lo pondré aquí pero mañana que me caigo de sueño.

Salud2

gariko · 7 Enero 2014

Perfecto, muchas gracias.

Yo voy investigando a ver si consigo algo aparte de volverme loco, jejeje.

Buen trabajo.

lms · 8 Enero 2014

gariko dijo:
Perfecto, ahora si funciona y es responsive.

No se si abrir otro tema, necesito que el logo también sea responsive, porque ahora mismo se ve el banner perfectamente pero el logo del foro se ve enorme.

Pasa por Logo Responsable - Responsive Logo donde está en complemento.

Salud2

gariko · 8 Enero 2014

Ya lo he instalado y lo he configurado con las medidas de mi logo, pero no termina de verse bien. Se supone que el banner si tiene un tamaño correcto, en cambio el logo lo veo demasiado pequeño no sé.

lms · 9 Enero 2014

¿En qué resolución estás en la captura? Es probable que lo reduzca demasiado. Espero encontrar tiempo para poder adecuar la reducción en el complemento a gusto del usuario.

Salud2

gariko · 9 Enero 2014

No se decirte, así es como se ve en un móvil de 4,7" en posición vertical y en posición horizontal lo mismo.

lms · 9 Enero 2014

gariko dijo:
No se decirte, así es como se ve en un móvil de 4,7" en posición vertical y en posición horizontal lo mismo.

He actualizado el recurso. Creo que ahora sí que está resuelto (mira las imágenes de la actualización).

Salud2

luis · 9 Enero 2014

Muevo el mensaje al recurso y cierro el tema que ya está solucionado...

gariko · 10 Enero 2014

lms dijo:
Crea una plantilla y llámala (por ejemplo) ad_bannerMio y en ella pones este código

Insertar CODE, HTML o PHP:

<xen:require css="ad_bannerMio.css"/> <div id="bannerMio" class="bannerMio"> <a href="http://www.mi_url" target="_blank"><img src="mi_banner.jpg" /></a> </div>

Guárdala y crea una nueva plantilla llamada ad_bannerMio.css y en ella pones

Insertar CODE, HTML o PHP:

#bannerMio { max-width: 468px; max-height: 60px;float:right; } .bannerMio { width: 468px; height: 60px; } <xen:if is="@enableResponsive"> @media(max-width: @maxResponsiveWideWidth) { #bannerMio { max-width:421;max-height:54px; } #bannerMio img { max-width:421;max-height:54px; } } @media(max-width: @maxResponsiveMediumWidth) { #bannerMio { max-width:316px; } #bannerMio img { max-width:316px; } } @media(max-width: @maxResponsiveNarrowWidth) { #bannerMio { max-width:158px; } #bannerMio img { max-width:158px; } } </xen:if>

En la plantilla ad_header poner debajo del hook:

Insertar CODE, HTML o PHP:

<xen:include template="ad_bannerMio" />

Espero que te rule bien. Me dices.

Salud2

He hecho lo que me comentas, y si que se ajusta según la resolución, pero parece que no se acaba de adaptar bien con respecto a este complemento.

http://xenfacil.com/recursos/logo-responsable-responsive-logo.52/

Por lo que me has comentado solucionando pequepos bugs del complemento el problema es más por las resoluciones que toma el banner, no acaban de quedar bien del todo.

Ante todo muchas gracias por vuestra ayuda.

¡Bienvenido a XenFácil!

¡Es gratis!

Ayuda Banner Responsive en Header

gariko

luis

gariko

Cesarion

gariko

lms

gariko

lms

gariko

lms

gariko

lms

gariko

lms

gariko

lms

gariko

lms

luis

gariko

Sobre Nosotros

Productos

¿Dónde estamos?

¡Ayuda al sitio!