template

Home • Contacto • RSS • Translate Site • Enlaces • Gestionado con Bligoo

 

Como cambiar el botón del buscador por una imagen

Enviado por Ximena el lun 23/06/2008 a las 13:36

Antes de empezar tienes que tener la dirección de la imagen que será el botón.

Ahora, para cambiar el botón por una imagen debemos modificar el código:

input name="sa" value="Buscar" type="submit"

Por el siguiente:

input src="http://direcciondelaimagen" name="sa" 
value="Buscar" border="0" type="image"

Como te podrás dar cuenta con src="http://..." introducimos la imagen. Después, en type, reemplazamos submit por image. Además si quieres que la imagen no tenga bordes pones border="0".

 

Etiquetas: | Secciones
Leído 157 veces | | Comentar
A 1 de 1 persona le ha gustado este artículo.

Como cambiar el botón del buscador de Google

Enviado por Ximena el lun 23/06/2008 a las 13:35

El código del buscador que vamos a modificar es:

input name="sa" value="Buscar" type="submit"

 

Entonces agregamos class="form-button" (class del botón en Bligoo, es otra si la web no es de Bligoo) y queda:

 

input class="form-button" name="sa" value="Buscar" 
type="submit"

 

Con esto le damos el mismo estilo de los botones de todo el blog.

También podemos cambiar el botón por una imagen.

Etiquetas: | Secciones
Leído 120 veces | | Comentar |

Cambiar el diseño de un botón en Bligoo

Enviado por Ximena el lun 23/06/2008 a las 13:24

Con la herramienta Web Developer de Firefox podemos saber qué class tienen los botones de los formularios. Usamos (del Web Developer) CSS >View Style Information (Ctrl + Mayús. + Y) en alguno de los botones que si tienen estilo, como por ejemplo el del formulario de contacto que entrega Bligoo o el del blidget Usuarios registrados. En mi blog el class es form-button, supongo que para todos los usuarios de Bligoo es lo mismo. Esto sirve para darle estilo a botones de formularios externos como por ejemplo el del buscador Google ligado a mi blog.

En el css el código es:

.form-button
{
background #ffffff;
border: 1px solid #ddd;
}

En este código, background es el color de fondo y border el borde, 1px, el grosor de este, solid, el tipo de borde y #ddd, el color del borde.

Para ver los tipos de bordes puedes ver el artículo border.

Etiquetas: | Secciones
Leído 62 veces | | Comentar

Typography Paramount

Enviado por Ximena el sáb 07/06/2008 a las 13:42
Nuevo tema, Typography Paramount.
Esta es mi primera adaptación, de un tema, para Bligoo.
En el diseño original hay, en la columna derecha al principio, unos "blidgets" con las últimas noticias, el color de estos es verde. Para suplir esto hice el diseño de un blidget de color verde, similar, mi idea es que se ocupe para un blidget con cierta etiqueta,con un resumen de las entradas, por ejemplo, con la etiqueta "noticias".
El código de este en el CSS es:
#block-101448 {
	padding:10px;
	background:#D7F0B2;
	margin:10px 0;
	color:#537B17;
	border-bottom:2px solid #BCE67D;
	border-top:2px solid #BCE67D;
}
#block-101448 a {
	color:#2F460D;
	text-decoration:none;
	margin:10px 0 0 0 ;
}
#block-101448 a:hover {
	text-decoration:underline;
}
El número del blidget depende del número del blidget de tu blog.
Con el blidget con cierta etiqueta aparece la imagen del autor del artículo, como en el template original no tiene imagen, decidí quitarle la imagen del autor, en la plantilla el código para este fin es:
.block-content .column-user-content-icon {
        display: none;
}
El autor del Diseño pone como condición que en el pie de página se coloque lo siguiente: Design by Six Shooter Media (con el enlace correspondiente). Yo por mi parte pido que pongas: Para Bligoo por Ximena Ramirez Bruce (incluyendo el enlace).
Pruebala y me cuentas que te pareció.