cssGoogleando he encontrado diversos artículos acerca de como centrar una posición fixed, la idea básicamente es fijarlo al 50% de la pantalla y restarle la medida del div a centrar con un margin, pero la cuestión es que jugando con estos valores en el código, podemos fijar este div al centro o a cualquier otra posición y hacer que se desplace acorde con el resto de la web aunque esta se encuentre en relativo. A continuación voy a poner algunos ejemplos para mostrar las posibilidades de este truquillo:

 

Esta es la idea general extraída de otros internautas:

Supongamos que tenemos un div de unos 200px de ancho y queremos centrarlo abajo de la pantalla a 20px de forma fija, para ello usaríamos el siguiente código css situándolo a la mitad de la pantalla y desplazándolo a la izquierda la mitad de su tamaño.

 
#centrado{
     width:200px;
     height:150px;
     position:fixed;
     left:50%;
     margin-left:-100px;
     bottom:20px;
}
 

Ahora bien, de esta manera también podríamos poner el div a la izquierda de la pantalla pero de forma que se situara en una esquina del div  superior en cualquier resolución jugando con los margenes.

 
#div_superior{
     position:relative;
     width:900px;
     margin:0 auto;
 
}
 

Si tenemos un div de 900px de ancho centrado como este de arriba tendriamos que modificar el div fijo de la siguiente forma para que siempre se situara en la esquina inferior izquierda de esta.

#centrado_izquierda{
     position:fixed;
     left:50%;
     margin-left:-450px;
     bottom:20px;
}
 

La cuestión es que siempre quedaría en esa posición con respecto al div relativo a pesar de la resolución, lo cual abre un mundo de posibilidades. Dejo un ejemplo para mostrar el efecto: DEMO

 
Jueves, 16 Mayo 2013 16:43

Colorear código en joomla

geshiBuscando alguna extensión de joomla que me permitiera colorear código para mostrarlo en el blog he descubierto algo que posiblemente muchos joomleros ya sabrán pero que yo desconocía, joomla ya dispone de un plugin para presentar y colorear código llamado geshi. Geshi es una clase en php creada para generar sintaxis coloreada disponible en todas las versiones de joomla.

Lenguajes soportados:

  • Css
  • Html
  • Javascript
  • Php
  • Sql
  • Xml

Estos son los que vienen por defecto con joomla pero podemos ponerle infinidad de lenguajes disponibles en su web: http://qbnz.com/highlighter/ 

Modo de uso

Buscar el plugin geshi en el gestor de extensiones de joomla y activarlo ya que por defecto viene desactivado y  después en el articulo poner el código que queramos colorear entre las etiquetas <pre xml:lang="lenguaje">  </pre>

Ejemplo

<pre xml:lang="css">

#contenido {
        margin:50px auto;
        width:450px;
        height:450px;
        background-color:#fff;
        padding:20px;
}

</pre>

Quedaría así:

    #contenido {
      margin:50px auto;
      width:450px;
      height:450px;
      background-color:#fff;
      padding:20px;
 
    }
 

Personalización

Si no gusta como queda también se pueden personalizar los colores de la siguiente forma:

  1. Entramos dentro de nuestro joomla en "plugins/content/geshi/geshi/geshi" y seleccionamos el lenguaje al que queramos cambiar los colores, en este caso css. (ojo la ruta puede variar en función de la versión de joomla, la cuestión es llegar a la carpeta donde se almacenan los archivos php para los diferentes lenguajes dentro del plugin geshi)
  2. Abrimos el archivo a cambiar, en este caso css.php
  3. Buscamos lo que queremos cambiar, por ejemplo las llaves, y modificamos el color:
'BRACKETS' => array(
    0 => 'color: #00AA00;'
    ),

Simplemente cambiamos el código de color y..

'BRACKETS' => array(
    0 => 'color: #0000FF;'
    ),
 

..ahora las llaves son azules al mostrar css.

 
 
 
Martes, 07 Mayo 2013 17:38

Nueva plantilla Grayslider

Grayslider es una plantilla para joomla que cuenta con un vistoso banner jquery con múltiples opciones de configuración disponibles desde su menú de administración, además, este template también cuenta con un  menú desplegable para mostrar submenus. En la ultima versión también es  compatible con joomla 3.

La demo de la plantilla así como su descarga se encuentra en la sección templates, accesible desde AQUÍ

También es posible descargarla directamente desde este mismo articulo.

 

