Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas
Substituir icone do Hi5 da p_nav por uma imagem á vossa escolha






css base:



Código:

<style type="text/css">
#new_header { zoom:1; position:relative; background:url( URL DA IMAGEM ) 10px 1px no-repeat; width:100%; text-align:left; }
</style>



algumas imagens:











url's das imagens:



Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasp_1.gif



Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkekasp_2.gif












Código:

<style type='text/css'>
#user-links img {display: none}
#user-links a {list-style:url( URL DA VOSSA IMAGEM ); width: 20px; height: 20px; inside; display:list-item}
</style>



exemplos de imagens:















url's das imagens:



Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasuserlinks.jpg

Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasdia.gif

Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasheart.gif



ps: a resolucão da imagem que usarem não convem ser superiror a 20x20 px!










css base:



Código:

<style type=text/css>
.comment { background: url( URL DA IMAGEM )
no-repeat 59px 50px}
.comment-picture { margin-top: 7.5em; left: 16.6em; position: relative}
.comment-picture {
width: 100px; height: 100px! important;}
.section .subsection .comment .clear {
overflow: hidden; line-height: 0px; height: 30px;}
.comment-picture a img {width: 100px; height: 100px;}
</style>



Exemplo de imagem:







url da imagem:



Código:

https://2img.net/h/i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecascmtback.gif




























Alterar por completo as estatisticas, inclusive coloca-las na vertical










Código:

<style type='text/css'>
.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=3)}
</style>







ps: alterar o valor da "rotation" para as colocarem da horizontal, caso queiram entre os () é para se colocar os url's das imagens de fundo das estatisticas. Só funciona no IE, mozilla sucks --'





Alterar a cor das estatísticas, neste caso para vermelho









Código:

<style type="text/css"> .vanity-bar div div {background: #FF0000 !important;} </style>





Substituir as barras das estatísticas por uma imagem ou gif





Código:

<style type="text/css"> .vanity-bar div div {background:url(URL DA IMAGEM) !important;} </style>



Transformar os comentarios numa table com os comentarios ocultos



Código:

<style type="text/css"> #comments .listitem-separator {visibility: hidden;}
.section .comment-text
{ TEXT-ALIGN:center; color:white; overflow:hidden;}
.comment-picture {visibility: visible !important}
.comment div {visibility: hidden}
.comment-text {visibility: visible !important}
.comment-text img {max-height: 40%;max-width:40%;}
#comments .comment-text br {
display:none;}
.subsection .comment {height:100px !important; }
.comment-text {width:50px !important;overflow:hidden !important; }
div#comments div.comment {float: left !important;clear: none !important;width: 15% !important;overflow: hidden;}
div#comments div.listitem-separator {display: none !important;clear: none !important;}
.section .comment-text {font-size:10px; }
.comment-picture img {width:50px; height:50px !important; }
.subsection .comment:hover {height:90% !important;overflow-y:auto;}
.section .comment-text { overflow:hidden;} </style>







ps: era bom que quando cá vierem copiar esta m**** para postarem em outros foruns coloquem lá o verdadeiro autor deste css...não se armem em grandes.



Criar efeito hover (drop down) no top de amigos







Código:

<style type="text/css">
.friend { height: 15px; }
.friend:hover { height: 100% !important; }
</style>







Adiconar icone ao nome dos amigos no top default do hi5







Código:

<style type="text/css">
.friend-name a { list-style: url(URL DO ICONE) inside; display: list-item; }
</style>





Colocar imagem na barra do nome e visitas









Código:

<style type="text/css">
#profile-name {background-image:url(URL DA IMAGEM);
width:956px;
height:100px}
</style>





Substituir o ícone de online por outra imagem









Código:

<style type="text/css">#online-now-icon
{ background: url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/PunkeCasHi5Tutorial/aim7.gif);
height: 85px;width: 85px;}
</style>





Substituir o ícones dos user-links por outras imagens







Código:

<style type="text/css"> #user-links A {
DISPLAY: list-item; LIST-STYLE-POSITION: outside; LIST-STYLE-IMAGE: url(URL DO NOVO ICONE)
} </style>





Adicionar icone ao "Picture-links"



Código:

<style type="text/css">#picture-links A {
DISPLAY: list-item; LIST-STYLE-POSITION: inside; LIST-STYLE-IMAGE: url(URL DO ICONE)
} </style>



Aumentar o tamanho da "user-picture" sem desfocar e sem perder a propriedade de hiperligação







Código:

<style type="text/css">
#user-picture { text-align: center; dispaly: block; background-image:url(https://i220.photobucket.com/albums/dd245/Punkecas/submundos/submundos new tutorials/punkecastut.jpg); background-repeat: no-repeat; background-position: center;}
#user-picture a, div #user-picture { width:195px; height: 200px; }
#user-picture a img {visibility:hidden;}
#user-picture a { display: block; }
</style>





nota: a altura e largura da imagem que usarem tem de ser igual á atribuida no css, ou seja, se a imagem que voces usarem tiver 300 px de altura e 300 px de largura, a largura no css ficará "...width: 300px..." e a altura "... height: 300px..."



é favor alterar o url do css!!



[b]Aumentar o tamanho do top de amigos







[/b]
Código:

<style type="text/css">
.friend-picture a img {width:110px; height:110px !important;}
.friend-picture {height:110px; width:110px; !important;}
.friend {height:110px; width:110px; !important;}
</style>







Criar table com degrade de fundo







Código:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" bgcolor="#FF9900" style='Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=80, FinishX=0, FinishY=0)'>

TEXTO

</td></tr>
</table>







Criar hiperligações (com texto)



