HOW TO: Usar mi dark theme en el foro

Iniciado por raul338, 14 Enero 2011, 00:52 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1 2
Acciones del Usuario

raul338

14 Enero 2011, 00:52 AM Ultima modificación: 16 Enero 2011, 16:05 PM por raul338
Buenas!

En este post les explicare paso a paso como instalar la modificación que hice al Tema 2.0 de este foro, para que quede asi
Citar
Indice
Como se veria un foro
Este post
Mi perfil
Encuesta EHN-DEV 2010
Un tema con bastante codigo (El geshi no lo puedo modificar)
Respondiendo un post

Primero, deben instalarse Stylish, es una extension que permite modificar el CSS "en vivo" al navegar.

Descargar para Firefox

Descargar para Chrome / Chromium

Luego deben elejirse el tema 2.0 en el foro. Para eso, van a Perfil y en en el panel de la derecha, ponen "Configuración de Apariencia y Diseño" y en Tema Actual, Elegir "Tema 2.0" (presionando el boton "cambiar" y haciendo click en el nombre del tema)


Luego agregan mi estilo al Stylish

Para Firefox:

Van a la esquina inferior derecha donde hay una "S" blanca, le hacen click y ponen "Administrar estilos", y presionan "Escribir nuevo estilo". Les saldra un nuevo dialogo, ponen el nombre que quieran ("elHacker.net Dark Style" para este caso :xD), y en el codigo ponen lo siguiente, aceptan y listo!

Código [Seleccionar]

