Ayuda: Crear pequeño script para Greasemonkey [Firefox]

[gon_dragon]

Bueno, no es muy complicado lo que pido.

Solo quiero un script que evite que un sitio cargue su archivo CSS y cargue uno que yo especifique.

Lo que sucede es que, yo hice una copia exacta del CSS de un foro al que asisto y modifique ciertos valores para hacer un "Skin" (aun me faltan un par de cosas pero quiero publicar el primer beta). El problema es que, el Stylish no me acepta ciertos parametros o no se, y no me cambia nada.

Por eso, creo que seria más fácil hacer un pequeño script que me cargue un CSS subido a inter o de la computadora (Osea, que solo haya que especificar la direccion).

Le agredeceria mucho a quien me ayudara, lo haría yo mismo pero aún no tengo nocion de como crear lineas de código en ningún lenguaje, salvo HTML... Solo se tomar lineas ya existentes, analisarlas y modificarlas =D... no en todos los lenguajes pero, algo es algo :S

[Alejandro]

Mmm, creo que el que va a poder a ayudarte mejor acá es elQuique o Nico... vamos a ver si se aparecen luego.

[elQuique]

Esto oculta o muestra todas las hojas de estilo:

Código: Seleccionar todo

javascript:var%20i=0;if(document.styleSheets.length>0){cs=!document.styleSheets[0].disabled;for(i=0;i%20<%20document.styleSheets.length;i++)%20document.styleSheets[i].disabled=cs;};void(cs=true);

vamos por parte:

Código: Seleccionar todo

var i=0;

arranca en 0 la variable i

Código: Seleccionar todo

if(document.styleSheets.length>0){

una condición para saber si hay hojas de estilo, si no hay es 0, si hay 1 o más sera mayor a 0

en ese caso

Código: Seleccionar todo

cs=!document.styleSheets[0].disabled;

guarda el valor opuesto de la hoja si esta activa o no, si está activa guarda desactivado, si esta desactivado guarda en cs activo. Esto lo hace así, invertido, para lograr el efecto de desactivar y activar o sea dar vuelta el estado actual de las hojas ;)

Luego

Código: Seleccionar todo

for(i=0;i < document.styleSheets.length;i++)

cuenta desde la hoja 0 a la n (cuantas existan) y va a realizar las siguiente instrucción:

Código: Seleccionar todo

document.styleSheets[i].disabled=cs;

y le pone el valor de cs, o sea invierte su estado (activa o desactiva)

Estudiando eso mismo, que si bien no es exacto lo que quieras, en tu caso, yo haría lo siguiente:

- Un for de 0 a n hojas
- que imprima con un alert el nombre de cada hoja ;), de esta forma te enteras como se llaman

luego de ese trabajo de exploración, haces tu script para que si la hoja se llama:

style.css

se sustituya por:

http://tusitio.com/tuhoja.css

:)

Si o te apañas con eso, postea tu intento y lo vemos.

[Nico]

Si puedes también envía el css que tienes y la dirección del sitio y veo si puedo hacer funcionar el Stylish, que sería casi lo mismo que el script. Debería ser facil de aplicar.

[gon_dragon]

Bueno, voy a intentar de hacer el script, gracias elQuique :)
Una pregunta... el FTP gratuito de miarroba funciona para alojar el CSS no?.

Ah, nico, aqui esta el CSS

Código: Seleccionar todo

