Yux

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

Archivos Adjuntos

	plantillahi5.pympy.com.rar (213.1 KB (Kilobytes), 1295 visitas)
	plantilla.rar (191.3 KB (Kilobytes), 750 visitas)

Nemesis

super gracias !!!

esperaba esto :P

GRACIAS!!

MAFS503

excelente Yux...

ezZpoOnja

wuuuuu genial krnal
peroO juju soe novato i no entiendoO

Yux

que parte no entiendes?

RoCkExTrEmO...!!

woa q heneal uxazz grax yux x fin loq thantho keria jeje

ezZpoOnja

pues en la parte de coloralto tipo de letra y todo eso
tengo un codigo en mi hi del tipo de letra pero no se si cambie si ago mi
propio tapiz si cambia??? o puedo hacer el tapiz sin tener q editar el tipo de letra
y todo eso¿¿¿

Nemesis

nooooooooooooooooooooo...
yo pense q era un sola plantilla.. pero son varias partes
no es como la oficial del hi5
Yux, no tendras una por ahi.. q sea una sola ???
Porfaaaaaaaaa

Yux

no entiendo muy bien, si ya tienes otros codigos que cambian el color o tipo de letra de las que se usa en esta plantilla, pues se cambiará por el ultimo código que pongas.

hablas de los archivos psd?

Nemesis

si, pense que era un solo psd editable..
luego solo keda recortar.. y hacer en imagenes individuales..

no puedo trabajar uno por uno, luego quedan deformados..