Tutorial Customizar Disfarçar ou Mudar a Aparência de um Site Acessado
Muitos são os motivos que levam os usuários a desejarem a possibilidade de modificar a aparência e tematizar
o site que acessa, seja para conseguir um melhor contraste para a leitura, ou por não gostarem das cores do site,
e até mesmo para disfarçar o Facebook, Youtube...
Agora esse forma de customisação é totalmente possível utilizando css3 e um plugin comum para
firefox e google chrome
Aviso aos leigos:
- A mudança é claro fica a nível do seu navegador, não precisa se preocupar que o site original continuará intacto as mudanças apenas você é quem faz.
Siga o tutorial para mudar a aparência de qualquer site:
- Para mudar a aparência de um site utilizando o plugin acesse e instale, em um dos navegadores abaixo o Stylish:
versões Stylish para Firefox ou Stylish para Chrome. - Pronto, agora é só instalar, va nas configurações e adicione os seus estilos css:
Exemplo de código do stylish:
Para o firefox para mudar a aparência de todos os sites acessados que possuem o domínio "com"
- No firefox acesse no menu superior "FERRAMENTAS/Complementos"
- Nos complementos acesse "Estilo de Usuário"
- E add o código abaixo acessando "Escrever Novo Estilo"
- Agora é só colocar o nome EX:"Blackout" e uma marca EX:"com"
/***********************| INÍCIO DO CÓDIGO |***********************************/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("com") {
html {
background: #000 !important;
}
body {
background: #222222 !important;
width: 1024px !important;
margin: 0 auto !important;
}
div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: #222222 !important;
color: #BBBBBB !important;
background-image: none !important;
}
a {
color: #0072BC !important;
text-decoration: none !important;
text-shadow: 1px 1px #000000 !important;
}
a:hover {
color: #889900 !important;
text-decoration: none !important;
text-shadow: 1px 1px #000000 !important;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff !important;
text-decoration: none !important;
text-shadow: 1px 1px #000000 !important;
}
img {
opacity: 0.1 !important;
}
img:hover {
display:block !important;
-moz-transition: opacity 0.4s ease-in 0s !important;
opacity: 1 !important;
}
a:hover img {
display:block !important;
opacity: 1 !important;
-moz-transition: opacity 0.4s ease-in 0s !important;
}
span {
color: #559911 !important;
}
li {
color: #AA2222 !important;
}
}
/***********************| FIM DO CÓDIGO |***********************************/Aviso: Se você não souber nada de css pode encontrar outros estilos prontos na internet:
Estilos para Stylist
http://userstyles.org/categories/site
