mais codigos (novo)

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>



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



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)

Tipo de letra dos comentários

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




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 )

Código:
<style type="text/css">#comments { height: 300px; overflow: auto;}</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>



Aumentar a #user-picture

Código:
<style type="text/css">
#user-picture a img {width:200px;height:200px;}
#user-picture {height:200px !important;width:200px;}
</style>




Apagar o titulo do Estilo de vida

Código:
<style type="text/css">#lifestyle .bg_title { display: none; }</style>



Apagar titulo que diz Sobre mim

Código:
<style type="text/css">#lifestyle .box_profile_info_small_heading
{ display: none; }</style>



Apagar titulo dos comentários:

Código:
<style type="text/css">#comments .bg_title { display: none; }</style>


Retirar icons dos user-links:

Código:
<style type="text/css"> #user-links img {display:none;} </style>



Centrar aquilo que está debaixo do nome e visitas

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>



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>


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)


Alterar Tag "fieldset"

1º crias o id para a tag fieldset

Código:
<fieldset id="PunkecasFieldset">

TEXTO/OUTRAS M***S

</fieldset>


2º crias o Css e atribuis as caracteristicas desejadas

Código:
<style type="text/css"> #PunkecasFieldset  {border: ESPESURApx TIPO DE BORDER #COR;}</style>


exemplo de um Css

Código:
<style type="text/css"> #PunkecasFieldset  {border: 4px solid #FF0000;}</style>


solid é um tipo de border...existem mts mais, entre eles o dotted, dashed, inset, outset...



Criar zonas de Texto/outras coisas oculto

parte CSS

Código:
<style type="text/css">a span{display:none;} a:hover span {display: block;} </style>



parte HTML

Código:




Como usar uma tag "textarea"

Parte CSS:

Código:
<style type='text/css'>#Punkecas { width: 300px; height: 50px; overflow: auto; }</style>


Parte HTML:

Código:
<textarea name="Punkecas" cols="0" rows="0" id="Punkecas">

TEXTO

</textarea>


com este "code" têm a possibilidade de alterar a altura, a largura, e o numero de fileiras desta tag


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>

Sunday 03 August 2008 00:52


secçoes

Código para criarem secções no hi5 (versão actualizada)


Código:
<table style="margin: 0px auto;"><tr><td>
<div style="width: 90px; height: 400px;" class="structurediv" align="center">
<br> <br>
<br><br><a href="#ByPunkeCas1">TITULO 1</a>
<br><br><a href="#ByPunkeCas2">TITULO 2</a>
<br><br><a href="#ByPunkeCas3">TITULO 3</a>
<br><br><a href="#ByPunkeCas4">TITULO 4</a>
<br></div>

</td><td valign="top">
<div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv">

<a name="ByPunkeCas1">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem1


</fieldset>
</div>
<a name="ByPunkeCas2">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem2


</fieldset>
</div>
<a name="ByPunkeCas3">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem3


</fieldset>
</div>
<a name="ByPunkeCas4">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem4


</fieldset>
</div>
</div>
</td></tr></table>




Codigo extra (necessario):

Alargar a secção do about me:

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


Centrar a o profile (opcional):

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


se quizerem colocar os "titulo" dentro de caixas, usem a tag fieldset

exemplo:

...
<fieldset><a href="#ByPunkeCas1">TITULO 1</a></fieldset>

<br><br>

<fieldset><a href="#ByPunkeCas2">TITULO 2</a></fieldset>
...


<table style="margin: [color=red]0[/color]px auto;"> se alterarem a espesura de 0px para 1px ou mais irao criar um border



Resultado "Final":

http://i220.photobucket.com/albums/dd245/Punkecas/hi5tut.jpg

Sunday 03 August 2008 00:47


cursores

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>

Sunday 03 August 2008 00:45


efeitos de imagens

Imagem transparente

Código:
<img src="AQUI URL " style="filter:alpha(opacity=50)">


quanto menor o valor mais transparente fica, ou seja com 30 de opacity a imagem fica mais branca do que com 50


Reflicta a imagem em posição Vertical:

Código:
<img src="AQUI URL " style="filter:flipv">


Reflicta a imagem em posição Horizontal:

Código:
<img src=" AQUI URL" style="filter:fliph">


Eefeito de noite

Código:
<img src="AQUI  URL" style="filter:xray()">


Efeito de preto e branco

Código:
<img src="AQUI  URL" style="filter:gray;">


Efeito de gravadura na imagem

Código:
<img src="AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">


Efeito de realce nas imagem

Código:
<img src=" AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">




EFEITOS À PASSAGEM DO MOUSE

De Preto e Branco para Cor:

Código:
<style type="text/css"> a: AQUI URL {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>


De Cor para Preto e Branco:

Código:
<style type="text/css"> a: AQUI URL {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>


De normal para reflectida:

Código:
<style type="text/css"> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>


De reflectida para normal:

Código:
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>


De nítidez para desfoque:

Código:
<style type="text/css"> a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}</style>


De desfoque para nítidez:

Código:
<style type="text/css"> a:link img {filter:blur(add = 0, direction = 225, strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}</style>


De nivelamento para realce:

Código:
<style type="text/css"> a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>
</style>


De realce para nivelamento:

Código:
<style type="text/css"> a:link img {filter:progid:dximagetransform.microsoft.emboss;} 
 a:visited img {filter:progid:dximagetransform.microsoft.emboss;}  a:hover img {filter:none;}</style>
</style>


De sol para noite:

Código:
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray();} </style>


De noite para sol:

Código:
<style type="text/css"> a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;} </style>


De nitidez para transparência:

Código:
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;}
 a:hover img {filter:alpha(opacity=60);} </style>


De transparência para nitidez:

Código:
<style type="text/css"> a:link img {filter:alpha(opacity=60);}
a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;} </style>



Colucar imagens próximas

Código:
<div style="white-space: nowrap;"> <img src="URL IMAGEM"> <img src="URL IMAGEM”"> </div>


Sunday 03 August 2008 00:44


links uteis

Sunday 03 August 2008 00:41


|

abrir barra
Fechar barra

Deve estar conectado/a para escrever uma mensagem paulynhuh

Deve estar conectado/a para adicionar paulynhuh os seus amigos

 
Criar um Blog