MozillaZine

Stylish 0.2.1 (Now with repository!)

Talk about add-ons and extension development.
JMody
 
Posts: 16
Joined: December 31st, 2005, 2:30 pm
Location: Saugus, Massachusetts

Post Posted January 4th, 2006, 8:57 am

would someone explain what stylish 0.2 does for me in english. im very illiterate when it comes to this kind of stuff. ive tried to read through the topic but i feel like im reading latin.

********
 
Posts: 947
Joined: August 24th, 2005, 12:23 pm

Post Posted January 4th, 2006, 9:15 am

i've already imported all my styles from userChrome.css!

i love how everything is all organized now :D, but i wish i could re-arrange the list...

JMody
 
Posts: 16
Joined: December 31st, 2005, 2:30 pm
Location: Saugus, Massachusetts

Post Posted January 4th, 2006, 12:35 pm

Anyone!! Im still sitting here in the dark!

Thumper

User avatar
 
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland

Post Posted January 4th, 2006, 1:06 pm

Thumper wrote:Oooh. Awesome. I've spent all night being annoyed by the fact that userContent hacks won't even reload changed images in the stylesheet rules without restarting the browser.


And now it's actually working correctly. Rock. I've got dozens of these.

I'm planning on cobbling together a userscript.org type repository for these things, they're really handy. Got any plans for allowing people to install them a la greasemonkey?

Jmody: it allows you to add CSS rules to websites. If that doesn't interest you, you're unlikely to be interested in the extension. By the way, four hours isn't exactly a long turnaround.

- Chris

Zoolcar9

User avatar
 
Posts: 2225
Joined: November 9th, 2004, 6:45 pm
Location: Jakarta, Indonesia (UTC+7)

Post Posted January 4th, 2006, 1:18 pm

JMody wrote:would someone explain what stylish 0.2 does for me in english. im very illiterate when it comes to this kind of stuff. ive tried to read through the topic but i feel like im reading latin.


Ripped from TEM
Stylish allows you to easily manage stylesheets that affect the look of websites and of the user interface.


My Firefox information | Add-ons | GitHub

"With great power, comes great desire to show it off."

old np
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted January 4th, 2006, 1:23 pm

Thumper wrote:I'm planning on cobbling together a userscript.org type repository for these things, they're really handy. Got any plans for allowing people to install them a la greasemonkey?

Well right now, if you open a CSS file or make a selection, you get status bar and context menu options to insert them into Stylish. It doesn't give you the description, though.

A repository of styles (and integration with) is the big thing planned for the next version. Are you really planning a userscript.org type thing, complete with sign ins and ratings and categories and all that? If so, that would save me the trouble of doing it myself.

Thumper

User avatar
 
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland

Post Posted January 4th, 2006, 1:45 pm

Now I actually think about it I probably don't have the patience. That's what I get for saying things. It would still be ace, looking forward to it (this is basically the final part of realisation of user empowerment over their style sheets).

- Chris

Zoolcar9

User avatar
 
Posts: 2225
Joined: November 9th, 2004, 6:45 pm
Location: Jakarta, Indonesia (UTC+7)

Post Posted January 4th, 2006, 1:59 pm


And it would be great if you add a menu item on context menu that will show if you right click on a .user.css link to install to Stylish like Greasemonkey's .user.js and RIP's .rip.xml

My Firefox information | Add-ons | GitHub

"With great power, comes great desire to show it off."

********
 
Posts: 947
Joined: August 24th, 2005, 12:23 pm

Post Posted January 4th, 2006, 8:26 pm

np wrote:A repository of styles (and integration with) is the big thing planned for the next version...


well, the domain userstyles.org has not been registered yet, i think, so you could use that :)

btw, stylish is working great! :)

cept for one problem:

i was trying to customize the Stylish statusbar icon (no offense to your original, it's great), but when i used the following code, clicking on the icon no longer brought up the menu!

do you know of another way i could customize the icon?

Code: Select all
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#stylish-panel {
  background-image: url("file:///C:/AllDoc/Studio17/apps/Sandbox/icons/editconfigfiles-small.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  margin-right: 4px !important;
}
#stylish-panel > .statusbarpanel-icon {
  -moz-opacity: 0 !important;
  background-color: transparent !important;
}

Motohiko
 
Posts: 65
Joined: November 22nd, 2003, 8:05 pm
Location: Japan

Post Posted January 4th, 2006, 9:03 pm