Lunes, 11 Marzo 2013 00:25

Galería jquery usando backstretch

En mi ultimo proyecto la necesidad de usar una galería a pantalla completa me ha hecho redescubrir este plugin de jquery, que aunque pueda parecer un background escalable en realidad es mucho mas. A continuación explicare como montar una galería aprovechando las características de backstretch. Podéis descargarlo de aquí: http://srobbin.com/jquery-plugins/backstretch/

Comenzare por la estructura html del ejemplo:

 
<body>
  <div id="galeria">          
    <ul>
      <li><a href="#" id="imagen1"></a></li>           
      <li><a href="#" id="imagen2"></a></li>      
      <li><a href="#" id="imagen3"></a></li>          
      <li><a href="#" id="imagen4"></a></li> 
    </ul>
  </div>
</body>
 

Es una lista normal y corriente en la que identifico los enlaces para poder hacer referencia a ellos mas tarde desde backstretch y ponerles su correspondiente thumbnail.

Ahora vamos con los estilos para que esta galería tome forma y posición:

 
 
  #galeria{ 
      position:absolute;
      bottom:0;
      right:0;
      padding:20px;
      background-color: rgba(247, 236, 236, 0.50);      
  }    
  #galeria ul{
      list-style:none;   
  }
  #galeria ul li{ 
      float:left;
      margin-right:40px;
      margin-bottom:15px;
      width:150px;
      height:100px;
      box-shadow: 0 0 10px #222; 
   }
   #galeria ul li a{
      display:block;
      text-decoration:none;
      width:100%;
      height:100%;
   }
   #imagen1{
      background: url(imagen1_tb.jpg) no-repeat center;
   }
    #imagen2{
      background: url(imagen2_tb.jpg) no-repeat center; 
   }
   #imagen3{
      background: url(imagen3_tb.jpg) no-repeat center;
   }
   #imagen4{
      background: url(imagen4_tb.jpg) no-repeat center;
   }
 
 

 

Básicamente aquí lo que hago es fijar la galería abajo a la derecha y darle forma, también añado un fondo blanco con opacidad y unas sombras a las miniaturas para que estas se vean bien.

y finalmente la parte del script:

 
 
 
    $(document).ready(function() {
 
      $.backstretch([
          "imagen1.jpg"
        , "imagen2.jpg"
        , "imagen3.jpg"
        , "imagen4.jpg"
      ], {duration: 5000, fade: 2000});
 
      $("#imagen1").click(function(e) {
        e.preventDefault();
        $.backstretch('imagen1.jpg');
 
      });
 
      $("#imagen2").click(function(e) {
        e.preventDefault();
        $.backstretch('imagen2.jpg');
 
      });
 
      $("#imagen3").click(function(e) {
        e.preventDefault();
        $.backstretch('imagen3.jpg');
 
      });
 
      $("#imagen4").click(function(e) {
        e.preventDefault();
        $.backstretch('imagen4.jpg');
 
      });         
 
    });
 

 

En la primera llamada a backstretch lo que hago es pasarle todas las imágenes para que al iniciar la web los fondos vayan cambiando (usa solo esta parte si lo que quieres es un fondo cambiante sin galería ), "duration = 5000" es el tiempo que las imágenes estarán en pantalla en milisegundos y "fade = 2000" el tiempo que durara la transición de una imagen a otra, en esta caso 5 y 2 segundos respectivamente.

