[Hi5-Tutorial] Codigos para Personalizar Hi5 (actualizado a 13 de Maio)

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Substituir icone do Hi5 da p_nav por uma imagem á vossa escolha

css base:

Código: [Seleccione]

<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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasp_1.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkekasp_2.gif

Substituir os icones dos user-links por uma imagem á vossa escolha

Código: [Seleccione]

<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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasuserlinks.jpg

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasdia.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasheart.gif
ps: a resolucão da imagem que usarem não convem ser superiror a 20x20 px!

Centrar imagem de quem comenta e atribuir-lhe um background

css base:

Código: [Seleccione]

<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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecascmtback.gif

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

Código: [Seleccione]

<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(http://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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<style type="text/css">#online-now-icon
{ background: url(http://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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<style type="text/css">
#user-picture { text-align: center; dispaly: block; background-image:url(http://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..."

é favor alterar o url do css!!

Aumentar o tamanho do top de amigos

Código: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

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

Criar hiperligações (com imagem)

Código: [Seleccione]

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


Colocar imagem de fundo (exemplo á direita)

Código: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<style type="text/css"> #comments { height: 300px; overflow: auto;}</style>
Tipo de letra dos comentários

Código: [Seleccione]

<style type="text/css"> .comment-text {font-face: Comic Sans;} </style>
Alterar a Cor da letra Comentários:

Código: [Seleccione]

<style type="text/css"> .comment-text {color: CÓDIGO_DA_COR;} </style>
Alterar o atmanho da letra dos Comentários:

Código: [Seleccione]

<style type="text/css"> .comment-text {font-size: 20px ;} </style>
Alterar o tipo de letra dos Comentários:

Código: [Seleccione]

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

Código: [Seleccione]

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

Alargar table do about me

Código: [Seleccione]

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

Centrar a barra de links "#profile-nav"

Código: [Seleccione]

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

Centrar nome/visitas:

Código: [Seleccione]

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

alinhar á esquerda o nome/visitas:

Código: [Seleccione]

<style type="text/css"> #profile-name {text-align: left;} </style>
Alinhar á direita o nome/visitas:

Código: [Seleccione]

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



Centrar a foto do user:

Código: [Seleccione]

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

Alterar a cor da barra de scroll

Código: [Seleccione]

<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: [Seleccione]

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

Código: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<style type="text/css"> #profile-name {background: transparent;} </style>
Alterar a cor de fundo da mesma barra (ex: vermelho)

Código: [Seleccione]

<style type="text/css">#profile-name { background-color: #FF0000;} </style>
(tambem funciona para a #profile-nav)

Tag "fieldset"

Código: [Seleccione]

<fieldset>

TEXTO

</fieldset>


tag "textarea"

Código: [Seleccione]

<textarea>

TEXTO

</textarea>


Criar Hiperligações:

Adicionar:

Código: [Seleccione]

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

Fotos:

Código: [Seleccione]

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

Comentários ao perfil:

Código: [Seleccione]

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

Fives:

Código: [Seleccione]

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

Mensagens:

Código: [Seleccione]

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

Código: [Seleccione]

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

Código: [Seleccione]

<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: [Seleccione]

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




By: PunkeCas  yaehhh!





Em construção! mais novos codes serao aqui postados  grin.!

Outros tópicos úteis relacionados com o hi5:

[Hi5-Tutorial] O que é o ID?
[Hi5-Tutorial] Códigos, Truques e Dicas para o Hi5
[Hi5-Tutorial] Códigos para Personalizar Hi5
[Hi5-Tutorial] Códigos para personalizar texto
[Hi5-Tutorial] Códigos para Ocultarem itens
[Hi5-Tutorial] código para fazerem secções
[Hi5-Tutorial] Como colocar uma imagem de fundo
[Hi5-Tutorial] Cursores
[Hi5-Tutorial] Efeitos para imagens
[Hi5] Links úteis do hi5

Videos do Youtube a Reproduzir automaticamente
Colocar Imagens no Hi5 ou noutros sites

Qual o teu hi5?
Hi5 Submundos

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Centrar texto do Estado e atribuir-lhe um background

Código: [Seleccione]

<style type="text/css">
#todays-topic {background:url(http://i220.photobucket.com/albums/dd245/Punkecas/punkecasriey.jpg);
text-align: center ;}</style>
algumas imagens:








url's das imagens:

Código: [Seleccione]

http://i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecassubs.gif

Código: [Seleccione]

http://i220.photobucket.com/albums/dd245/Punkecas/submundos/punkalbuns.gif

Código: [Seleccione]

http://i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecasmicrotxtarea.gif

Efeito hover no top de amigos

Código: [Seleccione]

<style type="text/css">
.friend-picture {height:100px !important;width:100px!important;
margin-left: 0px;border:none;}
.friend-picture img {height:100px !important;width:100px!important; margin-left: 8px}
.friend-picture div {background:url( URL DA IMAGEM ) 8px;padding:200px;}
.friend-picture div:hover {padding:0px;}
</style>
exemplo de uma imagem:



url da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecassublogo.png
ps: a imagem convem ter aproximandamente 100x100 px de resolução

Efeito hover nos albuns de fotos

Código: [Seleccione]

<style type="text/css">
.album a { display: block !important; width: 100px; height: 100px; }
.album a { background: url( URL DA IMAGEM) no-repeat; }
.album a:hover { background: transparent; }
.album a img { border: 0px; }
.album a:link img,
.album a:visited img { visibility: hidden; }
.album a:hover img { visibility: visible; padding-top: 0px; }   
</style>
exemplo de uma imagem:



url da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecassublogo.png
ps: a imagem convem ter aproximandamente 100x100 px de resolução

Alterar tamanho, tipo de letra, espacamento entre letras, cor das letras, tamanho das letras, aplicar fundo na caixa de escrita dos comentários, editar borders da mesma e editar cor de fundo e das letras do botao de adicionar o comentário.

Código: [Seleccione]

<style type="text/css">
input, select, textarea, .textfield, .button
{ border: 2px Dotted #0000FF;
font: normal 14px tahoma;
background-color: #FFF000;
letter-spacing:3px;
color: #FFFFFF;
overflow: hidden;
text-decoration: none;
filter: alpha(style=5,opacity=90);}
textarea {width:300;height:170;
background:url( URL DA IMAGEM );
width: 300px; height: 170px;}
</style>

exemplo de uma imagem de fundo:



url da imagem de fundo:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasimputcmt.jpg
ps: "background-color e color" sao relativos ás cores do botão, o "color" define as cores quer para o botão quer para a zona de escrita.  relativamante a "font: normal 14px tahoma;" aqui definem as caracteristicas da letra onde diz normal podem substituir por bold, italic, upercase, lowercase etc, em "border: 2px Dotted #0000FF;" definem a cor, espesura e tipo de border, onde diz dotted podem meter solid, inset, outset, double, ridge etc. podem configurar separadamente as propriedades das letras da caixa de entrada e do botao criando dois css's, um para a "tinput, select, textarea, .textfield," outro para o ".button".

Alterar apenas fundo e personalizar letra da caixa de escrita dos comentes

Código: [Seleccione]

<style type="text/css">
#comments textarea { width: 320px; height: 260px; background: url( URL DA IMAGEM );
overflow: hidden;
color: #FFFF00 !important;
font-family: Arial !important; font-size: 10pt !important; font-style: normal !important;
font-weight: bold !important; text-align: justify !important; text-decoration: none !important;} 
</style>

Exemplo de  imagens:





Url's das imagens:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecaslml.jpg

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasimputcmtsarea.png

Inverter div's dos user detais

Código: [Seleccione]

<style type="text/css">
#xabout-center {position:relative;
left:-230px;text-align:right!important;}
#xabout-left {position:relative;
left:380px;}
#xabout-right {position:relative;
left:-50px;}
#user-links {text-align:center;}
</style>

