Cambiar la Flecha del elemento SELECT

coligo mas en orden y he añadido un vinculo para el ejemplo

Diseño Web HTML5 CSS3 Javascript

Hola esto va a ser una entrada corta, os voy a enseñar como cambiamos la flecha en un formulario con un elemento SELECT –

Aqui esta el ejemplo ya acabado

OK tenemos nuestro FORM (cuestionario)  con un elemento SELECT

‹form action="" method="post" name="form1" id="form1"
‹div class="flechita"›
‹select name="select" class="fondocasilla" id="select"›
‹option›All locations‹/option›
‹option value="VF"›Vejer de la Frontera‹/option›
‹option value="TF"›Tarifa‹/option›
‹option value="CA"›Cdiz‹/option›
‹option value="MA"›Mlaga‹/option›
‹/div›
‹/select›
‹/form›

Como podeis ver he añadido un DIV para controlar todos los elemento de la caja del SELECT & ahora el CSS –

.flechita select {
 border: 1px solid #ccc;
 background: URL(../imagenes/arrow.png) no-repeat 298px 3px #fff !important;
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 }

Las lineas mas importantes aqui son la del fondo & la de quitar la flecha – para quitar la flecha que viene por defecto según el navegador usamos el APPEARANCE:NONE (creo que en IE antiguos habra problemas a quien le interesa ese tema…

View original post 62 more words

Cambiar la Flecha del elemento SELECT

Hola esto va a ser una entrada corta, os voy a enseñar como cambiamos la flecha en un formulario con un elemento SELECT –

Aqui esta el ejemplo ya acabado

OK tenemos nuestro FORM (cuestionario)  con un elemento SELECT

‹form action="" method="post" name="form1" id="form1"
‹div class="flechita"›
‹select name="select" class="fondocasilla" id="select"›
‹option›All locations‹/option›
‹option value="VF"›Vejer de la Frontera‹/option›
‹option value="TF"›Tarifa‹/option›
‹option value="CA"›Cdiz‹/option›
‹option value="MA"›Mlaga‹/option›
‹/div›
‹/select›
‹/form›

Como podeis ver he añadido un DIV para controlar todos los elemento de la caja del SELECT & ahora el CSS –

.flechita select {
 border: 1px solid #ccc;
 background: URL(../imagenes/arrow.png) no-repeat 298px 3px #fff !important;
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 }

Las lineas mas importantes aqui son la del fondo & la de quitar la flecha – para quitar la flecha que viene por defecto según el navegador usamos el APPEARANCE:NONE (creo que en IE antiguos habra problemas a quien le interesa ese tema lo tiene que buscar mas por la pagina de MICROSOFT…) & ahora para insertar una imagen de fondo que nos sirva como flecha uso el BACKGROUND con su URL de la imagen, los dos valors de pixeles son la posición X y la posición Y de la imagen de fondo sale guay creer me o mirar aqui 🙂

Ya esta

Una semana productiva a todos

Amit

Temas con WordPress

Creando tema hijo

El fin de crear un tema hijo es realizar cambios en nuestro tema, cambios que no podemos conseguir usando exclusivamente el escritorio de WordPress, es bastante aconsejable crear los menús & las diferente entradas & paginas antes de empezar con el desarrollo del tema hijo (aunque no es imprescindible hacerlo).

Como siempre llegamos hasta el limite con una técnica & entonces llega el momento de explorar otra, en la ultima semana hemos llegado a crear una web (o blog) a través del WordPress.com – un servicio gratuito & limitado que nos facilita crear paginas con mucha funcionalidad (usando un set de plugins) y con bastante opciones a la hora del diseñe (instalando los temas ofrecidas por el WordPress.com), el siguiente paso fue instalar un servidor local con la aplicación del WordPress ya instalada (usando Bitnami – Bitnami.org), tenemos la aplicación en su forma abierta podemos instalar cualquier plugin & temas que nos interesa & con un poquito de imaginación se puede llegar como hemos visto a tener una web completa con diseño único, ademas teniendo en cuenta la funcionalidad que nos deja usar la aplicación & cosas extra que tiene (SEO, compatibilidad en diferente depósitos, base de datos fuerte) hemos podido tener unas ventajas muy importantes comparando con la forma clásica de desarrollo – web basada en HTML & CSS.

Ahora bien, si sentimos atrapados en un marco predefinido & queremos mostrar un poquito nuestra capacidad de diseño, si queremos añadir funcionalidad o manipular la que nos viene instalada con WordPress – ha llegado la hora de crear un tema hijo (child theme) o incluso pensar en desarrollar un tema propio & unico.

Pasos para el desarrollo de tema hijo –

1. Crear una carpeta nueva dentro de la carpeta ‘themes’ dentro de ‘wp-content’ a esta carpeta le damos un nombre significativo para nuestro tema por ejemplo – ‘hijomio’
2. crear un archivo ‘style.css’ dentro del ‘hijomio’
3. añadir la lista de comentarios adecueda para que WordPress reconozca que se trata de un tema nuevo & en que tema padre esta basado asi –

   /*
   Theme Name:     nombre de tu tema hijo
   Description:    descripción del tema hijo
   Author:         tu nombre
   Template:       el tema padre (tal y como aparece en la carpeta)
   
   (valore optativos: Theme URI, Author URI, Version)
   */

4. insertamos la orden de importar en el archivo ‘style.css’, o sea vinculamos el archivo ‘style.css’ del tema padre con nuestro tema hijo así –

   @import url("../nombre_del_tema_padre/style.css");

Ahora usando las herramientas de los navegadores (como Chrome) mas un editor de texo para CSS & HTML (TextWrangler por ejemplo o Notepad++ o el DreamWeaver) podemos buscar los elementos – sus estilos correspondientes & aplicar cambios

Suerte 🙂  & ejemplo aquí – http://www.atwild.com