Como cambiar el color del fondo de la tienda?

Por defecto el fondo de la tienda es de color blanco, si queremos personalizarla a nuestro gusto, una de las cosas que podemos hacer es cambiarle el color de fondo. Para este ejemplo he seleccionado el color #DCEDF7 que es un gris azulado; evidentemente cada uno que escoja el que más le guste.

El siguiente paso es editar el fichero /catalog/stylesheet.css y tenemos que situarnos en el apartado de body,


body {
  background: #fff;
  color: #000;
  margin: 0px;
  font-size: 11px;
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
}

y modificar el atributo background por el valor #DCEDF7, tiene que quedar así:


body {
  background: #DCEDF7; //Color que hayamos escogido.
  color: #000;
  margin: 0px;
  font-size: 11px;
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
}



Guardamos los cambios y vemos como queda reflejado en la tienda:

Tips&Tricks - Quitar el fondo de una imagen con el editor pixlr

Tenemos un logo de "shopping cart" de color rojo con el fondo blanco y lo que queremos es ponerle un fondo negro; vamos a hacerlo con el editor online pixlr que mencionamos en otro post (Tips&Tricsks - Editor de imágenes online),

En este caso concreto, seleccionamos la opción 'Open image from computer', y vamos a buscar en nuestro ordenador donde tenemos guardada la imagen.

Hacemos clic en la varilla de la barra de herramientas (que hemos seleccionado con un recuadro rojo en la imagen) i lo que tenemos que hacer es seleccionar con la varilla todo lo que queremos quitar (es decir, seleccionamos las partes blancas de la imagen); para seleccionar más de un punto lo tenemos que hacer con la tecla shift presionada.

Una vez tenemos todo lo blanco seleccionado, lo que tenemos que hacer es clicar con el botón derecho del mouse y tenemos que escojer la opción 'Invert selection'; así seleccionamos la figura.

Vamos al menú File --> New Image y creamos una imagen nueva con el fondo transparente o de color; y pegamos la imagen que hemos copiado; de modo que nos tiene que quedar algo parecido a esto:

Tal y como se puede ver en la foto, el "carrito" ya no es de color blanco; se lo hemos quitado, ahora lo que queda es seleccionar el bote de pintura de la barra de herramientas; seleccionar el color que queramos para el fondo de la imagen y clicar en la foto para pintar el fondo; el resultado es este:

Ya tenemos la foto como queremos con el fondo negro. Podríamos suavizar los bordes para que no se viera tanto los cambios de color, esto en un futuro post.

Tips&Tricks - Editor de imágenes online

Estamos seguros de que alguna vez habéis querido editar una imagen (ej. quitarle el fondo) y os habéis maldecido por no tenenr el photoshop instalado y/o no tener ni "pajolera" idea de como utilizarlo...
La respuesta está en el editor de imágenes online, se accede a través de la web :

http://pixlr.com/editor/

Tal y como podemos ver en la imagen, es un "mini-photoshop", también funciona por capas, tiene un historial de modificaciones por si queremos tirar par atrás, y en la barra de herramientas es dónde se concentran la mayoría de las funciones que podemos hacer a través de este editor.

Nos ha parecido interesante, porque es muy útil que no se tenga que instalar nada en tu ordenador, y por lo tanto se puede utilizar des de cualquier lugar, en cualquier momento en que tengamos la necesidad de hacerlo.

Tips&Tricks - Crear buttons/títulos para web

En las versiones Oscommerce 2.3.X, se utiliza la programación jquery para la creación y el diseño gráfico de la pagina web.
No obstante, creemos interesante compartir con ustedes, la siguiente URL:

http://dabuttonfactory.com

Al acceder a esta web, nos encontramos directamente con el espacio de trabajo.

• Donde podemos definir el texto que queremos, y las características de la fuente; esto es lo que compone el bloque superior izquierdo.
• En la parte inferior izquierda, podemos elegir el formato de imagen (png, jpeg, gif, ico)
• En la parte superior de la derecha, pertenece a la configuración del recuadro, si lo queremos con borde, con sombra, el fondo de colores, la forma (rounded - rectangular box).
• En la parte inferior de la derecha, seleccionamos el tamaño del recuadro

Una vez tengamos el título o el boton tal y como queremos, simplemente tenemos que hacer clic en el botón 'Download' y nos lo guardamos en un nuestro pc.
Listo para cualquier utilización que le queramos dar.

