Bien, aquí les dejo un tutorial para que todos los usuarios que quieran hacer su propia plantilla para hi5, voy a utilizar el código oficial de las plantillas de pympy.
voy a tomar una plantilla que hice de ejemplo.
Como pueden ver la plantilla esta dividida en 9 partes que son:
MAINHEAD -> Cabecera -
508 pixeles
MAINNAV -> Navegación del perfil (perfil, amigos, fotos, etc)
30 pixeles
MAINCONT -> Detalles de usuario (información del usuario)
456 pixeles
SUBHEAD -> Cabecera de las sub-secciones 331 pixeles
SUBNAV -> Navegacion de las subsecciones (Editar acerca de mi, etc) 22 pixeles
SUBCONT -> Contenido de las subsecciones 300 pixeles
SUBFOOT -> cierre de las subsecciones (pie)
BG -> fondo del perfil
VANITY -> Barras de estadisticas del perfil
En total son 9 imágenes que debes hacer para tu plantilla.
Estos son los valores básicos que pueden cambiar para cambiar el color, alto, ancho, tipo de letra, etc.
color -> color de letra
height -> Alto de imagen
width -> Ancho de Imagen(es recomendable dejarlo como está)
font-family -> Tipo de letra
font-size -> Tamaño de letra
text-align -> Alineacion de las letras
background-color-> Color de fondo
Este es el código, tan solo cambia las urls de las imágenes por las tuyas, todas están con su respectivo color y nombre para que las puedan diferenciar.
<style type="text/css">
.layout {Creado por pympy.com}
#user-details { border: none; }
#profile-name {background-image:url(
MAINHEAD.jpg);color: #ffffff;height: 508px; font-family: Tahoma; font-size:30px; text-align:left; background-repeat:no-repeat;}
#profile-nav { background: url(
MAINNAV.jpg);
background-repeat:no-repeat!important;
height: 30px;
width:956px;
text-align: left;
padding-left:20px;
border:none;
color:#f0f6e2; height:12px;}
.profile-nav a, .profile-nav a:hover, .profile-nav a:visited {color: #000000;}
#profile-nav a {}.section h4 {font-family: Tahoma;color: #000000;}
body {background-color:
#000000;background-image:url(
BG.jpg);background-position: bottom
center;background-attachment: scroll;background-repeat:repeat-y;}
#user-details .content { background: url(
MAINCONT.jpg)!important;
background-position: top center!important;
background-repeat: no-repeat!important;
position: relative;
text-align: left;
color: #BE0B0D;
border-style: hidden;
border:none;
height: 456px;
width: 956px!important;}
#user-details { border: none; }
#user-details .footer {background-image:url();background-repeat: no-repeat;display: block;height: 1px;} .section a, .section a:hover, .section a:visited {color: #BE0B0D;}
.section h1 {line-height: 30px;padding: 0 7px;background-image:url(
SUBHEAD.jpg);color: #100b08;border:none;font-family: tahoma;font-size: 18px;font-style: Arial;height: 331px;}
.section h2 {background:url(
SUBNAV.jpg);height: 22px;}.section h2 a {}
.section .content {background-image:url(
SUBCONT.jpg);background-position: top;background-repeat: repeat-y;color: #BE0B0D; border:none;}
.section .footer {background-image:url(
SUBFOOT.jpg);display: block;height: 174px;}
.vanity-bar div div img,
.vanity-bar div img {display:none;}
.vanity-bar div {background:url() !important;
background-repeat: no-repeat !important;}
.vanity-bar div div {background:url(
VANITY.jpg) !important;
background-repeat: no-repeat !important;}
.emptyProfileInfo{display:none}
</style>
Dejo algunas paginas que pueden usar para subir sus imagenes.
Register for free at Photobucket.com (necesita registro)
ImageShack® - Image Hosting
TinyPic - Free Image Hosting, Photo Sharing & Video Hosting
Les dejo adjuntado los archivos .psd(4 archivos) para que lo descarguen y usen para crear sus imágenes, pueden hacer imágenes animadas o como quieran depende de cada uno.
cualquier duda postealo aqui.
Editado: Estoy dejando un segundo archivo opcional que contiene las 4 partes en un solo .psd con el nombre de plantilla
Crea tu propia plantilla(tapiz) para hi5 - Codigo oficial de pympy
Mode Lineal