Código: [Seleccione]

<style type="text/css">
#xabout-center {position:relative;
left:330px;text-align:right!important;}
#xabout-left {position:relative;
left:380px;}
#xabout-right {position:relative;
left:-620px;}
#user-links {text-align:center;}
</style>


[Selminho]

Capitalizar primeira letra dos user-links

Código: [Seleccione]

<style type="text/css">
#user-picture { text-align: center; width:160px; height: 100px; }
#user-links :first-letter {color:#F96300;font-size:20px;!important}
#user-links img {display: none;}
</style>

ps: css configurado para colocar a 1º letra dos user-links com a cor laranja e tamanho 20px.

Colocar imagem por cima de itens do hi5

Por cima dos amigos

Código: [Seleccione]

<style type=text/css>
#friends { padding-top:203px; background-image:url( URL DA IMAGEM );
background-position:top center; background-repeat:no-repeat}
</style>
Por cima dos comentários

Código: [Seleccione]

<style type="text/css">
#comments
{padding-top:203px;
background-image:url( URL DA IMAGEM );
background-position:top center;
background-repeat:no-repeat}
</style>
link da imagem usada:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Black-and-White-CityScape-stock355.jpg

Capitalizar a primeira letra das palavras do primenu

Código: [Seleccione]

<style type=text/css>
#primenu li.on a:first-letter,
#primenu li a:first-letter {color:#FF0000;font-size:25px;!important}
#primenu li a {color:#000000}
</style>

