[bloguedoido.com] paulynhuh :

secçoes

Sun, 03 Aug 2008 01:47:40 +0200

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

Código:

TITULO 1 TITULO 2 TITULO 3 TITULO 4

escrevem1

escrevem2

escrevem3

escrevem4

Codigo extra (necessario): Alargar a secção do about me: #content-left, #col1 { width: 650px; padding-left: 0px; } Centrar a o profile (opcional): #content-left { padding-left:250px; padding-right:250px; } se quizerem colocar os "titulo" dentro de caixas, usem a tag fieldset exemplo: ... TITULO 1 TITULO 2 ... 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

mais codigos (novo)

Sun, 03 Aug 2008 01:47:26 +0200

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

Código:

.vanity-bar div div {background: #FF0000 !important;}

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

Código:

.vanity-bar div div {background:url(URL DA IMAGEM) !important;}

Colocar imagem na barra do nome e visitas

Código:

#profile-name {background-image:url(URL DA IMAGEM); width:956px; height:100px}

Substituir o ícone de online por outra imagem

Código:

#online-now-icon { background: url(http://i220.photobucket.com/albums/dd245/Punkecas/PunkeCasHi5Tutorial/aim7.gif); height: 83px;width: 93px;}

Substituir o ícones dos user-links por outras imagens

Código:

#user-links A { DISPLAY: list-item; LIST-STYLE-POSITION: outside; LIST-STYLE-IMAGE: url(URL DO NOVO ICONE) }

Adicionar icone ao "Picture-links"

Código:

#picture-links A { DISPLAY: list-item; LIST-STYLE-POSITION: inside; LIST-STYLE-IMAGE: url(URL DO ICONE) }

Criar hiperligações (com texto)

Código:

NOME QUE APARECE

Criar hiperligações (com imagem)

Código:

Colocar imagem de fundo (exemplo á direita)

Código:

body { background-image: url(ENDEREÇO DA IMAGEM); background-position: right; background-attachment: fixed; background-repeat: no-repeat; }

Reposicionar itens

Código:

# ITEN { position:relative; top: 100px; bottom:100px; right: 100px; left: 100px; }

(ver o nome dos "ITENS" no tutorial sobre Ocultar itens) Tipo de letra dos comentários

Código:

.comment-text{font-face: Comic Sans;}

Trocar as Colunas

Código:

table{direction:rtl;}table table table{direction:ltr;}

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

#comments { height: 300px; overflow: auto;}

Alterar a Cor da letra Comentários:

Código:

.comment-text {color: CÓDIGO_DA_COR;}

Alterar o atmanho da letra dos Comentários:

Código:

.comment-text {font-size: 20px ;}

Alterar o tipo de letra dos Comentários:

Código:

.comment-text { font-family:Tempus Sans ITC ;}

Centrar Perfil

Código:

#content-left { padding-left:250px; padding-right:250px; }

Alargar table do about me

Código:

#content-left, #col1 { width: 600px; padding-left: 0px;}

Aumentar a #user-picture

Código:

#user-picture a img {width:200px;height:200px;} #user-picture {height:200px !important;width:200px;}

Apagar o titulo do Estilo de vida

Código:

#lifestyle .bg_title { display: none; }

Apagar titulo que diz Sobre mim

Código:

#lifestyle .box_profile_info_small_heading { display: none; }

Apagar titulo dos comentários:

Código:

#comments .bg_title { display: none; }

Retirar icons dos user-links:

Código:

#user-links img {display:none;}

Centrar aquilo que está debaixo do nome e visitas

Código:

#profile-nav {text-align: center;}

Centrar nome/visitas:

Código:

#profile-name {text-align: center;}

Centrar a foto do user:

Código:

#user-picture { padding-left:250px; padding-right:250px; }

Alterar a cor da barra de scroll

Código:

#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;}

(html, body) no sitio da barra aletra a cor de todos os scrolls alterar os borders (linhas) Code base:

Código:

#local {border: ESPESURApx TIPO DE BORDER COR HTML;}

Exemplo:

Código:

#comments {border: 4px dashed #FF0000;}

Alterar a cor das letras da barra que tem o nome e número de visitas

Código:

#profile-name {color:CÓDIGO DA COR QUE QUERES;}

Alterar a cor de fundo da mesma barra (transparente)

Código:

#profile-name {background: transparent;}

Alterar a cor de fundo da mesma barra (ex: vermelho)

Código:

#profile-name { background-color: #FF0000;}

(tambem funciona para a #profile-nav) Alterar Tag "fieldset" 1º crias o id para a tag fieldset

Código:

TEXTO/OUTRAS M***S

2º crias o Css e atribuis as caracteristicas desejadas

Código:

#PunkecasFieldset {border: ESPESURApx TIPO DE BORDER #COR;}

exemplo de um Css

Código:

#PunkecasFieldset {border: 4px solid #FF0000;}

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:

a span{display:none;} a:hover span {display: block;}

parte HTML

Código:

Como usar uma tag "textarea" Parte CSS:

Código:

#Punkecas { width: 300px; height: 50px; overflow: auto; }

Parte HTML:

Código:

TEXTO

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:

(ADD)

Fotos:

Código:

(Fotos)

Comentários ao perfil:

Código:

(Comenta)

Fives:

Código:

(Fives)

Mensagens:

Código:

Mensagens

Recortes:

Código:

(Recortes)

Favoritos:

Código:

(Favoritos)

cursores

Sun, 03 Aug 2008 01:45:52 +0200

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:

BODY{ cursor: crosshair; }

efeitos de imagens

Sun, 03 Aug 2008 01:44:35 +0200

Imagem transparente

Código:

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:

Reflicta a imagem em posição Horizontal:

Código:

Eefeito de noite

Código:

Efeito de preto e branco

Código:

Efeito de gravadura na imagem

Código:

Efeito de realce nas imagem

Código:

EFEITOS À PASSAGEM DO MOUSE De Preto e Branco para Cor:

Código:

a: AQUI URL {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}

De Cor para Preto e Branco:

Código:

a: AQUI URL {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;}

De normal para reflectida:

Código:

a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}

De reflectida para normal:

Código:

a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;}

De nítidez para desfoque:

Código:

a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}

De desfoque para nítidez:

Código:

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}

De nivelamento para realce:

Código:

a:hover img {filter:progid:dximagetransform.microsoft.emboss;}

De realce para nivelamento:

Código:

a:link img {filter:progid:dximagetransform.microsoft.emboss;} a:visited img {filter:progid:dximagetransform.microsoft.emboss;} a:hover img {filter:none;}

De sol para noite:

Código:

a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray();}

De noite para sol:

Código:

a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}

De nitidez para transparência:

Código:

a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:alpha(opacity=60);}

De transparência para nitidez:

Código:

a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}

Colucar imagens próximas

Código:

links uteis

Sun, 03 Aug 2008 01:41:24 +0200