Suscribe Via

Empezamos un tutorial de como modificar la hoja de estilos de las tiendas osCommerce llamada stylesheet.css

Abrimos nuestra hoja de estilos con un editor de texto como el bloc de notas que trae por defecto windows, con dreamweaver o con topstyle.

Y nos encontraremos con las etiquetas que definen los estilos de nuestra tienda osCommerce.
body
TR.header
TR.headerNavigation
TD.headerNavigation
TR.footer
TD.footer
.infobox
.infoboxcontents
.infoboxheading

dentro de estos estilos tenemos parte del diseño de nuestra tienda virtual.
Empecemos a modificar nuestra tienda

En nuestra etiqueta “body” podemos darle un ancho predefinido a la tienda con margenes superior, inferior, derecho e izquierdo, medido en pixeles, por ej., añadamos un ancho a la tienda de 900px.

Las instrucciones, como ancho, alto,margenes, etc…, deben ir en inglés:
body { width:900px;}

podeis practicar añadiendo imagenes de fondo, cambiando el color de texto y de fondo….

Seguimos, imaginemos que queremos modificar el color de los enlaces en general, después del estilo “body” tenemos 2 estilos:
color del enlace:
A {
color:#0099FF;
text-decoration: none;
}
color del enlace cuando posicionas el ratón encima del enlace:
A:hover {
color:#33FFFF;
text-decoration: none;
}

Continuaremos en próximas semanas

Artículos relacionados:

Paginas: 1 2 3 4