body
{
	background: #AA3333;
	color: #880000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
a:link, body_alink
{
	color: #660000;
	text-decoration: none;
}
a:visited, body_avisited
{
	color: ##550000;
	text-decoration: none;
}
a:hover, a:active, body_ahover
{
	color: #19263b;
	text-decoration: underline;
}
.page
{
	background: #660000;
	color: #AA0000;
}
td, th, p, li
{
	font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
	background: #E1D1D1;
	color: #000000;
	border: 1px solid #8C190D;
}
.tcat
{
	background: #bb2727 url() repeat-x top left;
	color: #FFFFFF;
	font: bold 11pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #FFFF66;
	text-decoration: underline;
}
.thead
{
	background: #AA0000 url() repeat-x top left;
	color: #FFDDDD;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
	color: ##FF0000;
}
.thead a:visited, .thead_avisited
{
	color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #FFFF00;
}
.tfoot
{
	background: #FFDDDD;
	color: #770000;
}
.tfoot a:link, .tfoot_alink
{
	color: #FF3333;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #FF3333;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #117777;
}
.alt1, .alt1Active
{
	background: ##FFDDDD;
	color: #000000;
}
.alt2, .alt2Active
{
	background: #DDAAAA;
	color: #000000;
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
}
.wysiwyg
{
	background: #DDAAAA;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
.wysiwyg a:link, .wysiwyg_alink
{
	color: #22229C;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
	color: #22229C;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
	color: #FF4400;
}
textarea, .bginput
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
	font-size: 11px;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
	color: #FF0000;
}
.navbar
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
	color: #FF0000;
	font-weight: bold;
}
.fjsel
{
	background: #3E5C92;
	color: #E0E0F6;
}
.fjdpth0
{
	background: #F7F7F7;
	color: #000000;
}
.panel
{
	background: #F5E7E4 url() repeat-x top left;
	color: #000000;
	padding: 10px;
	border: 2px outset;
}
.panelsurround
{
	background: #E0D4D1 url() repeat-x top left;
	color: #000000;
}
legend
{
	color: #9C2222;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
	background: #FF7777;
	color: #FFFFFF;
	font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 5px 6px 5px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FFFFFF;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #DDAAAA;
	color: #000000;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #A00000;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #A00000;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #8A949E;
	color: #FFFFFF;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.postbit {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color:#d5d9ec; 
border-top: 1px solid #BABAE7;
border-right: 2px solid #BABAE7;
border-left: 1px solid #BABAE7;
border-bottom: 2px solid #BABAE7;
margin-bottom: 3px;
}
.chatbox {
font-size: 12px;
font-face: verdana;
}
.bigusername { font-size: 14pt; }
.temas { font-size: 14pt; color: #2353ab; font-face: Copperplate Gothic Bold;  background: #c6ccea; }
.posts { font-size: 12pt; color: #2353ab;  background: #b9c1e7;}

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

Lo obtuve con el firebug, poniendo editar... claro que ya le altere los colores, me falta hacer algunas cosas como redondear los bordes y otras pocas cosas, pero la idea general esta...

Bueno, muchas gracias por la ayuda :D ahora comienzo...

EDITADO:

me esta llendo mal, no entiendo nada D=
Si fuera solo cambiar el código HTML seria fácil, cambio la direccion del CSS y ya, pero se me esta complicando D=

[jProgr]

Yo no tengo ni idea de CSS
No soy como elQuique(master lv9 en programacion) solo se un poco de HTML, mucho java y visual fox. :P
Que inutil me siento

[Nico]

Bueno, voy a intentar de hacer el script, gracias elQuique :)
Una pregunta... el FTP gratuito de miarroba funciona para alojar el CSS no?.

Ah, nico, aqui esta el CSS

Código: Seleccionar todo

body
{
	background: #AA3333;
	color: #880000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
a:link, body_alink
{
	color: #660000;
	text-decoration: none;
}
a:visited, body_avisited
{
	color: ##550000;
	text-decoration: none;
}
a:hover, a:active, body_ahover
{
	color: #19263b;
	text-decoration: underline;
}
.page
{
	background: #660000;
	color: #AA0000;
}
td, th, p, li
{
	font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
	background: #E1D1D1;
	color: #000000;
	border: 1px solid #8C190D;
}
.tcat
{
	background: #bb2727 url() repeat-x top left;
	color: #FFFFFF;
	font: bold 11pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #FFFF66;
	text-decoration: underline;
}
.thead
{
	background: #AA0000 url() repeat-x top left;
	color: #FFDDDD;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
	color: ##FF0000;
}
.thead a:visited, .thead_avisited
{
	color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #FFFF00;
}
.tfoot
{
	background: #FFDDDD;
	color: #770000;
}
.tfoot a:link, .tfoot_alink
{
	color: #FF3333;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #FF3333;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #117777;
}
.alt1, .alt1Active
{
	background: ##FFDDDD;
	color: #000000;
}
.alt2, .alt2Active
{
	background: #DDAAAA;
	color: #000000;
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
}
.wysiwyg
{
	background: #DDAAAA;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 5px 10px 10px 10px;
	padding: 0px;
}
.wysiwyg a:link, .wysiwyg_alink
{
	color: #22229C;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
	color: #22229C;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
	color: #FF4400;
}
textarea, .bginput
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
	font-size: 11px;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
	color: #FF0000;
}
.navbar
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
	color: #FF0000;
	font-weight: bold;
}
.fjsel
{
	background: #3E5C92;
	color: #E0E0F6;
}
.fjdpth0
{
	background: #F7F7F7;
	color: #000000;
}
.panel
{
	background: #F5E7E4 url() repeat-x top left;
	color: #000000;
	padding: 10px;
	border: 2px outset;
}
.panelsurround
{
	background: #E0D4D1 url() repeat-x top left;
	color: #000000;
}
legend
{
	color: #9C2222;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
	background: #FF7777;
	color: #FFFFFF;
	font: bold 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 5px 6px 5px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FFFFFF;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #DDAAAA;
	color: #000000;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #A00000;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #A00000;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #8A949E;
	color: #FFFFFF;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.postbit {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color:#d5d9ec; 
border-top: 1px solid #BABAE7;
border-right: 2px solid #BABAE7;
border-left: 1px solid #BABAE7;
border-bottom: 2px solid #BABAE7;
margin-bottom: 3px;
}
.chatbox {
font-size: 12px;
font-face: verdana;
}
.bigusername { font-size: 14pt; }
.temas { font-size: 14pt; color: #2353ab; font-face: Copperplate Gothic Bold;  background: #c6ccea; }
.posts { font-size: 12pt; color: #2353ab;  background: #b9c1e7;}

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

Lo obtuve con el firebug, poniendo editar... claro que ya le altere los colores, me falta hacer algunas cosas como redondear los bordes y otras pocas cosas, pero la idea general esta...

Bueno, muchas gracias por la ayuda :D ahora comienzo...

EDITADO:

me esta llendo mal, no entiendo nada D=
Si fuera solo cambiar el código HTML seria fácil, cambio la direccion del CSS y ya, pero se me esta complicando D=

Prueba agregando !important en cada propiedad css. Por ejemplo:

Código: Seleccionar todo

.inlineimg { vertical-align: middle; !important}

Y así en cada una de las propiedades.

Para que funcione bien con Stylish, debes agregar lo siguiente al principio:

Código: Seleccionar todo

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(DOMINIO), domain(DOMINIO)

Ahi sustituyes DOMINIO por el dominio donde quieras que se ejecute. En este caso sería el foro que comentas.

Cualquier duda vuelve a postear y vemos.

PD: otra extensión que recomiendo para editar CSS en Firefox es EditCSS. La uso junto con Firebug : D

[gon_dragon]

Bueno, quiero agradecerles a todo por su tiempo y su ayuda.

Gracias al script de ElQuique, elimine el CSS de la web.

Ahora solo me queda terminar de hacer el CSS para el Stylish. Muchas gracias Nico por la extension que me recomendaste, es muy útil para hacer ediciones rápidas y probar cosas sin hacer tanto lio.

Me fueron de mucha ayuda, no se que habria echo sin ustedes =D.

hasta la próxima!

[elQuique]

Fantabuloso, ve publicando los progresos pues :)

[cobranza]

alguien que me guie desde cero, quiero programar un script, pero no tengo ni idea donde hacerlo, donde compilarlo, si es un addons de firefox, si es simple codigo dentro de firefox, etc etc etc.. alguien me ayuda?

[elQuique]

Y no es mejor aprender a programar primero ?