Para hacerlo tendremos que editar nuestro functions.php y agregar la siguiente función:

function login_personalizado(){
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; }
</style>';
}

Luego hacemos uso del hook add_action para ejecutar nuestra función:

add_action('login_head', 'login_personalizado'); 

Quedando nuestro código en functions.php:

/*Personalizar Login WordPress */
function login_personalizado(){
 echo '<style type="text/css">
 h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; }
 </style>';
}
//Usamos el hook para ejecutar la función
add_action('login_head', 'login_personalizado');

/* Otras funciones */
//Cambiamos la url del Logo
function lo_per_url() { echo bloginfo('url'); }

//Cambiamos el nombre del titulo en el Logo
function lo_per_title() { echo get_option('blogname'); }

add_filter('login_headerurl', 'lo_per_url');
add_filter('login_headertitle', 'lo_per_title');

Y si eres de los que no les gusta escribir código existen varios plugins para personalizar el login wordpress, uno de ellos el BM Custom Login

Plugin para cambiar login wordpress

Están todos invitados, este evento es completamente gratis. Siguelo en Twitter con el hashtag #wpperu12

Inscribete aquí: https://eventioz.com/wpperu12

El HTML aplicado para este demo sera:

<a href="#" class="button">Boton CSS3</a>

Se ha creado un enlace simple al cual le agregamos el atributo class=”button”

El estilo CSS3

Primero crearemos nuestra clase .button definiendo su estilo basico.

.button{
  background:#e5e5e5;
  display:inline-block;
  margin:0 6px;
  padding:7px 20px 7px;
  color:#333;
  text-decoration:none;
  text-shadow: 0 1px 1px #FFF;
  border:1px solid #ccc;
}

Redondeamos los bordes del boton con border-radius

/* Bordes redondenados - Border Radius */
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;

Ahora modificaremos el fondo(background) con un degradado vertical usando la propiedad css3 linear-gradient

  /* Fondo Degradado - Background Gradient */
  background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  background: -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  background: -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  background: linear-gradient(top, #fefefe, #e5e5e5);

Luego agregamos 3 tipos de sombras a la clase separadas por “,” con box-shadow y rgba para aplicar transparencias.

 /* Aplcamos sombras al boton - Box Shadow */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

y para hacer “cool” nuestro boton le agregaremos un efecto de transicion, que se vera al pasar el cursor sobre el boton :hover, con la propiedad css3 transition, con la cual se pueden realizar animaciones.

 /* Animacion - Transition */
 -webkit-transition: all ease-in-out .3s;
 -moz-transition: all ease-in-out .3s;
 transition: all ease-in-out .3s;

Quedando nuestra clase .button

 .button{
    background:#e5e5e5;
    display:inline-block;
    margin:0 6px;
    padding:7px 20px 7px;
    color:#333;
    text-decoration:none;
    text-shadow: 0 1px 1px #FFF;
    border:1px solid #ccc;

    /* Bordes redondenados - Border Radius */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    /* Fondo Degradado - Background Gradient */
    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
    background:        linear-gradient(top, #fefefe, #e5e5e5);

    /* Aplcamos sombras al boton - Box Shadow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    /* Animacion - Transition */
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

Efecto :hover

Usando la propiedad css :hover(ubicar el cursor sobre un elemento), modificaremos algunas propiedades de la clase .button para darle un efecto elegante.

.button:hover{
  border-color:#adcce2; /* Modificamos el color del borde */

  /* Cambiamos los colores del fondo degradado */
  background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
  background:        linear-gradient(top, #fefefe, #f1f1f1);

  /* Modificamos las propiedades del Box Shadow para un efecto Glow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
  -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}

También podemos aplicar esta clase a los elementos de tipo <input /> o <button>

CSS3 PIE

CSS3PIE es un asistente para IE, se extiende al comportamiento de Internet Explorer para reconocer y mostrar las propiedades de CSS3.

Para su uso, debes descargar CSS3PIE, encontraras varios archivos pero solo utilizaremos PIE.htc que vamos a llamar desde nuestro archivo CSS, así que es recomendable que se ubique en la misma carpeta donde se encuentra nuestra hoja de estilo.

Selectivizr

Selectivizr se utiliza para manejar selectores css3, se utiliza en combinación de librerias js como jQuery o Mootools. Se recomienda optar por Mootools ya que admite todos las propiedades de  Selectivizr.

Para este ejemplo se utilizara el siguiente script, debe ser incluido dentro de la etiqueta <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="selectivizr.js"></script> <!-- Selectivizr -->

Ahora veamos algo de CSS3

Border Radius

Interpretando border-radius en IE con CSS3Pie.

.box{
    border-radius:8px;
    behavior:url(PIE.htc);
  }

Box Shadow – RGBA

Para interpretar box-shadow solo debemos incluir el archivo PIE.htc, tambien podemos declarar opacidad a la sombra con la propiedad RGBA.

.shadow{
    box-shadow:0px 2px 2px rgba(62,115,0, 0.75);
    behavior:url(PIE.htc);
  }

Background Gradient

.box{
  background: -webkit-linear-gradient(top, #c9ed8a,#72aa31);
  background: -moz-linear-gradient(top, #c9ed8a,#72aa31);
  background: -o-linear-gradient(top, #c9ed8a,#72aa31);
  background: -ms-linear-gradient(top, #c9ed8a,#72aa31);
  background:linear-gradient(top, #c9ed8a,#72aa31);

  -pie-background:linear-gradient(#c9ed8a,#72aa31);
  behavior:url(PIE.htc);
}

Multiple Background

.multiple{
    background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, -webkit-linear-gradient(#c9ed8a,#72aa31);
    -pie-background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, linear-gradient(#c9ed8a,#72aa31);
    behavior:url(PIE.htc);
  }

Selectores CSS3

Ahora usaremos Selectivizr que nos permite agregar pseudo-clases y atributos css3 a navegadores que no lo soportan. Funciona desde IE6.

Solo se debe incluir la librería javascript como se menciono al principio.

.box span:first-child{
    background:#333;
    color:#fff;
  }

  .box span:nth-child(2n) {
  background: #3de1ff;
  }

  .box span:last-child{
    background:#fff114;
    color:#333;
  }

IE Filter

También podríamos usar filtros de IE (IE filter) para agregar propiedades CSS3. Por ejemplo background-gradient

.box{
    background:#333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9ed8a', endColorstr='#72aa31');  /* IE */
  }

El cambio mas notable es el del Huddle, herramienta de mensajería instantánea,  que ahora pasa a llamarse Messenger, donde ahora es posible enviar imágenes o fotos en las conversaciones.

+ Novedades

1. Entrar en quedadas( o hangouts ) desde la aplicación móvil
2. Selecionar foto de perfil
3. HolaHola ahora es Messenger
4. Enviar fotos en Messenger
5. Mejoras de fiabilidad en Messenger
6. Pulsación larga en publicaciones de las novedades para hacer +1, compartir y ocultar
7. Compatibilidad de reproducción de vídeos mejorada
8. Búsqueda pública de personas mejorada
9. Configuración detallada de notificaciones
10. Permite pasar la aplicación a la tarjeta SD
11. Compatibilidad mejorada para menciones con +

Puedes instalar google+ directamente desde el Android Market, requiere Android 2.2, a tener en cuenta la aplicación APK tiene un peso de 9.8MB.

Si prefieres puedes descargar directamente el APK desde aquí:

Una vía fantástica para explorar y entender la sintaxis HTML5.

Html5 Portafolio

ElegantPress

Vibrant & Professional

Nova

Vivid Photo

Shinra

Simple Style 7

Minimalism.

Touch the Future

Iphone App Template

One page Portafolio

Sanaroo

Plantilla Html5 y CSS3

DowntoBiz

OWMX-2 Html5 y CSS3

Aqui podras descargarel apk de Google+ 1.0.1, requiere Android 2.1 +

Crearemos el código html, como se daran cuenta no se necesitan muchas lineas para este formulario

<form id="form">
<input id="busca" type="text" />
<input id="submit" type="submit" value="BUSCAR" /></form>

A continuación pasaremos a darle los estilos al elemento que tiene como id “form”, usando css3 le daremos  un degradado de fondo y sombras.

#form{
 background:#fff; /* Navegadores que no soportan css3 */
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8E8E8));
 background:-moz-linear-gradient(100% 100% 90deg, #E8E8E8, #FFFFFF);

/* Sombras */
 -webkit-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);

 padding: 12px;
 margin: 10% auto;
 width: 480px;
 height: 55px;
}

ahora procederemos a darle estilos al input text que tiene el id “busca” le pondremos borde redondeado.

#busca{
 /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: 1px 1px 1px #FFF;
  -moz-box-shadow: 1px 1px 1px #FFF;
  box-shadow: 1px 1px 1px #FFF;

  padding:6px;
  width:345px;
  height:32px;
  border:1px solid #D9D9D9;
}

