Diseñar con Estilos oscommerce 2.3.1

He creado esta entrada, viendo la necesidad abrumante que existe por darle nuestros propios diseños a oscommerce 2.3.1.

No será una entrada que desgrane todos los entresijos de la hoja de estilo, pero si nos dará una idea general de como tratar las diferentes hojas de estilo para darle nuestra propia identidad o imagen a nuestro oscommerce 2.3.1.

Lo normal es que estemos habituados a la hoja de estilo, para aquellos que ya hemos utilizado oscommerce 2.2 en sus 2 versiones, cierto es que existen algunas diferencias o modificaciones con ellas.

Empezamos con nuestra hoja de estilos stylesheet.css que se encuentra dentro de la carpeta catalog/

Lo primero que suelo hacer para evitar problemas es añadir ciertos estilos que permitirán borrar los estilos que por defecto traen los navegadores, para luego usar nuestros estilos por defecto, este tipo de estilos los conoces por reset.css. Mi forma de proceder es añadir este estilo directamente en la cabecera de la hoja de estilos catalog/stylesheet.css, antes que cualquier otro estilo que tenga o desee añadir posteriormente.

*{margin:0; padding:0; border:0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	color:white;
	 background:none;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*

Puedes copiarlo directamente y pegarlo o añadir el que desees o uses habitualmente.

Vamos a modificar varios valores de la cabecera

#header {
  height: 250px;/*cambiamos el tamaño original 60px a 250px*/
  color:#FFF;
  background-color:#444;
  background-image:url(images/tu_imagen_de_fondo.png); background-repeat:repeat-x;
}

Modifiquemos el color de fondo de la parte central, donde aparecen los nuevos productos, la bienvenida a los usuarios registrados o invitados, etc…, En la hoja de estilo por defecto viene dicho estilo vacío

#bodyContent { background-color:#333; border:1px solid #111;}/*añadimos color de fondo y un borde*/

fácil verdad

Unir las columnas derecha e izquierda con la cabecera. Por defecto, oscommerce 2.3.1 trae una separación entre la cabecera, o mejor dicho, donde se incluye el BreadCrumb (navegador de situación, si os parece bien la llamaremos sub-cabecera o sub-menú) y, las columnas derecha e izquierda

#columnLeft {
  padding-top: 0px;/*antes 5px, separacion de la columna con la cabecera*/
}
#columnRight {
  padding-top: 0px;/*antes 5px, separacion de la columna con la cabecera*/
}

En este caso, te aconsejo que cada vez que uses el valor CERO elimines la abreviatura «px», no tiene sentido y de esa forma trabajas con la accesibilidad y un formato limpio de CSS.

Te aconsejo disfrutes modificando por tu cuenta así como añadiendo nuevos estilos a los contenedores y clases de tu hoja de estilos para ver los efectos producidos.

Seguiremos modificando y añadiendo otros estilos a esta entrada y empezaremos a trabajar con las hojas de estilo de Themes Switcher más adelante.

Te invito a visitar esta entrada sobre theme-switcher

Si deseas saber algo más sobre estilos, dudas, experiencias no dudes en dejarme un comentario

[donatem]Ayudame a conseguir un morgan[/donatem]
[subscribe]Si te gusto esta entrada! Suscribetea mi RSS[/subscribe]