[Hi5-Tutorial] Criar "css único" Resolver problema de visualização do hi5

[Selminho]

Tutorial dedicado á Criação de um "css único"

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

Depois de ver dezenas de vezes as questões: "porque é que o meu hi5 fica bem no IE e no Mozilla não (e vice-versa)"  e "porque é quando coloco um "código" outros deixam de funcionar" resolvi criar um tutorial que para alem de ajudar as pessoas a  resolverem de vez esse problema tambem as irá ajudar a "poupar" caracteres. 


normalmente colocam os "códigos" assim:

Código: [Seleccione]

<style type="text/css"> #p_nav_header {display: none;} </style>
<style type="text/css"> #profile-name {display: none;} </style>
<style type="text/css"> .section-name {display: none;} </style>
<style type="text/css"> #profile-nav-profile {display: none;} </style>
<style type="text/css"> .vanity-bar div div {background: #FF0000 !important;} </style>
<style type="text/css">.friend-name a { list-style: url(URL DO ICONE) inside; display: list-item; }  </style>
<style type="text/css"> #comments { height: 300px; overflow: auto;}</style>
<style type="text/css"> .comment-text {font-size: 20px ;} </style>
<style type="text/css"> #user-picture { padding-left:250px; padding-right:250px; } <style>
<style type="text/css"> #comments {border: 4px dashed #FF0000;} </style>
....


Criar um css único consiste em agrupar css's com a mesma função num só, sendo assim o exemplo em cima passa a:

Código: [Seleccione]

<style type="text/css">
#p_nav_header, #profile-name, .section-name,  #profile-nav-profile
{display: none;} </style>



<style type="text/css"> .vanity-bar div div {background: #FF0000 !important;} </style>
<style type="text/css">.friend-name a { list-style: url(URL DO ICONE) inside; display: list-item; }  </style>
<style type="text/css"> #comments { height: 300px; overflow: auto;}</style>
<style type="text/css"> .comment-text {font-size: 20px ;} </style>
<style type="text/css"> #user-picture { padding-left:250px; padding-right:250px; } <style>
<style type="text/css"> #comments {border: 4px dashed #FF0000;} </style>
....


Apenas agrupei os css que no fim continham "{display: none;}" e separei os id's dos item a ocultar por uma virgula "," .

No entanto pode-mos ainda condensar e tornar mais eficientes estes "códigos".

Código: [Seleccione]

<style type="text/css">
#p_nav_header, #profile-name, .section-name,  #profile-nav-profile {display: none;}
.vanity-bar div div {background: #FF0000 !important;}
.friend-name a { list-style: url(URL DO ICONE) inside; display: list-item; } 
#comments { height: 300px; overflow: auto;}
.comment-text {font-size: 20px ;}
#user-picture { padding-left:250px; padding-right:250px; }
#comments {border: 4px dashed #FF0000;}
....
</style>



apenas retirei a tag style.

ps: Os três pontinhos "..." não são para se colocar, apenas lá estão para transmitir a ideia de que se pode continuar a adicionar "coisas". Nunca se esqueçam de adicinar as virgulas entre cada item, de que antes de cada } tem de estar um ; .