Instalación de Oscommerce (parte 2)

1. Para empezar una instalación Oscommerce, presuponemos que disponemos de un servidor donde alojar la web con los requisitos mínimos (mysql, apache y php)


2. El segundo paso es bajarnos el paquete oscommerce con la versión que queramos (recomendamos una versión estable, la última estable es la 2.3.3.4, podemos descargarla aquí).


3. Una vez tenemos el zip, lo subimos a nuestro servidor. Lo podemos hacer utilizando un cliente ftp (linux: filezilla, windows: winscp; sólo son recomendaciones).


4. Una vez lo tenemos en el servidor, descomprimimos el paquete; por defecto la tienda viene dentro de catalog, si la queremos en la raíz tenemos que copiar todos los archivos y carpetas y copiarlos en la raíz de la web.

Empezamos la instalación a través de la web

La instalación se realiza en cuatro sencillos pasos, para proceder, tenemos que abrir un navegador y poner la url siguiente:

http://yourdomain.com/install.php

Anotación : la URL puede variar en función de si hemos descomprimido los ficheros dentro de catalog o en la raíz del directorio web

En la primera página del paquete oscommerce comprueba la compatibilidad con el servidor, es decir, la versión del php, del mysql, de la configuración de las variables del php,e tc. Si todo está en verde como en la imagen anterior, apretamos el botón 'Start'.

En la segunda página, nos pide los datos que hacen referencia a la Base de Datos.

• El servidor, si tenemos el mysql en el mismo servidor, pondremos localhost
• Username, el usuario que utilizamos para conectarnos a la BBDD
• Password, tenemos que ponder el password del usuario mencionado en el campo anterior
• Database Name, corresponde al nombre de la database que hemos creado especialmente para este fin (Anotación: la database tiene que estar previamente creada).

Hacemos clic en el botón 'Continue' y procederá a la validación de los datos introducidos y nos aparecerá un mensaje de exito en la parte izquierda de la pantalla o un mensaje de error si no ha sido capaz de conectar con el servidor mysql.

En la tercera pagina, nos pide los datos del servidor web.

• www Address, la dirección del dominio (ej. www.yourdomain.com/catalog/)
• Directorio web, corresponde al Root directory, dentro del servidor la ruta física donde está alojada la tienda (ej. var/www/nombre_directorio/catalog)

En la cuarta pagina, nos pide los datos propios de la tienda.

• Store Name, nombre que le queremos dar a nuestra tienda (CAMPO PUBLICO)
• Nombre del propietario, nombre del propietario de la tienda (CAMPO PUBLICO)
• E-mail address, el correo donde queremos recibir notificaciones (CAMPO PUBLICO)
• El usuario del panel de administración (por defecto, admin)
• El password de dicho usuario (Recomendación : utilización de símbolos y numeros para augmentar la seguridad)
• Nombre del directorio físico donde se aloja el panel de administración (por defecto, admin)
• La zona horaria, en el caso de España : Madrid.

En la última pagina es la confirmación de la instalación.
Nos aparece un mensaje de exito:

"The installation and configuration was successful!"

Tenemos dos botones :

1. Online Store --> Accedemos a la tienda directamente
2. Administration Tool --> Accedemos al panel de administración y configuración de la tienda 

Recomendaciones tras la instalación

El propio oscommerce te dice una serie de recomendaciones para incrementar la seguridad y quitar algunas vulnerabilidades existentes dentro del oscommerce:

1. Eliminar el directorio de instalación del servidor --> Si alguien te ejecuta la url www.yourdomain.com/install.php: "te joden la tienda".
2. Renombrar el directorio admin, podemos poner admin1, 2admin, etc. Así evitamos que nos intentan entrar en /admin que es lo que viene por defecto y lo que la mayoría dejarían.
3. Camibar los permisos del fichero /includes/configure.php --> Es un fichero de configuración y no tiene que ser editable por nadie solo el propietario (permisos 644).
4. Cambiar los permisos del fichero /admin/includes/configure.php --> Es un fichero de configuración y no tiene que ser editable por nadie solo el propietario (permisos 644).

Ya tenemos la tienda instalada, con unos datos y una configuración que nos serviran de ejemplo; ahora solos nos falta diseñarla y configurarla para satisfacer nuestras necesidades.