ps: css configurado para atribuir cor vermelha e tamanho 25px.

Atribuir background aos albuns de fotos

Código: [Seleccione]

<style type="text/css">
.album {
background-image: url( URL DA IMAGEM );}
</style>
Exemplos de imagens:







Url's das imagens:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasalbum1.png

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasalbum2.png

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasalbum3.png

Substituir o botão de envio de comentários por uma imagem

Código: [Seleccione]

<style type="text/css">
.commentEditor form input
{background: transparent url( URL DA IMAGEM ) center center no-repeat;
width: 100px;
height: 30px;
border:none;
overflow: hidden;
font-size: 0px;}
</style>

exemplo de uma imagem:



link da imagem:

Código: [Seleccione]

http://i220.photobucket.com/albums/dd245/Punkecas/submundos/punkecasmicrsosend.png
ps: caso pretendam utilizar outra imagem terão de ajustar a largura e altura no css fornecido.

Personalizar texto dos comentários

Código: [Seleccione]

<style type="text/css">
.comment-text:first-letter { font-family: Arial;  font-size: 20px;  color: #FF0000; }
.comment-text { color: #FFF20; font-family: Arial;  font-size: 20px; }
.comment-text:first-letter  { font-style: italic !important; font-weight: bold !important; text-decoration: underline   !important; } 
</style>

nota:
onde diz: ".comment-text { color: #FFF20; font-family: Arial;  font-size: 20px; } " é onde alteram a cor, tipo de letra e tamanho das letras dos comentários.
onde diz: ".comment-text:first-letter { font-family: Arial;  font-size: 20px;  color: #FF0000; } " é onde alteram a cor, tipo de letra e tamanho da 1º letra do texto dos comentários. (apagem esta parte se não quiserem a 1º letra diferente do resto do texto).
onde diz: ".comment-text:first-letter  { font-style: italic !important; font-weight: bold !important; text-decoration: underline   !important; }  " é onde se atribui algumas propriedades á 1º letra dos comentários, tais como negrito, itálico. sublinhado, etc  (apagem esta parte se não quiserem a 1º letra diferente do resto do texto).

[Selminho]

Alterar cor de cada link da profile-nav

css base:

Código: [Seleccione]

<style type="text/css"> <!-- www.submundos.com/forum -->
#profile-nav-profile { color: CÒDIGO HTML DA COR !important;}
#profile-nav-journal { color: CÒDIGO HTML DA COR !important;}
#profile-nav-photos { color: CÒDIGO HTML DA COR !important;}
#profile-nav-scrapbook { color: CÒDIGO HTML DA COR !important;}
#profile-nav-favorites { color: CÒDIGO HTML DA COR!important;}
#profile-nav-apps {color: CÒDIGO HTML DA COR ! important;}
#profile-nav-friends {color: CÒDIGO HTML DA COR !important;}
#profile-nav-groups { color: CÒDIGO HTML DA COR !important;}
</style>


css que usei:

Código: [Seleccione]

<style type="text/css"> <!-- www.submundos.com/forum -->
#profile-nav-profile { color:#000000 !important;}
#profile-nav-journal { color:#999999 !important;}
#profile-nav-photos { color:#009900 !important;}
#profile-nav-scrapbook { color:#0033CC !important;}
#profile-nav-favorites { color:#996699 !important;}
#profile-nav-apps {color: #6699CC ! important;}
#profile-nav-friends {color:#FF3300 !important;}
#profile-nav-groups { color:#CC3366 !important;}
</style>


Criar Box/Caixa com scroll

Parte HTML:

Código: [Seleccione]

<div id="subbox">

TEXTO/IMAGENS/ENTRE OUTROS

</div>

Parte CSS:

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#subbox {width: 200px; height: 200px; overflow: auto; }
</style>

ps: o scroll só aparece quando a altura (neste caso 200px "...height: 200px...") for ultrapassada pela quantidade de texto/outras coisas inserido nesta div.

Colocar profile-nav em cima da profile-name e alterar a cor dos links da profile nav

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#profile-name { text-align: left !important;}
#profile-nav { position:relative; top: -30px;}
#profile-nav {background: transparent;}
#profile-nav {text-align: right !important; } 
#profile-nav-profile { color:#000000 !important;}
#profile-nav-journal { color:#999999 !important;}
#profile-nav-photos { color:#009900 !important;}
#profile-nav-scrapbook { color:#0033CC !important;}
#profile-nav-favorites { color:#996699 !important;}
#profile-nav-apps {color: #6699CC ! important;}
#profile-nav-friends {color:#FF3300 !important;}
#profile-nav-groups { color:#CC3366 !important;}
</style>

ps: podem sempre alterar a localização da name e da nav editando o parametro "text-align: ..."

Substituir titulo do Top de amigos por uma imagem

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#friends h1 { text-indent:-9999px;background: url( URL DA IMAGEM );
background-position:50% 30%;background-repeat:no-repeat;height: 35px;}
</style>

Exemplo de uma imagem:



URL da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasfriendsnameimage.png
(outra forma de se colocar uma imagem por cima do top de amigos.)

Criar Top de amigos com efeito hover drop down no nome

Parte html

Código: [Seleccione]

<div id="PunkecasBox">
<center>
nome do 1º amigo<br>
embed da imagem
</center>
<center>
nome do 2º amigo<br>
embed da imagem
</center>
...
</div>

Parte css:

Código: [Seleccione]

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


"Link" para se adicionar email

Código: [Seleccione]

<a href="msnim:add?contact=pedeomailsequizeres@issotudo.com">TEXTO</a>

não funciona no mozilla.

Atribuir transparencia a itens do hi5

css base:

para 50% de transparancia:

Código: [Seleccione]

<style type='text/css'> #ITEM { filter: alpha(opacity=50); opacity: 0.5; } </style>
para 100% de transparencia:

Código: [Seleccione]

<style type='text/css'> #ITEM { filter: alpha(opacity=0); opacity: 0; } </style>

Exemplo para o item: lifestyle --> sobre mim

para 50% de transparancia:

Código: [Seleccione]

<style type='text/css'> #lifestyle * { filter: alpha(opacity=50); opacity: 0.5; } </style>
para 100% de transparencia:

Código: [Seleccione]

<style type='text/css'> #lifestyle * { filter: alpha(opacity=0); opacity: 0; } </style>

Colocar imagem jundo ás barras das estatisticas

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.vanity-title a{display:none;}
.vanity-title {list-style:url( URL DA IMAGEM ) inside;display:list-item;width:25px !important;}
#vanity-bars {width: 190px;} </style>

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.vanity-title {list-style:url( URL DA IMAGEM) inside;display:list-item;width:130px !important;}
#vanity-bars {width: 300px;} </style>
Exemplo de uma imagem:



Url da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasuserlinks.jpg
ps: convem a imagem não ter mais de 25px de altura.

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Alargar sobre mim e intereses

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.box_profile_info_small_content { width:900px !important;}
#content-left { width:900px; height:900px  !important;}
#content-right {width:0px !important;}
#interests, #lifestyle { width:900px; height:900px !important;}
</style>

Substituir icone do Hi5 da p_nav por uma imagem á vossa escolha

css base:

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasp_1.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkekasp_2.gif

Substituir os icones dos user-links por uma imagem á vossa escolha

Código: [Seleccione]

<style type='text/css'>
<!-- www.submundos.com/forum -->
#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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasuserlinks.jpg

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasdia.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasheart.gif
ps: a resolucão da imagem que usarem não convem ser superiror a 20x20 px!

Centrar imagem de quem comenta e atribuir-lhe um background

css base:

Código: [Seleccione]

<style type=text/css>
<!-- www.submundos.com/forum -->
.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: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecascmtback.gif


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

Código: [Seleccione]

<style type='text/css'>
<!-- www.submundos.com/forum -->
.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(http://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 --' . Têm tambem já a opção de personalizar os borders.


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

Código: [Seleccione]

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

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

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
 .vanity-bar div div {background:url(URL DA IMAGEM) !important;}
</style>
Transformar os comentarios numa table com os comentarios ocultos

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#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: [Seleccione]

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


Adiconar icone ao nome dos amigos no top default do hi5

Código: [Seleccione]

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

Colocar imagem na barra do nome e visitas

Código: [Seleccione]

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

Substituir o ícone de online por outra imagem

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#online-now-icon
{ background: url(http://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: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#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: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#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: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#user-picture { text-align: center; dispaly: block; background-image:url(http://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..."

é favor alterar o url do css!!

Aumentar o tamanho das imagens do top de amigos

Código: [Seleccione]

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




Criar hiperligações (com texto)

Código: [Seleccione]

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

Criar hiperligações (com imagem)

Código: [Seleccione]

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

Reposicionar itens

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
# ID DO 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: [Seleccione]

<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: [Seleccione]

<style type="text/css"> #comments { height: 300px; overflow: auto;}</style>
Tipo de letra dos comentários

Código: [Seleccione]

<style type="text/css"> .comment-text {font-face: Comic Sans;} </style>
Alterar a Cor da letra Comentários:

Código: [Seleccione]

<style type="text/css"> .comment-text {color: CÓDIGO_DA_COR;} </style>
Alterar o atmanho da letra dos Comentários:

Código: [Seleccione]

<style type="text/css"> .comment-text {font-size: 20px ;} </style>
Alterar o tipo de letra dos Comentários:

Código: [Seleccione]

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

Código: [Seleccione]

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

Alargar table do about me

Código: [Seleccione]

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

Centrar a barra de links "#profile-nav"

Código: [Seleccione]

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

Centrar nome/visitas:

Código: [Seleccione]

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

alinhar á esquerda o nome/visitas:

Código: [Seleccione]

<style type="text/css"> #profile-name {text-align: left;} </style>
Alinhar á direita o nome/visitas:

Código: [Seleccione]

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



Centrar a foto do user:

Código: [Seleccione]

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

Alterar a cor da barra de scroll

Código: [Seleccione]

<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: [Seleccione]

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

Código: [Seleccione]

<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: [Seleccione]

<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: [Seleccione]

<style type="text/css"> #profile-name {background: transparent;} </style>
Alterar a cor de fundo da mesma barra (ex: vermelho)

Código: [Seleccione]

<style type="text/css">#profile-name { background-color: #FF0000;} </style>
(tambem funciona para a #profile-nav)


By: PunkeCas

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Colocar icone no item picture-links

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#picture-links { list-style: url( URL DA IMAGEM ) inside; display: list-item; }
</style>

Exemplo de uma imagem:



Url da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/punkecasiconepicture.gif

Substituir titulo do Top de amigos por uma imagem

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#friends h1 { text-indent:-9999px;background: url( URL DA IMAGEM );
background-position:50% 30%;background-repeat:no-repeat;height: 35px;}
</style>


Colocar scroll no texto dos comentários.

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.comment-text  {height: 70px !important;
overflow: auto !important;}
</style>

ps: o scroll só aparece quando se altrapasa os 70px de texto no comentário.

Podem colocar scoll no texto dos comentários e nos comentários.

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.comment-text
{height: 70px !important; width: 420px !important; overflow: auto !important;}
#comments { height: 300px; overflow: auto;}
.comment-text {color: red !important;}
</style>


Agrupar user-links

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
div table tbody tr td a.navbar, div table tbody tr td form input,
div table tbody tr td a img, div table tbody tr td div a {visibility: visible !important; display: inline !important;}
a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited{font-size:8pt;font-weight:bold;text-decoration:none;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active{font-size:8pt;font-weight:bold;text-decoration:underline ;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
</style>

IE7/8, Google Chrome e Mozilla.

Alterar a linha que separa os comentários

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#comments .listitem-separator {background:url( URL DA IMAGEM) !important; height:3px !important;}
</style>

Exemplos de imagens:

















Url's das imagens:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl2.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl3.png

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl4.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl5.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl6.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl7.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecassl8.gif
Nota: Consoante a altura da imagem que utilizem têm de ajustar a altura no css .."height:3px"...

Aplicar o efeito glow a itens do hi5

css base:

Código: [Seleccione]

<style type="text/css">
<!-- submundos.com/forum -->
#ID DO ITEM {filter:progid:DXImageTransform.Microsoft.Glow
(color=#FF0000,strength=5);}
</style>
Exmplo para o item #about-left:

Código: [Seleccione]

<style type="text/css">
<!-- submundos.com/forum -->
#about-left {filter:progid:DXImageTransform.Microsoft.Glow
(color=#FF0000,strength=5);}
</style>
Nota: Podem mudar a cor do efeito "...color=#FF0000..." e alterar a sua intensidade "...strength=5..."
body (sem o # antes) para aplicar o efeito a todo o hi5.

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Personalizar Fives

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#user-fives IMG {HEIGHT: 45px; width: 50px;}
#user-fives img {filter: Alpha(Opacity=0,FinishOpacity=100,Style=1); border: #FFF 3px dotted; }
#user-fives a:hover img {filter:none;}
user-fives a:hover img {filter:none;}
.link_five img {display:none;}
.link_five img {margin-top: 18px;}
.link_five {display: block;background: url( URL DA IMAGEM ) center center no-repeat;height: 120px;}
.link_five img { boder:none;}
.link_five:hover img {display: block;}
.link_five .listitem-separator {display:none;}
</style>
Exemplo de uma imagem:



Url da imagem:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punksubimgfives.gif

Colocar na vertical links da profile-name

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#primenu li a {position:relative; top: -2em!; left:-2em!;}
#primenu li a{font-size:8px; text-indent:em!important; color:#ff0000;
font-weight: bold; border:0px solid  #FF0000; width:50px; height:16px;
text-align:center; background-color:# 000000;}
#primenu {width:50px; position:relative; top:4em; left:48em;}
</style>

nota:

Personalizar Profile-nav

Código: [Seleccione]


<style type="text/css">
<!-- www.submundos.com/forum -->
#profile-nav {position:relative; top: 40px; left: 70px; }
#profile-nav {background: transparent ! important;}
#profile-nav-apps { padding-top:50px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasapps.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-favorites { padding-top:50px; padding-left:5px; padding-right:5px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasfav.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-groups { padding-top:50px; padding-left:17px; padding-right:17px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasgro.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-journal { padding-top:51px; padding-left:15px; padding-right:15px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasjou.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-scrapbook { padding-top:50px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasscr.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-photos { padding-top:50px; padding-left:17px; padding-right:17px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecaspho.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-friends { padding-top:50px; padding-left:21px; padding-right:21px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasfri.png);
background-position:top center;
background-repeat:no-repeat;}

#profile-nav-profile { padding-top:50px; padding-left:14px; padding-right:14px;
background-image:url(http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecaspro.png);
background-position:top center;
background-repeat:no-repeat;}

</style>


Aumentar o tamanho, centrar imagem de quem comenta e atribuir-lhe um background

Código: [Seleccione]


<style type="text/css">
<!-- www.submundos.com/forum -->
.comment {background:url( URL DA IMAGEM DE FUNDO ); background-position: 40px 30px;background-repeat:no-repeat;}
.comment-picture {margin-top: 6em; left: 14em; position: relative;}
.comment-picture {height:100px!important; width:100px;border:none;}
.comment-picture a img {width:100px;height:100px;border:none;}
</style>


Exemplo de imagens:







Url's das imagens:

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasimgcntback.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasimgcntback2.gif

Código: [Seleccione]

http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/Punkecasimgcntback3.gif

Aplicar o efeito blur a itens do hi5

css base:

Código: [Seleccione]

<style type="text/css">
<!-- submundos.com/forum -->
# ID DO ITEM  {Filter: Blur(color=#666666, Strength=20)}
</style>

Exmplo para o item #about-left:

Código: [Seleccione]

<style type="text/css">
<!-- submundos.com/forum -->
#about-left  {Filter: Blur(color=#666666, Strength=20)}
</style>
Nota: Podem mudar a cor do efeito "...color=#666666..." e alterar a sua intensidade "...strength=20..."
body (sem o # antes) para aplicar o efeito a todo o hi5.

Colocar os user-links do lado direito da user-picture

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#user-links {line-height: 7px;}
#user-links {height: 100px; width:250px;}
#user-links {position: relative; right: -150px; top:-125px;}
#user-links img {display: none}
#user-links a {text-decoration:none !important;}
#user-links a {font-family:century gothic !important;}
#user-links a {font-size: 9px !important;}
#abuse-links {display:none !important;}
</style>

Colorir separadamente cada item da profile-name

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#profile-name strong { color:#FFF000; !important; }
#profile-name span  { color:#0008FF; !important; }
.section-name  {color:#00CC00 !important; }
</style>


Agrupar links da profile-nav

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#profile-nav {width: 180px;  text-align:center; background:none; }
</style>


[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

Personalizar user-links

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#user-links {height:100px; overflow: auto;}
#user-links a {background-color: #FF0000; text-align:center;
border-top:2px solid #000000; border-left:2px solid #000000;
border-bottom:2px solid #000000;border-right:2px solid #000000;
margin-bottom:5px;}
</style>

Vá agora mostrem o que sabem e não façam melhor...copiem antes isto para os vossos forunzinhos e ponham o tradicional "by:..."

Personalizar vanity-bars

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#vanity-bars {border:solid #FFFFFF 1px}
.vanity-bar {float:left !important;margin-right:1px;}
.vanity-bar div img{display:none ;}
.vanity-bar div {background:url(URL DA IMAGEM)!important ;
border:solid #000000 1px;}
</style>

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.comment-picture a { display: block !important; width: 100px; height: 100px; }
.comment-picture a { background: url( URL DA IMAGEM) no-repeat; }
.comment-picture a:hover { background: transparent; }
.comment-picture a img { border: 0px; }
.comment-picture a:link img,
.comment-picture a:visited img { visibility: hidden; }
.comment-picture a:hover img { visibility: visible; padding-top: 0px; } 
</style>
 

Colocar top friends na horizontal

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#friends div {display: none !important;}
#friends {position: relative;top: -90px;}td[width=50%;] {overflow: visible !important;}
#friends {position:relative;top:-30px;right:485px;width:955px;}
#friends .content, #friends .subsection,  #friends .friend, #friends .friend-picture,  #friends .friend-picture div,
#friends .friend-name div,
#friends .friend-name {display:block !important;}
.friend-picture {height:100px !important; width:85px!important; margin-left: 0px;}
.friend-picture img {height:100px !important; width:85px!important; margin-left: 15px; }
</style>

Colocar top friends na Vertical

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
</style>


Personalizar area de texto dos comentários

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.comment-text {color:#FFFFFF ;padding:5px 5px 5px 10px;
background:#008B00;
width:350px !important;
border: #FF000 solid 2px;}
</solid>
 
Nota: Onde está solid, podem alterar para double, dashed, dotted, inset, outset, gouve... assim como podem alterar as cores #008B00=verde, #FF0000=vermelho...Não tem nada que saber.

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#profile-name:hover {letter-spacing:2px;}
#profile-name
{letter-spacing:1px;
background:none;
text-align:center;
filter:progid:DXImageTransform.Microsoft.glow(color=#000000,strength=15)}
</style>

Código: [Seleccione]

<img src="" width="400" height="400" alt="Punkecas"
style="opacity:0.4;filter:alpha(opacity=40)" />

Criar top de amigos

Parte css

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
div.Punkecasimg { margin: 2px;  border: 2px solid #000000;  height: auto;  width: auto;  float: left;  text-align: center; }
div.Punkecasimg img { display: inline;  margin: 2px;  border: 2px solid #000000;  }
div.Punkecasimg a:hover img  { border: 3px solid #ff0000;  }
div.Punkecass  { text-align: center;  font-weight: normal;  width: 120px;  margin: 2px;  }
</style>

Parte html

Código: [Seleccione]

<div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="hf" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>
<div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="URL DA IMAGEM DO AMIGO" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>
  <div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="URL DA IMAGEM DO AMIGO" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>
  <div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="URL DA IMAGEM DO AMIGO" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>
  <div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="URL DA IMAGEM DO AMIGO" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>

</div>


Nota: Para adicionarem mais amigos ao top basta adicionarem

Código: [Seleccione]


<div class="Punkecasimg">
  <a target="_blank" href="LINK DO HI5 DO AMIGO">
  <img src="hf" alt="NOME DO AMIGO" width="110"
  height="90" /></a>
  <div class="Punkecass">Descrição do amigo</div></div>
antes da ultima tag </div>

Agora façam o que fazem sempre...copiem e coloquem lá nos vossos forunzinhos, e como sempre não se esqueçam do "By: Sou mesmo grande nerd, a unica coisa que sei fazer é copiar o que os outros fazem"

[Selminho]

Tutorial dedicado á personalização do hi5

Created by http://--drake--.hi5.com PunkeCas ®yaehhh!

.

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#comments .listitem-separator {background: #ffffff !important;}
.comment {height:105px !important;}
.comment:hover {height:100% !important;overflow-y:true;}
.comment-picture {height:100px !important;width:100px;border: double #000000 2px;}
.comment-picture a img {width:100px;height:100px;}
.comment-picture img{filter:Progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}
.comment:hover .comment-picture img{filter:();}
.comment-text {color:#c0c0c0 ;padding:5px 5px 10px 60px; background:#000000 url(URL DA IMAGEM ou usar cor);
background-repeat:no-repeat;width:190px !important;
border:Solid #000000 3px;border-top:solid #000000 20px;}
</style>

Exemplos de imagens:





Urls's das imagens

Código: [Seleccione]

http://i535.photobucket.com/albums/ee358/punkecas1988/Punkecassubsays.jpg

Código: [Seleccione]

http://i535.photobucket.com/albums/ee358/punkecas1988/Punkecassubcnts2.gif
Nota: Para retirarem o efeito nas imagens apagem

Código: [Seleccione]

.comment-picture img{filter:Progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}ou alterem o numero para

Personalizar top de amigos

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.friend-picture {height:100px !important;width:85px!important;margin-left: 0px;border:double #000000 3px;}
.friend-picture img {height:100px !important;width:100px!important;margin-left: 8px}
.friend-picture div {background:url( Colocar ou não url de imagem ) 8px;padding:200px;}
.friend-picture div:hover {padding:0px;}
</style>

Personalizar textarea

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
textarea{width:450;height:515; background:url(URL DA IMAGEM); width: 350px; height: 152px;
 font-size: 10px; font-family:century gothic ; color: #FFFFFF; filter: glow(color=#FFFFFF, strength=5)}
</style>

Colocar a transparente o botão de envio dos comentários

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.commentEditor textarea, .commentEditor {background: transparent;}
.commentEditor input { background-color: transparent;} 
</style>


Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#content-right {div style=&quot; height:765px; width:200px; }
#content-left { width: 710px; padding-left: 0px;}
</style>

Personalizar about r, c e l do user-details

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#about-left { background-color: #666666; border: 5px dashed #00CC00;}
#about-left:hover { background-color: #999900;
   border-top-width: 5px;
   border-bottom-width: 5px;
   border-left-width: 5px;
   border-top-style: dashed;
   border-bottom-style: dashed;
   border-left-style: dashed;
   border-top-color: #00CC00;
   border-bottom-color: #00CC00;
   border-left-color: #00CC00;}
#about-right { background-color: #665599; border: 5px dashed #009900;}
#about-right:hover {
   background-color: #CCFF00;
   border-top-width: 5px;
   border-right-width: 5px;
   border-bottom-width: 5px;
   border-top-style: dashed;
   border-right-style: dashed;
   border-bottom-style: dashed;
   border-top-color: #009900;
   border-right-color: #009900;
   border-bottom-color: #009900;}
#about-center { background-color: #000000; border: 5px dashed #993300;}
#about-center:hover { background-color: #FF0000; border: 5px dashed #FFFFFF;}
   </style>


Aplicar "efeitos" nas imagens do top de amigos

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#friends {filter:gray;}
.friend-picture:visited {filter: alpha(opacity=50);opacity: 0.5;}
.friend-picture:hover {filter:none;}
</style>


Personalizar common-header

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
#hi5-common-header, #p_nav_header {background: url(http:// URL DA IMAGEM DE FUNDO) #FF0004 !important;}
#hi5-common-header *, #p_nav_header * {color: #FFF200 !important;
font-family: Arial !important;
font-size: 10pt !important;
font-style: italic !important;
font-weight: lighter !important;
text-decoration: none !important;}
#hi5-common-header a, #p_nav_header a {color: #0018B5 !important;
font-family: Calibri !important;
font-size: 10pt !important;
font-style: oblique !important;
font-weight: normal !important;}
#hi5-common-header a:hover, #p_nav_header a:hover {color: #007C0E !important;
font-family: Courier New !important;
font-size: 14pt !important;
font-style: italic !important;
font-weight: bold !important;
text-decoration: underline overline  !important;}
</style>