[toturial] Personalizar hi5 (take1]

Codigo base

<style type="text/css">
<!-- by MUKA -->

Aqui o codigo

</style>

Brincar com a foto dos amigos

Código:

.friend-picture{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)}

Código:

.friend-picture{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}

Código:

.friend-picture{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}

Efeitos nos user linkes a passagem do rato

Código:

#user-links A:hover {background:#000;COLOR: #ffffff; border:2px dashed;}

explicação: as cores neste momento estao com fundo a preto..e as border's a branco...se quiserem outras cores e só mudar as cores....

Efeitos de quando se comenta....(no sucesso e no erro)

#pageMessages div {display: none}
#pageMessages {filter:alpha(opacity=60); opacity: 0.6}
#pageMessages:hover {filter:alpha(opacity=100); opacity: 1.0}
#message-success {background: #000000 !important; background-image: none !important;}
#message-success #message-content h1 {color: #70cafc !important}
#message-success #message-content {background:url(URL DA IMAGEM PARA O SUCESSO);
background-repeat:no-repeat; padding-left: 48px; padding-bottom: 10px;
border: 1px #FFFFFF dashed; background-color: #000000; float: none !important; background-position: 1% 50%}
#message-success, #message-content, #message-error {display: block !important}
#message-error {background: #000000 !important; background-image: none !important;}
#message-error #message-content h1 {color: #fc7070 !important}
#message-error #message-content {background:url(URL DA IMAGEM DO ERRO);
background-repeat:no-repeat; padding-left: 48px; padding-bottom: 10px;
border: 1px #FFFFFF dashed; background-color: #000000; float: none !important; background-position: 1% 50%}

explicação:e só mudar o que está a cor vermelho, pelos respectivos url´s..neste código da ainda para mudar as cores do fundo da div..tal como um borda personalizada...com a cor que quiserem....e só mudar os códigos da cores

Colocar uma barra separadora entre os fives

Código:

#user-fives .listitem-separator {display: block;background:url(URL DA IMAGEM PARA SEPAR)
!important;height:25px! important;background-repeat: no-repeat! important;background-position: center! important;}

Explicação:e só substituir o "url da imagem" por a imagem a usar para separar os fives.

url
https://2img.net/r/ihimizer/img156/6434/aliendf0.gif

Ocultar tudo nos comentários..deixar apenas o texto de quem comenta.

Código:

.comment-picture {display:none}
#comments .listitem-separator{display:none}

.comment-text {
margin-left: 0px !important;
background:url()
no-repeat 0px 0px transparent;
line-height:15px !important;
overflow:hidden !important;
margin-top:0px !important;
text-indent: 22px;visibility:visible !important}

.comment div {visibility:hidden;
line-height:0px}
.comment-text br {display:none}

Ocultar tudo nos comentários..deixar apenas o texto de quem comenta e um separador.

Código:

.comment-picture {display:none}

.comment-text {
margin-left: 0px !important;
background:url(URL)
no-repeat 0px 0px transparent;
line-height:15px !important;
overflow:hidden !important;
margin-top:0px !important;
text-indent: 22px;visibility:visible !important}

.comment div {visibility:hidden;
line-height:0px}
.comment-text br {display:none}

Nota: não mexam no código sem saber...no código diz url mas não metam nada..deixem como está.

Meter uma sobra por de baicho de quem comenta

Código:

.comment-text { background-color:codigo da cor; }

descrição:e so subestituir o "codigo da cor" pelo respetivo codigo

Mudar a cor das letras, da hiperligação e do hover da hiperligação

Código:

.comment div {color: codigo da cor das letras; font-size: 8pt}
.comment div a {color:codigo da cor das hiperligação; font-size: 9pt;}
.comment div a:hover {color:codigo da cor do hover}

descrição:e so substituir os codigos das cores pelos repetivos codigos das cores..alem disso podem aumentar o tamanho..

Trocar as posiçoes das fotos de que comenta

Código:

.comment-picture {float:right}

Border a volta de quem comenta

Código:

.comment-picture {border:2px dashed codigo da cor}

descrição:e so mudar o codigo da cor pelo respetivo codigo..podem tambem mudar a espessura...mudando o px

Mudar o fundo das aplicações

#header-apps-box {display:none} #header-apps-submenu #header-apps-list li {background:url(URL IMG 1);border:1px dashed #fff} #header-apps-submenu #header-apps-list {background:url(URL DA IMG 2);border:1px dashed #fff} #header-apps-submenu #header-apps-link {background:url(URL DA IMG 3);border:1px dashed #fff} #header-apps-submenu #header-apps-list li a, #header-apps-submenu #header-apps-list li .no-apps {background:url(URL DA IMG 4);border:1px dashed #fff}
</style>

descrição:e so subestituir os Url´s que estão a vermelho..pelo os respetivos url das imagens pretendidas...

Suestituir os icones do mobile e do idioma

Código:

#new_header li#header-mobile-icon a {visibility: hidden} #header-mobile-icon {background:url(URL DA IMAGEM) center no-repeat;}

Código:

#language-more img {visibility: hidden} #language-more {background:url(URL DA IMG) center no-repeat;}

explicação:é so subestituir o url da img pelo repetivo url