Ahora estilizaremos el input ”submit”

#submit{
 background:#86ACB5; /* Navegadores que no soportan css3 */
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#77A5AE), to(#629099));
  background:-moz-linear-gradient(100% 100% 90deg, #629099, #77A5AE);

  /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);

  float:right;
  width:100px;
  height:32px;

  color:#FFFFFF;
  text-shadow:0px 1px 3px #656565;

  cursor:pointer;
  border:0;/* Quitamos el borde que le da la sensación de relieve a este input*/
}

y ya se puede visualizar el formulario con los estilos, pero ocurre que el ancho de #form y el #busca se ven afectados por el padding que le asignamos  a cada uno.

para solucionar esto solo agregaremos la propiedad box-sizing a estos elementos

#form, #busca{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

El año pasado ya habia hecho un formulario parecido, pueden verlo aquí, pero en ese tiempo use mucho código para un formulario tan simple. Con el tiempo y la practica he ido mejorando en cuanto a la estrucutra html se trate.

Espero que este post les haya gustado, hasta la prox.

Aquí iré poniendo posteando tutorial de diseño web, maquetación,  códigos html/css, jquery, wordpress, html5, css3,  archivos para descargar como psd, apps para android que en algunos casos son difíciles de encontrar, tambien sobre navegadores como chrome, firefox, extensiones que facilitaran el trabajo en web, soluciones a los problemas que se me presentaron al realizar un trabajo y quizás a alguno de uds, tips y trucos, enlaces interesantes… etc.

Este sera un medio por el cual se pueda compartir conocimientos y  seguir aprendiendo mas sobre este fascinante mundo del internet.

Si desean pueden ponerse en en contacto conmigo mediante las redes sociales mostradas en el pie de pagina.

Espero  que este blog sea de su agrado.

Es un gusto.

Bienvenidos =)