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.
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.
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.
 a través de CSS (mini-tutorial))