@-moz-document url-prefix('https://foro.elhacker.net') {
img[src="https://foro.elhacker.net/Themes/newgeneration/images/on.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 34px !important; background: url('http://img810.imageshack.us/img810/2725/30970175.png') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/on2.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 34px !important; background: url('http://img130.imageshack.us/img130/4936/on2a.png') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/off.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 36px !important; background: url('http://img821.imageshack.us/img821/3663/offi.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/normal_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img17.imageshack.us/img17/7943/normalpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/hot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img153.imageshack.us/img153/3956/hotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/veryhot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img838.imageshack.us/img838/7171/veryhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_normal_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img684.imageshack.us/img684/57/mynormalpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_hot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img651.imageshack.us/img651/4724/myhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_veryhot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img337.imageshack.us/img337/5421/myveryhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/xx.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img585.imageshack.us/img585/8227/32131385.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/exclamation.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img249.imageshack.us/img249/2711/exclamation.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/question.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background:url('http://img214.imageshack.us/img214/4929/questionv.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_left.gif"]{height: 0 !important; width: 0 !important; padding-left: 6px !important; padding-top: 12px !important; background: url('http://img713.imageshack.us/img713/8357/pollleft.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_middle.gif"]{content: url('http://img337.imageshack.us/img337/425/pollmiddle.gif') !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_right.gif"]{height: 0 !important; width: 0 !important; padding-left: 6px !important; padding-top: 12px !important; background: url('http://img707.imageshack.us/img707/9328/pollrightn.gif') no-repeat !important;}
*#hora{color:#FFF !important;}
#shadow-l{background:url('http://img130.imageshack.us/img130/1262/shadowld.png')!important}
#shadow-r{background:url('http://img233.imageshack.us/img233/5595/shadowrz.png')!important}
#mainbody{background:#222 !important}
a img{border:none !important}
.quote{color:#222 !important; background-color:#AAA !important; border:1px solid #232833 !important;}
.quote a{color:#444 !important}
.code{color:#111 !important; background-color:#DDD !important; border:1px solid #000 !important;}
.quoteheader, .codeheader{color:#EEE !important;}
.highlight{background-color:yellow !important; font-weight:bold !important; color:black !important}
.windowbg, tr.windowbg td{background:#444 !important; border-bottom:1px solid #555 !important}
.windowbg2, tr.windowbg2 td{background:#333 !important}
.windowbg3, tr.windowbg3 td{background:#222 !important}
.calendar_today{}
table.nopad .titlebg, tr.titlebg th, tr.titlebg td, table .titlebg2, tr.titlebg2 th, tr.titlebg2 td, tr td.titlebg{color:#FFF !important; background: url('http://img141.imageshack.us/img141/5024/navbgs.png') #DDC repeat-x !important;}
.titlebg, .titlebg a:link, .titlebg a:visited{color:#CCC !important;}
.titlebg2 a{color:#CCC !important;}
.titlebg a:hover{color:#FFF !important;}
.titlebg, .titlebg2{background:#444 !important;}
.bordercolor{ border:1px solid #000 !important;}
.tborder{  border:2px solid #000 !important;}
.catbg, .catbg2{color:#fff !important; background:#232833 url('http://img141.imageshack.us/img141/5024/navbgs.png') repeat-x !important; border-bottom:1px solid #000 !important;}
.catbg3{color:#FFF !important; background:url('http://img141.imageshack.us/img141/5024/navbgs.png') !important;}
.catbg3 a{color:#FFF !important; text-decoration:none !important;}
.catbg a, .catbg2 a, .catbg a:hover, .catbg2 a:hover{color:#fff !important; text-decoration:none !important;}
.catbg a img, .catbg2 a img, .catbg3 a img{border:none !important;}
.smalltext a{color:#DDD !important;  text-decoration:none !important;}
.smalltext a img, .smalltext a:hover img{border:0 !important;}
.smalltext a:hover{color:#777 !important; border-bottom:solid 1px #777 !important;}
.signature a img{border:none !important; text-decoration:none}
.error{color:red}
#header{background:url('http://img408.imageshack.us/img408/8404/headerbgb.png') repeat-x !important;}
#header-l{background:url('http://img714.imageshack.us/img714/8087/headerla.png') 0 0 no-repeat !important;}
#header-r{background:url('http://img715.imageshack.us/img715/1386/headerreh.png') 100% 0 no-repeat !important; }
#logo-bg, #logo-bg a{background:url('http://img221.imageshack.us/img221/7074/logobg.png') no-repeat !important;}
#logo, #logo a{background:url('http://img151.imageshack.us/img151/3576/logomy.png') no-repeat !important;}
#news{background-color:#444 !important; border:1px solid #ccc !important;}
div.profile_info{color:#000 !important}
div.profile_info a{color:#222 !important}
div.profile_info a:hover{color:#000 !important}
#toolbar{background:url('http://img708.imageshack.us/img708/9389/navbg2.png') repeat-x !important}
#nav{color:#FFF !important; background:url('http://img141.imageshack.us/img141/5024/navbgs.png') !important;}
#nav li a{color:#FFF !important}
#nav a:hover{background:url('http://img708.imageshack.us/img708/9389/navbg2.png') !important}
#showcase{background:#fff !important; color:#444 !important;}
#footer{background:url('http://img40.imageshack.us/img40/8987/footerbgd.png') repeat-x !important; color:#eee !important;}
#footer-l{background:url('http://img208.imageshack.us/img208/5641/footerbgl.png') 0 0 no-repeat !important; padding-left:20px !important;}
#footer-r{background:url('http://img263.imageshack.us/img263/4379/footerbgr.png') 100% 0 no-repeat !important; height:83px; padding-right:20px !important;}
#footer a{ color:#000 !important}
#footer a:hover{color:#CCC !important}
#footer2{color:#999 !important}
body{color:#E7E7E7 !important}
#page_bg{background:#252525 !important;}
a{color:#BBB !important; outline:none !important}
a:hover{color:#FFF !important; text-decoration:none !important}
a:link,a:visited{text-decoration:none !important}
a:hover{text-decoration:none !important}
h1{padding-bottom:5px}
h2{padding-bottom:5px}
h3{padding-bottom:0px}
h4{padding-bottom:5px}
.small{color:#999 !important}
.createdate,.modifydate{color:#999 !important}
#ajax_in_progress{background:#444; color:white; text-align:center; font-weight:bold; font-size:18pt; padding:3px; width:100%; position:fixed; top:0; left:0}
.geshi{color:#111 !important; background-color:#DDD !important; border:1px solid #222 !important;}
}



Para Chrome:

Hagan click derecho en la "S" que aparece al lado de la barra de URL (omnibar) y ponen opciones, clickean en "Add new style". Le ponen un nombre, con Enabled Activado. En la parte de "Applies To" presionan "Especify" y seleccionan "URL starting with" poniendo la url del foro, con el protocolo que usen (HTTP o HTTPS). Deberia quedar "http://foro.elhacker.net" (en mi caso) y en codigo ponen el codigo de mas abajo y ponen "save" y listo :)

Código [Seleccionar]

img[src="https://foro.elhacker.net/Themes/newgeneration/images/on.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 34px !important; background: url('http://img810.imageshack.us/img810/2725/30970175.png') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/on2.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 34px !important; background: url('http://img130.imageshack.us/img130/4936/on2a.png') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/off.gif"]{height: 0 !important; width: 0 !important; padding-left: 50px !important; padding-top: 36px !important; background: url('http://img821.imageshack.us/img821/3663/offi.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/normal_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img17.imageshack.us/img17/7943/normalpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/hot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img153.imageshack.us/img153/3956/hotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/veryhot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img838.imageshack.us/img838/7171/veryhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_normal_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img684.imageshack.us/img684/57/mynormalpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_hot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img651.imageshack.us/img651/4724/myhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/topic/my_veryhot_post.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img337.imageshack.us/img337/5421/myveryhotpost.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/xx.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img585.imageshack.us/img585/8227/32131385.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/exclamation.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background: url('http://img249.imageshack.us/img249/2711/exclamation.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/post/question.gif"]{height: 0 !important; width: 0 !important; padding-left: 20px !important; padding-top: 20px !important; background:url('http://img214.imageshack.us/img214/4929/questionv.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_left.gif"]{height: 0 !important; width: 0 !important; padding-left: 6px !important; padding-top: 12px !important; background: url('http://img713.imageshack.us/img713/8357/pollleft.gif') no-repeat !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_middle.gif"]{content: url('http://img337.imageshack.us/img337/425/pollmiddle.gif') !important;}
img[src="https://foro.elhacker.net/Themes/newgeneration/images/poll_right.gif"]{height: 0 !important; width: 0 !important; padding-left: 6px !important; padding-top: 12px !important; background: url('http://img707.imageshack.us/img707/9328/pollrightn.gif') no-repeat !important;}
*#hora{color:#FFF !important;}
input, textarea, select{border:#222 1px solid !important;color:#FFF !important;background-color:#666 !important;}
#shadow-l{background:url('http://img130.imageshack.us/img130/1262/shadowld.png')!important}
#shadow-r{background:url('http://img233.imageshack.us/img233/5595/shadowrz.png')!important}
#mainbody{background:#222 !important}
a img{border:none !important}
.quote{color:#222 !important; background-color:#AAA !important; border:1px solid #232833 !important;}
.quote a{color:#444 !important}
.code{color:#111 !important; background-color:#DDD !important; border:1px solid #000 !important;}
.quoteheader, .codeheader{color:#EEE !important;}
.highlight{background-color:yellow !important; font-weight:bold !important; color:black !important}
.windowbg, tr.windowbg td{background:#444 !important; border-bottom:1px solid #555 !important}
.windowbg2, tr.windowbg2 td{background:#333 !important}
.windowbg3, tr.windowbg3 td{background:#222 !important}
.calendar_today{}
table.nopad .titlebg, tr.titlebg th, tr.titlebg td, table .titlebg2, tr.titlebg2 th, tr.titlebg2 td, tr td.titlebg{color:#FFF !important; background: url('http://img141.imageshack.us/img141/5024/navbgs.png') #DDC repeat-x !important;}
.titlebg, .titlebg a:link, .titlebg a:visited{color:#CCC !important;}
.titlebg2 a{color:#CCC !important;}
.titlebg a:hover{color:#FFF !important;}
.titlebg, .titlebg2{background:#444 !important;}
.bordercolor{ border:1px solid #000 !important;}
.tborder{  border:2px solid #000 !important;}
.catbg, .catbg2{color:#fff !important; background:#232833 url('http://img141.imageshack.us/img141/5024/navbgs.png') repeat-x !important; border-bottom:1px solid #000 !important;}
.catbg3{color:#FFF !important; background:url('http://img141.imageshack.us/img141/5024/navbgs.png') !important;}
.catbg3 a{color:#FFF !important; text-decoration:none !important;}
.catbg a, .catbg2 a, .catbg a:hover, .catbg2 a:hover{color:#fff !important; text-decoration:none !important;}
.catbg a img, .catbg2 a img, .catbg3 a img{border:none !important;}
.smalltext a{color:#DDD !important;  text-decoration:none !important;}
.smalltext a img, .smalltext a:hover img{border:0 !important;}
.smalltext a:hover{color:#777 !important; border-bottom:solid 1px #777 !important;}
.signature a img{border:none !important; text-decoration:none}
.error{color:red}
#header{background:url('http://img408.imageshack.us/img408/8404/headerbgb.png') repeat-x !important;}
#header-l{background:url('http://img714.imageshack.us/img714/8087/headerla.png') 0 0 no-repeat !important;}
#header-r{background:url('http://img715.imageshack.us/img715/1386/headerreh.png') 100% 0 no-repeat !important; }
#logo-bg, #logo-bg a{background:url('http://img221.imageshack.us/img221/7074/logobg.png') no-repeat !important;}
#logo, #logo a{background:url('http://img151.imageshack.us/img151/3576/logomy.png') no-repeat !important;}
#news{background-color:#444 !important; border:1px solid #ccc !important;}
div.profile_info{color:#000 !important}
div.profile_info a{color:#222 !important}
div.profile_info a:hover{color:#000 !important}
#toolbar{background:url('http://img708.imageshack.us/img708/9389/navbg2.png') repeat-x !important}
#nav{color:#FFF !important; background:url('http://img141.imageshack.us/img141/5024/navbgs.png') !important;}
#nav li a{color:#FFF !important}
#nav a:hover{background:url('http://img708.imageshack.us/img708/9389/navbg2.png') !important}
#showcase{background:#fff !important; color:#444 !important;}
#footer{background:url('http://img40.imageshack.us/img40/8987/footerbgd.png') repeat-x !important; color:#eee !important;}
#footer-l{background:url('http://img208.imageshack.us/img208/5641/footerbgl.png') 0 0 no-repeat !important; padding-left:20px !important;}
#footer-r{background:url('http://img263.imageshack.us/img263/4379/footerbgr.png') 100% 0 no-repeat !important; height:83px; padding-right:20px !important;}
#footer a{ color:#000 !important}
#footer a:hover{color:#CCC !important}
#footer2{color:#999 !important}
body{color:#E7E7E7 !important}
#page_bg{background:#252525 !important;}
a{color:#BBB !important; outline:none !important}
a:hover{color:#FFF !important; text-decoration:none !important}
a:link,a:visited{text-decoration:none !important}
a:hover{text-decoration:none !important}
h1{padding-bottom:5px}
h2{padding-bottom:5px}
h3{padding-bottom:0px}
h4{padding-bottom:5px}
.small{color:#999 !important}
.createdate,.modifydate{color:#999 !important}
#ajax_in_progress{background:#444; color:white; text-align:center; font-weight:bold; font-size:18pt; padding:3px; width:100%; position:fixed; top:0; left:0}
.geshi{color:#111 !important; background-color:#DDD !important; border:1px solid #222 !important;}


Ahora si, si hicieron todo bien, los cambios ya deberian verse (o al menos presionen F5 para actualizar)

Espero que les sirva y que mas de uno lo use!

Si alguno tiene problemas, pondre imagenes :xD

Freeze.

#1
14 Enero 2011, 04:10 AM
No me interesa en absoluto el Theme pero me alegra que alguien tome la iniciativa antes de pedir que alguien mas lo haga.

Sinceras felicitaciones, Saludos.

[Zero]

#2
14 Enero 2011, 15:47 PM
Yo ya lo uso, pero tengo las imágenes del tema en localhost, así a la vez de leerse mejor (para mi gusto) carga también un poco más rápido.

Saludos, gracias por el paper  :)

BlackStack

"El Hombre, en su orgullo, creó a Dios a su imagen y semejanza.”
Nietzsche

raul338

#3
15 Enero 2011, 13:45 PM
Eso es un problema del firefox, No reemplaza bien los CSS, por eso recomiendo usarlo con chrome :xD

raul338

#4
16 Enero 2011, 00:31 AM
Aunque tambien puedes borrar esta linea

Código [Seleccionar]

input, textarea, select{border:#222 1px solid !important;color:#FFF !important;background-color:#666 !important;}


pero se vera blanco total con letras negras, un contraste tremendo :xD

Roy-Mustang

#5
18 Enero 2011, 03:39 AM
Que bien te quedo te felicito,mereces una Ovación  ;-) ;-) ;-) ;-)



No soy ,muy partidario de temas oscuros pero el tuyo es agradable a la vista.

Saludos

Psyke1

#6
18 Enero 2011, 18:02 PM
Ya tienes a otro mas raul!! :xD
Me encanta! ;)

DoEvents! :P

BlackZeroX

#7
18 Enero 2011, 20:23 PM
.
Entonces no soy el unico loco que se descargo las imagenes en el pc jaja.

P.D.: Lo uso desde hace tiempo pero nunca dije nada, hasta ahora xP.

Dulces Lunas!¡.
.
The Dark Shadow is my passion.

dvdr

#8
19 Enero 2011, 12:45 PM Ultima modificación: 19 Enero 2011, 12:50 PM por dvdr
es asi como tiene que quedar o me salio mal compi  se agradecería unas capturitas por aqui salu2
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('cdfef286-7505-4e06-a99a-907ff6a326a5');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/timedate-widget">Time and Date</a> widget and many other <a href="http://www.widgetbox.com/">great free widg

Novlucker

#9
19 Enero 2011, 13:10 PM
Supongo que no has visto que en el primer post hay capturas :-X
Contribuye con la limpieza del foro, reporta los "casos perdidos" a un MOD XD

"Hay dos cosas infinitas: el Universo y la estupidez  humana. Y de la primera no estoy muy seguro."
Albert Einstein
Imprimir
Ir Arriba Páginas1 2
Acciones del Usuario