Hojas de estilo oscommerce : Modificacion

introduccion a las hojas de estilos:

A y A:hover
:hover Al pasar el puntero del raton sobre un enlace, es la configuracion del texto de ese enlace, si el estilo de A y de A:hover es distinto habra una variacion en el enlace al pasar el puntero del raton por encima 

Estilos de tablas, celdas y filas:
el formato de una tabla es el siguiente:
<table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table> 

TD: son las celdas / casillas
TR: una fila (horizontal) de celdas / casillas

La presente descripcion es un borrador inicial que se ampliara hasta completar la definicion de todos los estilos y añadidos de modificaciones posibles para algunos de los estilos, mas imagenes de muestra.

archivo stylesheet.css mas comentarios:

/*
  $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; } /* Texto de los modulos / boxes – Tipo de letra y tamaño */
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
  background: #ffffff; /* Color de fondo de la pagina del catalogo */
  color: #000000; /* Color del texto */
  margin: 0px; /* Distancia en pixels del catalogo a los margenes de la ventana del navegador */
/* para modificar los colores de las barras de desplazamiento del navegador lo puede hacer del siguiente modo (solo se ve el efecto en ie):
  scrollbar-3dlight-color: #XXXXXX;
  scrollbar-arrow-color: #XXXXXX;
  scrollbar-base-color: #XXXXXX;
  scrollbar-darkshadow-color: #XXXXXX;
  scrollbar-face-color: #XXXXXX;
  scrollbar-highlight-color: #XXXXXX;
  scrollbar-shadow-color: #XXXXXX;
donde #XXXXXX sera el codigo de color
*/
}

/* A y A:hover corresponden a los enlaces del catalogo, A: enlaces ( color y text-decoration: none: a enlace sin subrayado) A.hover: corresponde a como cambiara el enlace al colocar el puntero del raton encima (color y text-decoration: underline: pasara a estar subrayado) */
A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  color: #AABBDD;
  text-decoration: underline;
}

FORM {
 display: inline;
}

/* CABECERA – HEADER : esta seccion corresponde a la cabecera
La cabecera esta formada por una tabla, el formato de una tabla es el siguiente:
<table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

TD: <td> </tr> corresponde a una casilla o celda de una tabla
TR: <tr> </tr> corresponde a una fila de una tabla, abarca todas las casillas en horizontal de una tabla
 */
TR.header { /* Corresponde a como deben ser las filas en la cabecera, Lo siguiente indica que el color de fondo sea blanco */
  background: #ffffff;
}

TR.headerNavigation {
  background: #bbc3d3;
}

TD.headerNavigation { /* Barra de navegacion de la cabecera. Tipo de letra y tamaño de los enlaces ( Inicio >> Catalogo >>… y Mi Cuenta | …); background: color de fondo de esa barra, por defecto es gris; color: color de los >>, por defecto es blanco; font-weight: bold = texto en negrita*/
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight : bold;
}

/* Color enlaces cabecera, normal y al poner el puntero del raton encima (A.headerNavigation:hover) – blancos por defecto */
A.headerNavigation {
  color: #FFFFFF;
}

A.headerNavigation:hover {
  color: #ffffff;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #bbc3d3;
}

/* Barra del pie de pagina, footer, de color gris por defecto, Con fecha y numero de peticiones desde … en la pagina
tipo de fuente, tamaño, color de fondo: gris por defecto, color del texto que aparece en la barra, blanco por defecto, y tipo de letra, en negrita por defecto */
TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight: bold;
}

/* MODULOS – boxes:

color de los BORDES de los MODULOS, tanto de los modulos de las columnas como de los centrales  */
.infoBox {
  background: #b6b7cb;
}

/* Contenido de los modulos o boxes,
COLOR de FONDO de MODULOS / boxes. 
tamaño de letra de texto: afecta solo al texto de algunos modulos: Modulo comentarios, Modulo notificaciones, Modulo fabricante al ver el producto */
.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

