He estado recibiendo solicitudes para adaptar el traductor que estoy usando en El Escaparate y que ya había explicado antes como colocar en el blog, para usarlo en blogs con fondo negro.
[1] Colocaremos el mismo código que en el anterior post, con la diferencia de que la dirección (url) de la imagen con las banderas será otra, ya que esta tendrá el fondo de color negro.
<center><img src="http://img527.imageshack.us/img527/632/84056383at1qx3.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>
[2] Añadiremos ahora unas líneas de código en la parte del CSS de nuestra plantilla, para conseguir que el traductor se vea como más nos guste.
/* Código del traductor -------- */
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
}
Ejemplo
Si dejamos este código tal como está, el resultado sería este:
Modificaciones
El código CSS está dividido en dos partes:
a) La que pertenece a la casilla donde se muestran las opciones para escoger idioma:
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
background-color:#000;
Es el color de fondo de la "cajita" de selección, en este caso está en color negro (#000) pero podemos escoger el que queramos.
color:#ddd; Es el color del texto, está en un color gris clarito, pero al igual que antes, podemos cambiarlo.
border:1px solid #999; Es borde que rodea a la caja de opciones, aquí podemos escoger el ancho (1px), el color (#999) y el tipo de borde (solid, dashed, dotted)
b) Y la que pertenece a la del botón "Traduce":
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
Aquí los cambios que pueden hacerse son los mismos que en la parte anterior, con la única diferencia de que lo que modificamos afecta al botón de "Traduce".
Nota
Si añadimos el código con el CSS para el traductor explicado anteriormente (con el fondo blanco) también servirá para adaptarlo a nuestro gusto.
Actualización:
Botella al mar ha tenido la gentileza de compartir con nosotros la imagen de las banderitas con fondo transparente, de está manera se adaptará a cualquier color de fondo:
http://img126.imageshack.us/img126/1228/84056383at1qx3ry5.png
Recuerda
En estas líneas del código podemos hacer los cambios de color del fondo, grosor y color del borde:
