Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Poner un header aleatorio [drupal]
#1
Este es un efecto que me gusta mucho, y quisiera compartir como es que lo conseguí.

Estos pasos los realice en drupal, con el tema; wafles, pero es igual mente aplicable a otros gestor de contenidos.

Hay varias formas de conseguir este efecto con php o javascript, para conserirlo lo mas sencillo posible voy a usar un pequeño código php que introduce una variable aleatoria sencilla.

Código:
<?php echo rand(1,5); ?>
*este código muestra valores al azar de 1 a 5

1.-Creamos las imágenes que van a cambiar en el header, y las guardamos en la carpeta images de nuestro tema.

2.-Abrimos el archivo style.css, y buscamos la sección del header:

Código:
/******************/
/* HEADER REGIONS */
/******************/
#header{
  background: #000000 url('images/header-bg.jpg') no-repeat center top;
  padding-left: 15px;
}

*Esto es diferente en cada tema, incluso si su encabezado no ahí imagen podemos agregar la línea background tal y como se ve, o podemos escoger otro bloque con imagen, para que cambie al azar.

3.-Posteriormente tendremos que agregar nuevas secciones una por cada imagen que queramos, lamento que sean mucho pero no encuentro una forma de ahorrarnos esto, considero que es la mejor opción ya que no nos afecta en nada si no se utilizan.

Código:
#header1 {
  background: #000000 url('images/header-bg1.jpg') no-repeat center top;
  padding-left: 15px;
}

#header2 {
  background: #000000 url('images/header-bg2.jpg') no-repeat center top;
  padding-left: 15px;
}

#header3 {
  background: #000000 url('images/header-bg3.jpg') no-repeat center top;
  padding-left: 15px;
}

….y asi todas las que queramos, una por cada imagen, que queramos que se muestre, podemos poner 99 o 999 depende de su paciencia.
*nótese que después de cada header ponemos un numero este es “importante” pues el que nos identificara la imagen que se mostrara, el nombre de la imagen como su ruta pueden cambiar siempre y cuando sepan bien donde están, pero por sencillez les recomiendo que también usen el mismo nombre con una numeración similar.

4.- ahora tenemos que buscar el archivo page.tpl.php para el tema de drupal, si usan wordpress seria el archivo header.php (y tendrían que hacer algo similar). Buscamos la capa DIV que convoca nuestro header:

Código:
<body class="<?php print $body_classes; ?>">
    <div id="page" class="clearfix">

      <div id="header">                                                             //esta linea
        <div id="header-wrapper" class="clearfix">
          
          <?php if ($search_box): ?>
          <div id="search-box">
            <?php print $search_box; ?>
          </div><!-- /search-box -->
          <?php endif; ?>
      
          <div id="header-first">
            <?php if ($logo): ?>
            <div id="logo">
*Esta casi al principio. Esa la única línea importante:

5.-las sustituimos por la siguiente:

Código:
<div id="header<?php echo rand(1,3); ?>">
*para que así muestre cada uno de nuestros header del 1 al 3 de forma aleatoria.

Incluso moviendo un poco podemos, cambiar otros parámetros como el logo de la misma forma, usando este sencillo código.


Con esto finalmente tenemos conseguiremos una imagen distinta cada que actualicemos la pagina, prueba con la tecla F5 para que veas el resultado final.

ejemplo

En mi pagina lo aplico en dos bloque en el encabezado y tope de contenido, con lo cual consigo un aspecto estético mas llamativo, pero ahí que recordar no abusar de el y usar imágenes que apenas se aprecie el cambio, o similares, para que siga siendo agradable.

En el próximo tutorial les enseñare a mostrar una imagen dentro de un bloque pero, pero que así como cambia, también cambie la ruta de enlace, útil para mostrar apilados, o publicidad.

Tutorial Original por: joksan
[Imagen: bann.png]
WWW
#2
Buen aporte Gracias
#3
como cice bucha buen aporte.,No lo vi hasta ahora. GRacias por traerlo Taq Guiño
WWW
#4
buen aporte me gust
#5
Muy bueno, estoy probando joomla, no entiendo nada, pero esto es algo que siempre me gusto, lo del header, y la verdad me va servir mucho! Gracias!
#6
buen aporte gracias^^


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Ayuda] Poner contraseña a paginas web habacuc78 10 476 22-04-2015, 10:38 AM
Último mensaje: Vicen
  Como poner 2 Div en la Misma Linea (Diseño Responsive) AngelKrak 2 692 13-02-2015, 08:01 AM
Último mensaje: Finer
  Cambiar Header de Wordpress DelPieri 9 863 05-02-2014, 03:42 AM
Último mensaje: DarkMaster
  15 herramientas para poner a prueba tu sitio web bairesre 6 891 25-10-2013, 01:33 AM
Último mensaje: Ortega.joal
  [Ayuda} Header location jebcalix 7 745 14-09-2013, 02:21 AM
Último mensaje: esteban
  ayuda para poner logo sobre imagen de cabecera cahcnehco29 8 967 13-06-2013, 03:12 PM
Último mensaje: xd2xd2
  Como poner Height 100% Jpelaez15 3 551 03-05-2013, 01:10 AM
Último mensaje: KeviNxDTM
  Codigo PHP para poner la hora local y la fecha en español torgar22 0 1,088 14-01-2013, 04:00 PM
Último mensaje: torgar22
Bombilla Poner fondo estatico a tu web ! Compudax 18 1,665 09-01-2013, 11:47 PM
Último mensaje: Jpelaez15
  Tutorial de como Poner rss de cualquier lugar de tu webweb Sergio Fg 8 1,750 01-12-2012, 04:09 PM
Último mensaje: Drod



Usuarios navegando en este tema: 1 invitado(s)