/* CABECERAS MODULOS / boxes
tipo de fuente
tamaño de la fuente
tipo de letra, en negrita por defecto
color de fondo de la cabecera de los modulos: gris por defecto, (si la cambia tenga en cuenta que las esquinas de la cabecera, redondeadas o cuadradas son imagenes GIF de color gris que no cambian con este archivo, se deben editar con un programa de dibujo y cambiarles el color para que sea igual al de fondo de la cabecera del modulo, los archivos son estos:
ESQUINA CUADRADA: catalog/images/infobox/corner_right_left.gif
ESQUINA REDONDEADA: catalog/images/infobox/corner_right.gif
Nota: tener en cuenta que si se modifica el tamaño de letra a un tamaño muy grande hara mas alta la cabecera y los gif de las esquinas deberan estar adaptados a esa altura para que concuerden y no se vea mal el diseño.
*/
TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

/*  COLOR DE FONDO ALTERNO en listas de productos de una categoria o subcategoria, en listas de productos de cada fabricante, en lista de productos al realizar una busqueda,..
  */
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #f8f8f9;
}

/* Borde de modulos centrales que muestran la lista de productos
de una categoria o subcategoria
de los productos que hay de un fabricante en el catalogo
de los productos al realizar una busqueda
Tamaño del borde */
TABLE.productListing {
  border: 1px;
  border-style: solid; /* solid: solido; dashed: con lineas del tipo —-; groove: el borde izquierdo y superior en negro, y el derecho e inferior del color que se indiquen; hidden: oculto; none: ninguno  */
  border-color: #b6b7cb; /* COLOR BORDE de los MODULOS CENTRALES de LISTAS de productos de CATEGORIAS y SUBCATEGORIAS, productos de un fabricante y resultados de busqueda */
  border-spacing: 1px;
}

/* CABECERAS de los MODULOS CENTRALES que muestran una LISTA productos de
una CATEGORIA o SUBCATEGORIA
todos los productos de un fabricantes
o resultados de una busqueda
tipo de fuente
tamaño de letra
color de fondo de la cabecera, gris por defecto
color del texto de la cabecera, blanco por defecto
tipo de letra, negrita por defecto */
.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #b6b7cb;
  color: #FFFFFF;
  font-weight: bold;
}

/*  Texto interno del modulo central que muestra listado de productos
Nombre de producto, precio,…
tipo de letra y tamaño
 */
TD.productListing-data {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

/* Color de:  2,3,4  [Siguiente >>]
enlace para ver siguiente pagina de resultados de productos en listas de productos */
A.pageResults {
  color: #0000FF;
}

/* el anterior pero con el efecto al posicionar el puntero del raton encima,
cambia color del enlace
y cambia el color de fordo de: [Siguiente >>]  */
A.pageResults:hover {
  color: #0000FF;
  background: #FFFF33;
}

/* A VER QUE TENEMOS AQUI
tipo de letra, tamaño de letra, en negrita por defecto, y color del texto
tambien de las demas cabeceras de pagina
CATEGORIA
- NOMBRE DE PRODUCTO -
- PAGINAS DE INFORMACION: ENVIOS / devoluciones,…
etc…
 */
TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #9a9a9a;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

/* TEXTO DESCRIPCION DE PRODUCTO
Y
TEXTO DEL CATALOGO
Bienvenido Invitado! ¿Le gustaria entrar en su cuenta o preferiria crear una cuenta nueva?
texto de informacion
Tipo de fuente, tamaño de letra */
TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5; /* Espacio de la altura de linea entre una y otra del texto */
}

/* letra pequeña usada en el catalogo
por ejemplo para:
Haga Click para agrandar – enlace para ampliar la foto en la pagina de producto
Este producto esta en nuestro catálogo desde …
ENLACES – NOMBRES DE PRODUCTOS en MODULOS CENTRALES
texto copyright del footer
nombres de categorias
Viendo del 1 al 3 (de 3 productos) Páginas de Resultados:  1  – En listados de productos
 */
TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.fieldKey {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

/* CAJAS DE BUSQUEDA – SEARCH – Y CAJAS de DESPLEGABLES – casillas de cantidad de productos en carrito
tipo de letra
tamaño de la letra, mas grande = mas grande la caja de busqueda */
CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

/* Bienvenido INVITADO! o usuario, texto del nombre de usuario o la palabra: invitado! de la portada  */
SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #7b9ebd;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

/* Precio de ofertas*/
SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
/* ERROR CABECERAS – WARNINGS – Puedo escribir en el fichero de … Y de otras advertencias en el catalogo
Tipo de fuente, tamaño de letra y color de fondo: */
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

/* Texto de campos requeridos en formularios: * Dato Obligatorio, * (p.ej. 21/05/1970) y asteriscos  */
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

Related posts: