[Hi5-Tutorial] Criar Micro Hi5

Micro Hi5
Created by http://daniel0011.hi5.com ExeqeD' @


instruções

1º apagar todos os "códigos" css que tenham no vosso hi5

2º ir a este link --> http://www.hi5.com/friend/account/displayEditProfileCustomization.do (retirar tambem fundos e cores que aqui estejam)

3º colar o css abaixo disponiblilizado

4º mandarem-me um comentário de agradecimento (sem este passo o vosso hi5 nao irá funcionar, joking. era porreiro da vossa parte que não editasem a imagem de fundo --' )



Código:
#xabout-right {position:relative;right:400px;top:190px;width:320px; height:px;}

.vanity-bar {border: 0px solid #FFFFFF}
.vanity-bar div div img,
.vanity-bar div img {display:none;}
.vanity-bar div {background:url(url da "segunda" imagem da estatisticas) !important;}
.vanity-bar div div {background:url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/hehe-1.gif) !important;}
#vanity-bars {filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=)}

#user-url, #user-info {position:relative;top:-50px}

#profile-nav a {color:#1c5306}
#abuse-links {display:none !important;}
.subsection-separator, #groups{display: none;}
#profile-name {filter:Glow(Color=#ea1c2a, Strength=5);color:#ffffff;}
.profile-nav .name .section-name, #recent-updates, #p_nav_header, #userstuff {display:none}
.subsection .comment:hover {height:100% !important;overflow:auto}
#user-details {width:450px; height: 255px;}
#user-info {width:150px}
.section h4 {display:none}

.link_five img {height:40px}
#user-fives .subsection div {width:40px !important}
.link_five img {background: url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkalbuns.gif); height: 35px; width: 35px;}
#user-fives .listitem-separator {display:none}
#user-fives .subsection {width:450px;height:60px}
#user-fives .subsection .listitem-separator {display:none}

.section h2 {background:none}
.section h1 {border:none}
a:link {color: #0ba20f; text-decoration: none; }
a:active {color: #f90a20; text-decoration: none; }
a:visited {color: #f90a20; text-decoration: none; }
a:hover {color: #fff; text-decoration: none; }
#topic-noedit {font-size:10px !important;color:#fff !important}
#input-bubble {border:none !important;}
div.input-bubble-noedit {border-bottom:0px !important}
#topic {font-size:10px !important; background-color:transparent !important;color:#fff !important}
#topic-noedit ,#topic {width: 200px;}
td,th,div,body,li,ul,p,#user-links a,.vanity-title a, #profile-nav a, .section h4, #xabout-left a, #primenu a,#xabout-center a, .section h2 a, .comment a {
font-size:10px;
font-family:Times New Roman;font-weight:normal !important}
.section h1 {font-family:Times New Roman;}
#footer, #footer * {display:none}
.comment {height:60px}

#photoAlbums .listitem-separator {display:none}
.albumWrapper {width: 50px !important; height: 50px ! important;}
.album {background: url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecassubs.gif); height: 50px; width: 50px;}
.album img {width: 40px !important; height: 40px !important; margin-top:5px;}

#friends div {visibility:hidden}
.friend-picture {visibility:visiblen!important}
.friend img {visibility:visible!important}
.friend-name {visibility:visible!important}

.friend-picture img {filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}
#friends .subsection div {width:75px !important}
#friends .subsection {height:100px;overflow:hidden}
.friend {width:75px;}
.friend-name {display:none}
.friend-picture img {height:75px !important;
width:75px !important;border:none}
.friend-picture img {background:url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecassubs.gif) no-repeat;height:75px !important;
width:75px !important;}
.friend-picture a img {height:75px !important;
width:75px !important;}
#friends .listitem-separator {display:none}
#profile-name, #profile-nav {border:none;background:none;text-align:center}

#appId24490 {position:relative;left:0px;top:0px;
width:274px;
height:81px;
Filter:Alpha(Opacity=60)Glow(Color=#21f4d4, Strength=20)}
#apps .section h1, #apps .section h2 {display:none}
#appId8527 {width:450px;Filter: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=140, StartY=40, FinishX=0, FinishY=0)Glow(Color=#21f4d4, Strength=20)}

.window_content { background: transparent; }

#content-right, #col2 {width:450px;position:relative;right:490px;top:-5px;text-align:center}
#content-left, #col1 {width:450px;position:relative;left:10px;top:2000px;text-align:center}
#info-botmid{background:none;border:none;}
#info{background:none;border:none;}
#info-topright{background:none;border:none;}
#info-topmid{background:none;border:none;}
#info-topleft{background:none;border:none;}
#user-url {background:none;border:none;}
#user-details {background:none;border:none;}
#info-link{display:none}
#contact-link{display:none}
#info-botleft{background:none;border:none;}
#info-botright{background:none;border:none;}
.comment-text br {display:none}

.comment-text {width:400px !important;
margin-left:0px !important;overflow:hidden !important;
font-size:10px;background:none;color:#fff;padding-top:0px;padding-bottom:0px;font-weight:bold}
.emptyProfileInfo {display:none !important; }
.subsection .emptyProfileInfo { display: block; }
iframe {visibility: hidden}
#content-left iframe
{visibility: visible !important}
#common-friends, style + #friends {Display:None;}
#comments .listitem-separator {DISPLAY: block;background:url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecassubs.gif) !important;HEIGHT: 1px! important;background-repeat: repeat-x ! important;background-position: center! important;}
#p_container {position:relative;top:200px;left:-285px;width:585px;height:500px;overflow-x:hidden;overflow-y:auto;}
body { background-image: url(https://2img.net/h/oi33.tinypic.com/2lvd9qs.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: hidden;}
#comments h3 {border:none ! important}
body { overflow-y:hidden; overflow-x:hidden; }
.comment-picture {filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}
.comment-picture:hover {filter:none;border:0px dotted #46c180}
.comment, #user-details {background:url(colocar aqui url) center repeat-y}
.comment:hover {background:url(colocar aqui url)}

#user-links img {visibility:hidden}
#user-picture,#user-picture img {filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}
#user-picture img:hover,#user-picture:hover {filter:none;border:0px dotted #fff}

.commentEditor form textarea {border:1px dashed #5db792; height:40px; width:350px;color:#5db792;
background:url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecasmicrotxtarea.gif) ;overflow: hidden; padding-top:5px; text-align:center;font-weight:bold}
.commentEditor form input {background: transparent url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecasmicrsosend.png) center center no-repeat;
width: 100px;
height: 35px;
border:none;
text-indent:-90px;
line-height:200px;cursor:pointer}
#online-now-icon {BACKGROUND:url(colocar aqui url da imagem de icone de online) no-repeat;height: 17px;width:35px;}
#user-links a {
DISPLAY: list-item; LIST-STYLE-POSITION: outside; LIST-STYLE-IMAGE: url(colocar url da imagem dos user-links)

body, html
{scrollbar-face-color: CODIGO DA COR; scrollbar-highlight-color: CODIGO DA COR;
scrollbar-shadow-color: CODIGO DA COR; scrollbar-3dlight-color: CODIGO DA COR;
scrollbar-arrow-color: CODIGO DA COR; scrollbar-track-color: CODIGO DA COR;
scrollbar-darkshadow-color: CODIGO DA COR;}




Resultado final

https://2img.net/h/oi38.tinypic.com/muixya.jpg

comentario:

este css ainda contem alguns erros e bastantes css's "inactivos" com isso pretendo ajudar-vos a ajustarem esta skin ao vosso gosto.


Optimizado para ser visualizado com Internet Explorer 7 ou superior e resolução no monitor de 1280x1024