desertfox wrote:i was trying to customize the Stylish statusbar icon (no offense to your original, it's great), but when i used the following code, clicking on the icon no longer brought up the menu!

do you know of another way i could customize the icon?
From chrome content you cannot use file:// scheme. This is a security-related limitation.

Instead of this you can use http, https, data scheme and/or moz-icon pseudo scheme.

If you want to use HTTP scheme but not have remote server, you can use local server.


Example of data scheme (This adds an icon Image to external links):
Code: Select all
a[target="_blank"]::after {
 content: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEV
mmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGk
sDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyy
Dpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC");
}
# remove blanks and linefeeds in the data.


Example of moz-icon pseudo scheme (This adds a PDF icon of your file manager to PDF file links):
Code: Select all
a[href$=".pdf"]:not([href^="/search?"])::after {
  content :url("moz-icon://.PDF?size=16");
  margin :auto 0.25em;
}

old np
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted January 4th, 2006, 10:12 pm

desertfox wrote:i was trying to customize the Stylish statusbar icon (no offense to your original, it's great), but when i used the following code, clicking on the icon no longer brought up the menu!

Looks like a Gecko bug. Switching from opacity: 0 to visibility:hidden seems to make it work.

[edit]Bug 322440 filed[/edit]

logan

User avatar
 
Posts: 3453
Joined: May 22nd, 2003, 3:51 pm
Location: NGC 2403

Post Posted January 4th, 2006, 11:42 pm

np wrote:* UI to insert XUL/HTML default namespace code. This will make all selectors only apply to XUL or HTML, preventing conflicts.

This doesn't seem to work quite right...
Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);
* { font-weight: bold !important }

With the above enabled, the urlbar and various chrome inputs use a bold font.

I like the statusbar icon's menu for quickly disabling styles that use @-moz-document, but wouldn't it make sense to list styles that don't use @-moz-document? After all, it does apply to the current page. I use 3 stylesheets and frequently make changes to them, so this would be very handy. If not by default, how about an option?

Being able to reload user{Chrome,Content}.css is one thing I've been wanting for a long time. It's a real pain to make changes, restart, see that something's not worked right, repeat. I end up doing this alot with my ad-blocking css... I recently discovered the test styles bookmarklet, which is great, but I'd rather be using something like Stylish.

Is there any additional overhead beyond what the user{Chrome,Content}.css equivalents use?

Motohiko
 
Posts: 65
Joined: November 22nd, 2003, 8:05 pm
Location: Japan

Post Posted January 5th, 2006, 12:01 am

logan wrote:
np wrote:* UI to insert XUL/HTML default namespace code. This will make all selectors only apply to XUL or HTML, preventing conflicts.

This doesn't seem to work quite right...
Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);
* { font-weight: bold !important }

With the above enabled, the urlbar and various chrome inputs use a bold font.
That's correct result.

The locationbar uses <xul:textbox> widget, and <xul:textbox> widget is binded to <html:input> widget.


Please specify root element tagName.


IMHO...

logan

User avatar
 
Posts: 3453
Joined: May 22nd, 2003, 3:51 pm
Location: NGC 2403

Post Posted January 5th, 2006, 8:36 am

Motohiko wrote:Please specify root element tagName.

So you're saying to add <i>html</i> to the start of each rule? Then the statement about limiting the scope to XUL or HTML, as I'm interpreting it (or perhaps just hoping), is incorrect.
Last edited by logan on January 5th, 2006, 9:16 am, edited 2 times in total.

old np
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted January 5th, 2006, 8:38 am

Motohiko wrote:The locationbar uses <xul:textbox> widget, and <xul:textbox> widget is binded to <html:input> widget.

Indeed. Remember that the namespace gives you XUL vs HTML, not chrome vs. content. They'll be the same thing in 95% of cases, but here's one exception.
Motohiko wrote:Please specify root element tagName.

Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);
html * { font-weight: bold !important }

logan wrote:I like the statusbar icon's menu for quickly disabling styles that use @-moz-document, but wouldn't it make sense to list styles that don't use @-moz-document? After all, it does apply to the current page. I use 3 stylesheets and frequently make changes to them, so this would be very handy. If not by default, how about an option?

There's no way to know if something actually applies to the current page. It might be OK if I could somehow figure out what applies to chrome and what applies to content (I can't), then I could show only content ones. But as it is I would have to show all "chrome" styles along with the "content" styles, including the 5 default "chrome" ones.

A workaround would be to add
Code: Select all
@-moz-document url-prefix("http://") {}

to each style you want to always show up. This won't do anything other than make Stylish think the style applies to all (http) pages. (Actually this kind of trick might work for the first problem too.)
logan wrote:Is there any additional overhead beyond what the user{Chrome,Content}.css equivalents use?

There's a bit of time spent at app startup to register all the styles, but between loading pages there should be no difference between user*.css and Stylish.

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 3 guests