url:https://2img.net/h/i49.photobucket.com/albums/f298/deedydeedydeedy/hi5/1138535730-1.gif

Codigos para alterar os separadores das actualizações

Código:

.updates-section {border-bottom:3px dashed codigo da cor ! important;}

esplicaçao: e so alterar o codigo da cor..pelo respetivo codigo da cor...podem ainda aumentar a espessura.

Código:

.updates-section {border-bottom:0px ! important;height:30px;
background:url(URL DA IMG);
background-repeat:no-repeat;background-position:bottom center}

esplicação:e subestituir o url da imagem pelo respetivo url.

esplicaçao do titulo:este efeito e para fazer aqueles efeitos de neve a cair ..entre outros objectos a cair...

Código:

body {background:url(URL DO IMAGEM DE FUNDO DO HI5}
#p_container {background:url(URL DA IMAGEM A CAIR);background-attachment:fixed}

Esplicação:e so subestituir o "url da imagem de fundo" pela vossa actual imagem de fundo...e no "url da imagem a cair" e so por a imagem que querem que caia no prefil

Efeito no profil nav

Código:

a.sub_nav_link {
background-color: #252525!important;
color: #ffffff!important;
padding: 0px 10px 2px 10px!important;
margin: 0 3px!important;
border: 1px #a1a1a1 dashed!important; }

a:hover.sub_nav_link {
text-decoration: none!important;
background-color: #000000!important;
color:#ffffff!important; }

NOVOS CODIGOS

Imagem por cima das estatisticas

Código:

#about-right { padding-top:5px;
background-image:url(URL da imagem);
background-position:top center;
background-repeat:no-repeat}

esplicação:é so trucar o "url da imagem" pelo o url da imagem pretendida

Código:

http://emoticonsterra.com/emoticons-para-msn/Mal/images/e77.gif

Estatisticas em caixa personalizada

.vanity-bar {display:none}
.vanity-title{
text-align:center;background:url(URL DA IMAGEM)!important;
border-top:4px #cor da border em html double;
border-left:4px #cor da border em htm double;
border-bottom:4px #cor da border em html double;
border-right:4px #corda border em html double;width:200px;}

"Url da imagem"=ao url da imagem para o fundo da caixa
"cor da border"= as cores das borderes de cima,baicho,direito e esquerda
o que está sublinhado"(double)" e o estilo da border

dashed - dotted - solid - double - groove - ridge - inset – outset

Efeito engraçado para os comentarios

Código:

.comment-text {position:absolute;display:block!important; right:103px; height:300px; width:346px!important;
text-align:center; overflow-x:hidden!important;border:solid 2px;}
.comment-picture {display:block!important; position:relative;margin:39px 0 0 -0px;height:100px!important; width:460px!important;
background:url('http://img5.imageshack.us/img5/781/81938656.png') center no-repeat; border:0px;}
.comment-picture img {margin:25px 0 0 25px;}
.comment div {display:none;}

Nota:se nao gostarem do efeito em balão...pode mudar o url do background para o url de uma imagem a vossa escolha.

Intereses

aplicar uma caixa a bolta dos sub titulos (música favorita....)

Código:

#interests .box_profile_info_small_heading
{background:transparent url(imagem para o fundo) no-repeat  center !important; border:solid 2px #cor html; margin-right:275px!important;}

esplicação:
imagem para o gundo=url da imagem que querem para o fundo (cazo nao queirem imagem nenhuma deichem em branco)
cor html= a cor html para as border´s (linhas)

aplicar uma caixa a bolta dos textos das subcategorias (música favorita....)

Código:

#interests .box_profile_info_small_content
{background:transparent url(imagem para fundo) no-repeat  center !important; border:solid 2px #cor html;}

esplicação:
imagem para o gundo=url da imagem que querem para o fundo (cazo nao queirem imagem nenhuma deichem em branco)
cor html= a cor html para as border´s (linhas)

Enverter pozição nas estatisticas

Código:

.vanity-bar {float:left}
#vanity-bars {text-align:right}

Por uma imagem a cair sobre a foto do user

Código:

#user-picture img {position:relative !important}
#user-picture {width:100px;height: 100px;background:url(URL DA IMAGEM) center center no-repeat;margin-left:25px}
#user-picture img {z-index:-3}

Esplicação:e so subestituir o Url da imagem pelo o url da imagem pretendida

Código:

http://img13.imageshack.us/img13/7753/11qp5.gif
http://img14.imageshack.us/img14/9941/11mc1.gif
http://img27.imageshack.us/img27/2194/w7b14.gif
http://img18.imageshack.us/img18/4407/590941r351ykwhz6.gif

Código:

#hi5-language-selector {background-image: url(url da imagem para o icon) !important;height:112px !important;width:82px !important}

#hi5-language-selector:hover {background-image: url(url da imagem para o hover) !important;}

Código:

#hi5-logo-type h1 {background-image: url(url da imagem para o logo) !important;height:112px !important;width:82px !important}


#hi5-logo-type h1:hover {background-image: url(url da imagem para o hover) !important;}

esplicação: agora é so subestituir os url da imagem logo/linguas pelços respetivos url das imagens...o mesmo para os hover
nota:as 2 imagem devem ter mais ou menos o mesmo tamanho...