Modelo de Skin

Creamos estos elementos gráficos

skin1

rotsqldatos.png

botsqldatos.png

bgsqldatos.png

btnsqldatos.png

Definimos la hoja de estilos para crear el skin del patrón datoslista

sksql.css será el nombre con el que grabamos el archivo

.areacn {

width:237px;

height:300px;

float:left;

display:block;

position:relative;

background-color:#1a1a1a;

color:#fff;

margin-right:4px;

background:url(bgsqldatos.png) repeat-y top left;

}

.areacn a{color:#0F0;}

.areacn a:link{color:#0F0;}

.areacn a:visited{color:#0F0;}

.areacn .arbtitle {

font:Arial, Helvetica, sans-serif normal;

font-size:12px;

height:50px;

background:url(rotsqldatos.png) top left no-repeat;

color:#0F0;

padding:15px 4px 0px 4px;

}

.areacn .arbdeta {

padding:10px;

font-size:10px;

color:#FFF;

background:inherit;

}

.areacn .arbdesc {

padding:10px;

font-size:10px;

color:#FFF;

background:inherit;

}

.areacn .arbmasinfo {

display:block;

position:absolute;

bottom:30px;

left:2px;

background:url(btnsqldatos.png) no-repeat top left;

width:230px;

height:30px;

text-align:center;

color:#FFF;

font-size:10px;

}

.areacn .arbpie {

display:block;

position:absolute;

bottom:0px;

left:0px;

background:url(botsqldatos.png) no-repeat top left;

width:237px;

height:25px;

text-align:center;

color:#FFF;

font-size:10px;

}

.toggler {cursor:pointer}

Procedemos a subir los elementos dentro de una carpeta que llamamos css

skinlist

Configuramos en el contenedor el patrón con la información que se desea mostrar

skincont

en este caso vamos a seleccionar los datos cargados como sq, no deseamos el paginado inferior, la navegación será ShadowBox, los links irán en Titulo y Mas Info, los elementos a mostrar serán Titulo, descripción, Mas Info y pie, mostramos hasta 4 elementos, el skin se llama sksql y lo hemos subido a la carpeta css (recuerde que no debe poner la extensión .css)

skinfinal

Esta es la lista de elementos que vamos a mostrar