[Hi5-Tutorial] Personalizar Hi5

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: 83px;width: 93px;}
</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; DISPLAY: block; background-image:url(https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/submundos/submundos%20new%20tutorials/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..."


Aumentar o tamanho do top de amigos



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>