Las funciones posteriores lo que hacen es capturar el evento onclick de los enlaces, en este caso las miniaturas, para que backstretch únicamente muestre la imagen que corresponda a esa miniatura. Al hacerlo la velocidad de transición sera igual que la que hayamos puesto mas arriba en "fade" a no ser que también le pongamos un "fade" a estas funciones así:

 $("#imagen1").click(function(e) {
      e.preventDefault();
      $.backstretch([
      "imagen1.jpg"
 ], {fade: 1000});
 

 

Y así es como conseguimos hacer una galería con el fondo de pantalla: DEMO

Adjunto ejemplo mas abajo para su descarga. Hasta la próxima.

Martes, 05 Marzo 2013 13:45

Mi primera plantilla para joomla 3.0

Ya esta disponible en la sección templates de la web mi primera plantilla para joomla 3.0. Blogus, es una plantilla responsiva, esto es, que se adapta a la resolución de cualquier dispositivo, puesto que aprovecha la integración del bootstrap de twitter de esta nueva versión de joomla.Template Blogus

Es un template muy configurable desde el gestor de plantillas con múltiples opciones para cambiar los colores, ademas he incluido una opción para cambiar el fondo de pantalla por la imagen que se desee, la cual también se adapta a la resolución. En cuanto a su configuración las posiciones se disponen en forma de blog.

Accede a la demo y descargala desde la sección templates pinchando AQUI 

La propia plantilla también se puede descargar con el enlace que hay al final de este articulo. Para cualquier duda los comentarios están abiertos, me gustaría saber que tal funciona. Salu2

 

En esta ocasión y para dar continuidad al anterior articulo de como poner una imagen como fondo de web que se adapte a cualquier resolución con css, expondré como hacer lo mismo con jquery. La diferencia entre las dos formas de hacerlo radica en que de esta manera obtendremos compatibilidad con internet explorer.

En primer lugar descargaremos el plugin backstretch de aqui:

http://srobbin.com/jquery-plugins/backstretch/

Después de descomprimirlo tomaremos el archivo jquery.backstretch.min.js y lo copiaremos en la carpeta de nuestro proyecto.

El siguiente paso es incluirlo entre las etiquetas <head></head> de la pagina donde queremos tener el fondo sin olvidar incluir también la librería Jquery puesto que este plugin usa sus funciones. No es necesario descargar también la librería Jquery puesto que la podemos incluir directamente desde Google Code como se muestra en el ejemplo:

 
<head>
  ...
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.backstretch.min.js" ></script>
  ...
</head>
 

Finalmente solo nos queda llamar al plugin cuando el documento termine de cargarse por lo que tendremos que hacerlo justo antes de la etiqueta </body> de la siguiente forma:

 
    $(document).ready(function() {
       $.backstretch("background.jpg");
    });
 

DEMO

Un problema habitual en desarrollo web es el escalado de imágenes al usarlas como fondo de pantalla dada la gran cantidad de resoluciones existentes. La solución es bastante simple usando css, si bien no es valida para los usuarios de explorer, para los que tendremos que usar jquery, solución que detallare en el próximo articulo.

Con css usaremos la propiedad “background-size: cover” en nuestra hoja de estilos o directamente en el HTML insertando el código entre las etiquetas <style></stiye> como muestro a continuación:

 
html { 
      background: url(background.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
 

 

Puedes comprobar como quedaría pinchando aquí abajo o descargar el ejemplo adjunto al articulo.

DEMO

Voy a empezar por algo simple pero que hasta que no lo sabes te quita muchas opciones de personalización en tu web de joomla 3, se trata de personalizar los botones de los menús haciendo referencia a las clases del bootstrap de twitter incluido en este paquete de joomla. Debido a esto podemos usar las características de este framework en nuestras creaciones, algunas de ellas sin necesidad de tocar el código, simplemente usando el menú de administración como os voy a mostrar a continuación.

Pagina inicio joomla 3Vamos a tomar una instalación joomla 3 con datos de ejemplo, si nos fijamos en los botones del menú superior estos son característicos de bootstrap, esta clase según su documentación se llama nav-pills y podemos verla en su web en la siguiente dirección, en el apartado navs:

http://twitter.github.com/bootstrap/components.html

Como podemos observar investigando  la web de bootstrap hay diferentes estilos de botón así como muchos otros controles mas complejos, los cuales pueden ser usados en joomla 3, para ello entraremos en el menú de administración y en extensiones - módulos buscaremos el modulo tipo menú que queremos modificar, en mi caso el modulo "top" y en la pestaña "opciones avanzadas" modificaremos la casilla donde pone "sufijo clase de menú" añadiendo la clase que queremos, o dicho de otro modo, pondremos el nombre del botón que nos interesaOjo es MUY IMPORTANTE añadir un espacio en blanco delante de la palabra al añadirla a la casilla para que funcione correctamente, como se puede apreciar en la captura del ejemplo.

Menú avanzado

 Lo único que tenemos que hacer es sustituir ese "nav-pills" por "nav-tabs" por ejemplo y nuestro menú pasara a ser de pestañas como por arte de magia, con lo que este quedaría de la siguiente forma:

Menú con pestañas

Para finalizar, recordar, por si alguien no lo sabe, que en la pestaña anterior de ese mismo modulo menú, "opciones básicas" , podremos determinar que pestaña o botón queremos que aparezca activada  o si queremos que vayan activándose o desactivándose según la pagina en la que nos encontremos mediante el desplegable "elemento base".