CSS

El placeholder, los campos de selección y Contact Form 7

¿Qué es un placeholder? Para los que aún no lo tengan claro el atributo placeholder o marcador de posición se incluyó en HTML5 para añadir información adicional a la que ya proporciona la propia etiqueta (label) de los campos de texto (input) y áreas de texto (textarea) de los formularios, por ejemplo el código HTML: [crayon-5bc4ace4498e4722074627/] Genera este resultado: En este simple ejemplo se puede apreciar claramente la diferencia entre una etiqueta y un marcador de posición. Digamos que el placeholder es ese texto que aparece de forma predeterminada antes de comenzar a escribir en el campo y que desaparece [...]

2018-04-17T14:26:06+00:0017 de abril de 2018|Categorías: Tutoriales|Etiquetas: , , , , |Sin comentarios

Personalizando los colores de los estados de pedido

WooCommerce 3.3 Una de las grandes novedades de WooCommerce 3.3 es el rediseño de la página Pedidos haciéndola mucho más simple y visual. Ayer actualizamos a todos nuestros clientes a la nueva versión de WooCommerce, concretamente a la actualización publicada ayer mismo, la 3.3.2, y hoy algunos clientes ya nos han solicitado que les personalizáramos el color de algún estado personalizado que tenían creado y que se veía del mismo color que el estado Cancelado. Así que, dado que este problema le va a surgir a más de uno de vosotros, nos hemos decidido a compartir la fácil solución al problema [...]

2018-02-21T11:34:37+00:0021 de febrero de 2018|Categorías: Tutoriales|Etiquetas: , , , |Sin comentarios

Vídeos incrustados sensibles en WordPress

Introducción Como bien sabrás en WordPress se pueden incrustar vídeos de forma tan sencilla como pegar la URL del vídeo de YouTube en tu entrada o página para que éste se muestre automáticamente. En realidad además de vídeos de YouTube en WordPress puedes incrustar contenido automáticamente de todos estos servicios: Servicio Tipo de contenido Disponible desde Animoto. Vídeos. WordPress 4.0. Blip. Vídeos. WordPress 2.9. Cloudup. Vídeos, Galerías e Imágenes. WordPress 4.4. CollegeHumor. Vídeos. WordPress 4.0. DailyMotion. Vídeos. WordPress 2.9. Facebook. Publicación, actividad, foto, vídeo, medio, pregunta y nota. WordPress 4.7. Flickr. Vídeos e Imágenes. WordPress 2.9. FunnyOrDie.com. Vídeos. WordPress 3.0. Hulu. [...]

2018-08-28T12:40:29+00:0010 de mayo de 2017|Categorías: Tutoriales|Etiquetas: , , , , |1 comentario

Slider Revolution y sus problemas con los menús

Actualmente estamos inmersos en el diseño del nuevo sitio web de Ruralka On Road, el cual esperamos que esté en marcha a finales del mes que viene, y en el que nos hemos encontrado con un importante problema con el conocidísimo plugin para WordPress Slider Revolution. La verdad es que la resolución del mismo nos ha hecho perder no poco tiempo y estamos seguros de que a más de uno le ha surgido el mismo problema pero, y esto es lo más curioso, no hemos encontrado ningún tipo de solución publicada en ningún centro de soporte o foro especializado. Descripción de los problemas El [...]

2017-12-11T20:22:58+00:001 de diciembre de 2016|Categorías: Tutoriales|Etiquetas: , , , |Sin comentarios

¿Problemas con la hoja de estilo del tema hijo?

Cuando creamos un tema hijo a partir del tema principal que hemos elegido para construir nuestro sitio web bajo WordPress, normalmente sólo necesitamos tres archivos: screenshot.jpg: se trata de una imagen JPG de 600x450 píxeles que será la imagen de nuestro tema hijo. En APG siempre usamos nuestro propio logotipo en nuestras personalizaciones, por lo que puedes poner la imagen que más te guste. functions.php: de este archivo hemos hablado infinidad de veces y es el que nos permite añadir código PHP personalizado. style.css: se trata de la hoja de estilo donde introducimos el código CSS personalizado que necesitamos para [...]

2017-03-27T18:08:39+00:0025 de noviembre de 2015|Categorías: Tutoriales|Etiquetas: , , , , |Sin comentarios

Personalizando las imágenes de los medios de pago

Hace un par de días le pedíamos a Jesús Ángel del Pozo Domínguez, desarrollador del plugin para WooCommerce WooCommerce Sermepa payment gateway que añadiera una opción en su plugin gratuito para poder personalizar la imagen del medio de pago. Apenas tardó unas horas en responder y en añadir un nuevo filtro llamado wc_redsys_icon que nos permite personalizar la imagen desde el archivo functions.php de nuestro tema padre o hijo. Pues bien, gracias a este nuevo filtro hemos modificado completamente la apariencia de los medios de pago de nuestra propia tienda online, y aprovechamos para explicaros cómo hacerlo por si queréis replicarlo [...]