Código:

<a href="LINK DE DESTINO">NOME QUE APARECE</a>





Criar hiperligações (com imagem)



Código:

<a href="LINK DE DESTINO"><img width="80" height="80" src="URL DA IMAGEM"></a>







Colocar imagem de fundo (exemplo á direita)





Código:

<style type='text/css'>body {
background-image: url(ENDEREÇO DA IMAGEM);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}</style>







Reposicionar itens



Código:

<style type="text/css"># ITEN {
position:relative;
top: 100px;
bottom:100px;
right: 100px;
left: 100px; } </style>



(ver o nome dos "ITENS" no tutorial sobre Ocultar itens)







Trocar as Colunas



Código:

<style type="text/css">table{direction:rtl;}table table table{direction:ltr;}</style>



(se trocarem o TABLE por outro ITEM/LOCAL obtem uma inversao desse sitio)



Caixa com Scroll nos Comentários ( para colocar scroll noutra caixa, basta alterar o "#comments" para o novo local...ex: #user-links, #listyle, #interests ) [/b]



Código:

<style type="text/css"> #comments { height: 300px; overflow: auto;}</style>



Tipo de letra dos comentários



Código:

<style type="text/css"> .comment-text {font-face: Comic Sans;} </style>



Alterar a Cor da letra Comentários:



Código:

<style type="text/css"> .comment-text {color: CÓDIGO_DA_COR;} </style>



Alterar o atmanho da letra dos Comentários:



Código:

<style type="text/css"> .comment-text {font-size: 20px ;} </style>



Alterar o tipo de letra dos Comentários:



Código:

<style type="text/css"> .comment-text { font-family:Tempus Sans ITC ;} </style>



Centrar Perfil



Código:

<style type="text/css"> #content-left { padding-left:250px; padding-right:250px; } <style>





Alargar table do about me



Código:

<style type="text/css"> #content-left, #col1 { width: 600px; padding-left: 0px;} </style>





Centrar a barra de links "#profile-nav"



Código:

<style type="text/css"> #profile-nav {text-align: center;} </style>





Centrar nome/visitas:



Código:

<style type="text/css"> #profile-name {text-align: center;} </style>





alinhar á esquerda o nome/visitas:



Código:

<style type="text/css"> #profile-name {text-align: left;} </style>



Alinhar á direita o nome/visitas:



Código:

<style type="text/css"> #profile-name {text-align: right;} </style>









Centrar a foto do user:



Código:

<style type="text/css"> #user-picture { padding-left:250px; padding-right:250px; } <style>





Alterar a cor da barra de scroll



Código:

<style type="text/css"> #SITIO DA BARRA
{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;} </style>



(html, body) no sitio da barra aletra a cor de todos os scrolls





alterar os borders (linhas)



Code base:

Código:

<style type="text/css"> #local {border: ESPESURApx TIPO DE BORDER COR HTML;} </style>



Exemplo:

Código:

<style type="text/css"> #comments {border: 4px dashed #FF0000;} </style>



nota: tipos de borders --> inset, outset, dotted, ridge, double, solid...





Alterar a cor das letras da barra que tem o nome e número de visitas



Código:

<style type="text/css"> #profile-name {color:CÓDIGO DA COR QUE QUERES;} </style>





Alterar a cor de fundo da mesma barra (transparente)



Código:

<style type="text/css"> #profile-name {background: transparent;} </style>



Alterar a cor de fundo da mesma barra (ex: vermelho)



Código:

<style type="text/css">#profile-name { background-color: #FF0000;} </style>



(tambem funciona para a #profile-nav)



Tag "fieldset"



Código:

<fieldset>

TEXTO

</fieldset>







tag "textarea"





Código:

<textarea>

TEXTO

</textarea>







Criar Hiperligações:



Adicionar:



Código:

<a
href="http://www.hi5.com/friend/profile/enforceFriendRequestSecurity.do?userid=ID DO VOSSO HI5 ">(ADD) </a>





Fotos:



Código:

<a
href="http://www.hi5.com/friend/photos/displayMyPhoto.do?ownerId=ID DO VOSSO HI5 ">(Fotos) </a>





Comentários ao perfil:



Código:

<a
href="http://www.hi5.com/friend/book/displaySignBook.do?userid=ID DO VOSSO HI5 ">(Comenta)</a>





Fives:



Código:

<a href="http://www.hi5.com/friend/fives/displayAddUserFive.do?userid=ID DO VOSSO HI5 "> (Fives)</a>





Mensagens:



Código:

<a href="http://www.hi5.com/friend/mail/displayComposeMail.do?toIds=ID DO VOSSO HI5 ">Mensagens </a>



Recortes:



Código:

<a href="http://www.hi5.com/friend/profile/displayScrapbook.do?userid=ID DO VOSSO HI5 ">(Recortes)</a>



Favoritos:



Código:

<a href="http://www.hi5.com/friend/addBookmark.do?userid=ID DO VOSSO HI5 "> (Favoritos)</a>







Alguns cursores:



{ cursor: crosshair; }

{ cursor: auto; }

{ cursor: default; }

{ cursor: pointer; }

{ cursor: move; }

{ cursor: e-resize; }

{ cursor: ne-resize; }

{ cursor: nw-resize; }

{ cursor: n-resize; }

{ cursor: se-resize; }

{ cursor: sw-resize; }

{ cursor: s-resize; }

{ cursor: w-resize; }

{ cursor: text; }

{ cursor: wait; }

{ cursor: help; }





exemplo:

Código:

<style type="text/css"> BODY{ cursor: crosshair; }</style>











By: PunkeCas (Submundos)