logo
Blog

Cambiar la apariencia de la web (colores, fuentes, etc) a través de CSS (mini-tutorial)

Jueves, 07 de Noviembre 2013

Para cambiar la apariencia de la web, colores, tamaños de las fuentes, bordes y otros;  podemos editar los ficheros CSS que contienen la definición de cada estilo.

Los ficheros que podemos editar sin temor a perder nuestros cambios con alguna actualización de la web son:

  • El fichero css de nuestra plantilla, que por lo general se encuentra en: (puede variar dependiendo de la plantilla)
    /templates/[nombre de tu plantilla]/css/custom.css
  • El fichero css del tema de groupjoom que se encuentra en:
    /www/components/com_webemus/theme/[nombre de tu tema]/css/ custom_style.css

El fichero CSS de la plantilla se utiliza principalmente para hacer cambios relacionados con toda la web y el fichero del componente groupjoom se utiliza para cosas específicas del componente como las ofertas o el directorio de empresas.

Para poder modificar los estilos es imprecindible tener alguna herramienta como el Firebug (para firefox) que te ayudará a saber cúal es la regla CSS que debes cambiar.

Ejemplo:

Supongamos que queremos cambiar el color del descuento en una oferta.

 oferta inicial 

Desde un navegador firefox que tenga el firebug instalado, hacemos click en el boton derecho justo encima del descuento y le damos a la opcion "Inspeccionar elemento con firebug".

Al hacerlo se nos abrirá una ventana donde podemos ver el nombre de la clase que tiene el elemento que queremos cambiar.

 

firebug

 

La clase se llama wbs-deals-deal-dto y está en la linea 68 del fichero style.ccs pero no debemos cambiar ese fichero directamente ya que nuestro cambio se perdería con un actualización del groupjoom.

Es su lugar vamos a editar el fichero /www/components/com_webemus/theme/[nombre de tu tema]/css/ custom_style.css y escribimos:

.wbs-deals-deal-dto {
color: #FF8800; }

Guardamos el fichero y refrescamos la página del navegador. Hemos cambiado el color del descuento de la oferta.

oferta final

 

Blog

Publicada la versión 2.8 de Webemus GroupJoom

Martes, 29 de Octubre 2013
Tenemos el gusto de informar a todos nuestros clientes y seguidores que hemos publicado la nueva versión (2.8) de nuestro producto Webemus GruopJoom para crear webs de cupones de descuento.
 
Ya podeis verla en nuestra demo: demo.groupjoom.com
 
Blog

El cupón en el móvil, a partir de la versión 2.8

Miércoles, 23 de Octubre 2013

Ya no será necesario que los clientes impriman el cupón en su PC.

A partir de la versión de GroupJoom 2.8 los clientes podrán mostrar su cupón desde el móvil y, mas importante aún, el comercio podrá validar el cupón scaneando el código QR de móvil a móvil.

Blog

Anuncios, nueva funcionalidad en la vesión 2.8

Martes, 15 de Octubre 2013

Un anuncio es una oferta simplificada que no tiene botón de comprar o de descargar.

Simplemente un reclamo publicitario para el anunciante.

El listado de anuncios se vería como en este ejemplo:

a1sx2_Thumbnail2_anuncios01.JPG

 

Un anuncio puede mostrar o no el precio y el descuento según las opciones que usemos al crearlo.

También podemos escoger que al hacer click en la foto del anuncio o en el título nos redirija a: l

  • a ficha detallada del anuncio,
  • a la ficha detallada del anunciante
  • ó a una web externa (que podría ser del anunciante)

 Finalmente, en un anuncio, puede tener su propia foto, o podemos indicar que utilice como foto el logo de la empresa anunciante.

 

Crear un anuncio

Para crear un anuncio, vamos a la gestión de ofertas y creamos una nueva oferta.

En Tipo de oferta seleccionamos: Anuncio.

Veremos aparecer una nueva sección llamada Opciones de los anuncios donde podemos escoger algunas variantes de los mismos.

 

anuncios02.jpg

 

Crear una pestaña de menú que solo muestre anuncios

Finalmente, y aunque nuestros anuncios pueden salir mezclados con las ofertas "Normales" en los listados de ofertas, hemos creado una plantilla optimizada para los anuncios.

  • Vamos al gestor de menús y creamos un nuevo menú del tipo Ofertas: Listado de ofertas 
  • En el parámetro "Formato de las ofertas:" escogemos "Optimizada para anuncios"
  • En el parámetro "Anuncios:" escogemos "Mostrar SOLO anuncios"

anuncios03.jpg