Añadiendo datos personalizados a los precios

El otro día un cliente nos pidió que le añadiéramos a los precios de los productos de su tienda virtual una serie de datos personalizados. Concretamente se trataba de una frutería online y necesitaba indicar si el precio era por kilo, pieza, bandeja... Además necesitaba que ese dato personalizado por producto se mostrara en todos los widgets y partes que componían su tienda online. Solución Para lograrlo lo primero que hicimos fue crear un campo personalizado, llamado precio_por, en la ficha de productos del panel de administración de WooCommerce. Desde ella el cliente podría añadir fácilmente el valor adecuado para [...]

2017-03-27T18:08:40+00:0020 de julio de 2015|Categorías: Tutoriales|Etiquetas: , , , , |Sin comentarios

¿Cómo añadir iconos personalizados en los productos?

El otro día os hablamos de nuestro cliente EuroPalets Group y de cómo creamos su catálogo y tienda virtual simultáneas en WooCommerce en modo catálogo para usuarios no registrados. Pues bien, hoy os vamos a hablar del mismo cliente y de otra de las necesidades que nos planteó. EuroPalets Group necesitaba que le añadiéramos a las páginas de productos de su tienda online bajo WooCommerce una serie de campos personalizados en el que todos debían mostrar un icono personalizado, y algunos, pero sólo algunos de ellos, un texto que se pudiera personalizar en la pestaña Generales disponible en la edición [...]

WooCommerce en modo catálogo para usuarios no registrados

El cliente otro día nuestro cliente EuroPalets Group nos planteó un reto interesante, montar en su sitio web bajo WooCommerce 2.3 una tienda y un catálogo online simultáneamente. Concretamente un catálogo virtual para sus visitantes y una tienda online para sus usuarios registrados. El problema es que no encontramos ningún plugin para WooCommerce que nos permitiera mostrar un catálogo online a los visitantes y una tienda virtual estándar a los usuarios registrados. Solución Lo primero que hicimos fue desactivar la opción Habilitar registro en el "Mi Cuenta" página, que se encuentra en WooCommerce -> Ajustes -> Cuentas. De esta forma [...]

¿Cómo imitar los iconos sociales de WordPress.com en Jetpack?

Iconos sociales de Jetpack Tal y como podéis ver en la imagen que acompaña a esta entrada, hace apenas unas semanas que WordPress.com cambió los iconos sociales de sus blogs, y desde entonces queríamos modificar los feos iconos sociales de Jetpack, uno de nuestros plugins favoritos, y que nos traen los chicos de WordPress, por esos tan bonitos que habían insertado en nuestro blog de WordPress. Y así, tras esperar a que en las dos últimas actualizaciones del plugin para WordPress sacaran los nuevos iconos, y tras comprobar que no están por la labor de incluirlos, nos hemos [...]

2018-06-06T09:47:20+00:009 de marzo de 2014|Categorías: Tutoriales|Etiquetas: , , , |Sin comentarios

¿Cómo usar fuentes incrustadas o embebidas en las hojas de estilo en más de un dominio?

El otro día en ¿Es posible tener una única instalación de WordPress con múltiples nombres de dominio y múltiples bases de datos? explicamos cómo instalar sobre una única instalación de WordPress varios sitios web con más de un nombre de dominio y con distintas bases de datos, lo que siempre es muy interesante, pero tras lo cual nos puede surgir algún problema, como este que explicamos hoy. Si queremos hacer uso de fuentes incrustadas o embebidas en el código de nuestra hoja de estilo CSS, lo primero que vamos a necesitar es la fuente tipográfica que queremos utilizar y pasarla [...]

2018-09-21T13:54:39+00:008 de noviembre de 2013|Categorías: Tutoriales|Etiquetas: , , , |Sin comentarios

Google recomienda el uso del diseño web sensible

Google en la última entrada publicada en su Webmaster Central Blog recomienda el uso del diseño web sensible para la construcción de sitios web optimizadas para teléfonos inteligentes (smartphones). Entre sus recomendaciones indica que sólo se debe emplear código CSS para optimizar la visualización del sitio web a los dispositivos móviles, y en el caso en el que no sea posible emplear exclusivamente CSS para ello, que se generen distintas versiones del código HTML de forma dinámica o distintas URLs para obtener los mismos resultados, tener diferentes versiones del sitio web en función del dispositivo donde se visualiza. Google incluso ha [...]

2017-12-13T15:26:55+00:0011 de junio de 2012|Categorías: Actualidad|Etiquetas: , , , |Sin comentarios