[Tutorial] Personalizar perfil (novos codigos)
+4
Susanne
SapphireSpell
MarianaM
muka
8 participantes
J&B :: Tecnologia :: Hi5 :: Tutoriais & Dias
Página 1 de 1
[Tutorial] Personalizar perfil (novos codigos)
Eu estou aqui com mais um tutorial, desta vez para apelar a criatividade das pessoas...tive serca de 2 meses e pouci a construir os codigos que estão na origem deste tutorial....é que este tutorial e para personalizar os hi5....e tem codigos completamente novos..alguns ja existem mas não desta forma [estou-me a referir a codigos do punkecas que ja criou alguns parecidos com estes]..
deiche-me asentuar que os codigos aqui presentes são 100% da minha autoria......
____________________________________
______________________________________
exemplo de imagem a uzar
Exemplo de imagem:
Bem apesar da maioria de nos termos esta parte oculta..uma colega pediu-me para fazer o codigo e eu fiz-lo e agora partilho com vos.....
_________________________________________________________________
deiche-me asentuar que os codigos aqui presentes são 100% da minha autoria......
Personalizar o hi5
____________________________________
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 borderes a branco...se quizerem outras cores e so mudar as cores....
Efeitos de quando se comenta....(no suceso 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%}
esplicação:e so mudar o que está a cor vermelho, pelos respetivos url´s..neste codigo da ainda para mudar as cores do fundo da div..tal como um borda personalizada...com a cor que quizerem....e so mudar os codigos 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 so subestituir o "url da imagem" por a imagem a uzar para separar os fives.
exemplo de imagem a uzar
url
https://2img.net/r/ihimizer/img156/6434/aliendf0.gif
Ocultar tudo nos comentarios..deichar 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 comentarios..deichar 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: nao mecham no codigo sem saver...no codigo diz url mas nao metam nada..deichem 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 subestituir 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
Exemplo de imagem:
url:https://2img.net/h/i49.photobucket.com/albums/f298/deedydeedydeedy/hi5/1138535730-1.gif
Bem apesar da maioria de nos termos esta parte oculta..uma colega pediu-me para fazer o codigo e eu fiz-lo e agora partilho com vos.....
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.
por uma imagem a cair. no vosso fundo por cima da vossa foto...
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; }
_________________________________________________________________
Creditos:BY MUKA
Última edição por muka em Seg Jun 29, 2009 11:33 am, editado 1 vez(es)
Re: [Tutorial] Personalizar perfil (novos codigos)
Continuação
Imagem por cima das estatisticas
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
imagem de exemplo
url da imagem
- 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;}
Esplicação:
"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
Mais estilos para as borderes
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....)
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
exemplos de imagens:
URLS:
- 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
Hoveres
Subestituir o icon da linguagem por uma imagem e aplicar um hover
Subestituir o icon da linguagem por uma imagem e aplicar um hover
- 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;}
Subestituir o logo do hi5 por uma imagem e aplicar um hover
- 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...
____________________________________________________
Creditos:BY MUKA
MarianaM- J&B Espetacular
- Mensagens : 842
Data de inscrição : 27/06/2009
Idade : 29
Localização : Casa amarela xD
SapphireSpell- J&B Avançado
- Mensagens : 473
Data de inscrição : 28/06/2009
Idade : 31
Localização : Onde nunca me encontrarás :P
Susanne- J&B Espetacular
- Mensagens : 998
Data de inscrição : 10/06/2009
Idade : 30
Localização : Terra :o
jexica- J&B
- Mensagens : 190
Data de inscrição : 13/07/2009
Idade : 29
Localização : Braga
sue- J&B Avançado
- Mensagens : 398
Data de inscrição : 09/07/2009
Idade : 31
Localização : montijo
Re: [Tutorial] Personalizar perfil (novos codigos)
muito bom post
ninocas- J&B Iniçiado
- Mensagens : 21
Data de inscrição : 18/07/2009
Re: [Tutorial] Personalizar perfil (novos codigos)
Bom postaa Muka
joanamarques- J&B Iniçiado
- Mensagens : 93
Data de inscrição : 15/07/2009
Idade : 28
Localização : descobre =)
Tópicos semelhantes
» [Tutorial] Codigos para fazer Secções
» [Tutorial] personalizar caixas de texto (box)
» [hi5] Personalizar o texto
» [Hi5] Personalizar por completo os 'user-links'
» [ajuda]novos
» [Tutorial] personalizar caixas de texto (box)
» [hi5] Personalizar o texto
» [Hi5] Personalizar por completo os 'user-links'
» [ajuda]novos
J&B :: Tecnologia :: Hi5 :: Tutoriais & Dias
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|