Help with Stylish (using/editing)

edited December 2011 in Style Development
please no style requests in this thread (there's a nice big forum for that)
Help:
see here first
install a style in Thunderbird
a search never hurts

Creating Styles:
CSS1 CSS2 CSS3
MDC MDC dom MDC ref
Writing Efficient CSS (not everything applies, but still good guidelines to follow)

Guides:
my guide or whatrevolution's guide
Valacar's specificity guide (overriding other styles)
a quick walkthrough of the Stylish edit window here
using @namespaces

if you install the extension
It's All Text! you can edit your style in an external editor (or see Stylish-Custom below)
Problemscan't change scrollbars/inputs/some tooltips in ff3? see here (fixed in v1.0)

problems using :first-child, :last-child, :only-child, etc with tables (ff1/2)
Selector gets applied too early
Selector error????

if a style has messed up firefox, close firefox then run "firefox -stylish-disable"

Not compatible trying to use Stylish on a newer version of ff

trying to style a richlistitem?

something like this: .someclass:hover{color:red} doesn't work. change it to [class="someclass"]:hover{color:red}

problems updating styles to stylish 1.* (see
lost your password?
«13

Comments

  • edited December 2007
    I would like to christen this honorable voyage, with it's first userstyling.

    http://userstyles.org/styles/4558

    *hat-tip*
  • thanks, any recommendations for the guide?
    and a merry christmas hohoho
  • HOESHoeshoes~ \^_^/

    I'll show you my recommendations after I finish reading MRTech's book.
  • thats a bit more professional looking then mine, i've been making a list of stuff to add so i'm gonna steal some of yours :)
  • And no problem. :o

    I haven't stopped working on mine, either. /informationoverload
  • edited January 2008
    .
  • Probably another common question (although very specific):

    I want to develop a Gmail userstyle. Is there any reference site telling me how exactly Gmail lays out its pages (e.g., which classes/ids correspond to which elements)?
  • edited April 2008
    I can help a bit. You'll want to look at the other designs:

    http://userstyles.org/styles/4019
    http://userstyles.org/styles/4374
    http://userstyles.org/styles/5553
    http://userstyles.org/styles/5867

    And mine, included in http://userstyles.org/styles/2649 , used as reference/template for some of the better ones which came later.

    The CSS they use is typical, and can be found by using Web Developer toolbar's CSS tools, "View CSS", and "View Style Information". The difficult part is trimming the selectors to reasonable and manageable length. You could take advantage of "Inspect Context" extension, as described in my Stylish Guide, and that will get you to the point of having a selector which does work but is usually ridiculously long and thus fragile to being broken by slight changes in GMail.

    The CSS classes and IDs are applied to the GMail application by the JavaScript which builds the pages. Some classes and IDs are numerically incremented based on the data to be printed to that page object; such as the table row IDs on Inbox and folder lists. Others are built by JavaScript functions as the function builds a page object.

    Here is an older discussion about it. The basic intent of that discussion has not changed since then. I did not, however, find a page that would meet your specific request for detailed data. If I had, it would probably have been for Beta1 and not Beta2, which is far more confusing in this regard.

    Not all of the CSS ends up in the CSS style sheet, either. I saw plenty of it get thrown into style="" attributes of the target tag; which generally made life more difficult those days I investigated it.
  • second christening of a sort (makes your guide layout more flexible)
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url("http://www.honestlyillustrated.com/userstyles/stylishguide/stylishguide.html";),url("http://honestlyillustrated.com/userstyles/stylishguide/stylishguide.html";){
    iframe{min-width:0!important;width:40%!important}
    .chapter,.example{max-width:100%!important;overflow-x:auto!important}
    #left,#right{max-width:15px!important;min-width:10px!important}
    }
  • hi,
    could somebody develop a world of warcraft-style for schuelervz.de, please?
    thank you
  • Thanks for taking a stab at that. For future reference, you can do url-prefix("http://www.honestlyillustrated.com/userstyles/stylishguide/") , the filename has changed two or three times, so the guide is default document in that directory now.

    I see what you were trying to do, though that doesn't fix the page yet. That document is the only one of 10 or 15 pages I have in development which breaks that style horizontally when in a screen size between 800x600 and 1024x768. I still peck at it from time to time.
  • meh i had fun
  • It is the contents of <pre> in chapter, "Selectors", which scrollbars the document in 800x600.

    /me rolls his eyes.
  • "I want to develop a Gmail userstyle. Is there any reference site telling me how exactly Gmail lays out its pages"

    --> Try the web developer toolbar ( https://addons.mozilla.org/fr/firefox/addon/60 ) and use "Information > Display ID & class details" or "Outline > Outline current element" (when activated, key C to copy the current node id/class hierarchy shown just under the toolbar buttons).

    If you want to view the full HTML code you can also use "View Source > View generated source" (this includes HTML code produced by JavaScript). Really nice to catch the full structure of chrome pages too ^^
  • dobdob
    edited June 2008
    never mind,I got it.
  • Sorry Guys!

    I could't find anywhere: I want to replace more than one Stylecheet (they are for different areas in the website)
    How can i do so?

    Thanks
    Jakob
  • you cant replace stylesheets, but you can override the styles
    and maybe something like this?
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("userstyles.org"){
    /*global rules*/
    }
    @-moz-document url-prefix("http://userstyles.org/forum/";),url-prefix("http://www.userstyles.org/forum/";){
    /* /forum/ rules*/
    }
  • Isn't there a guide with all the commands that you can use in a userstyle?
  • Heh, doh.
    Didn't think about that.
    Thanks dude. ;)
  • Why when i try to acces any premade style from userstyles.org i get some Appache error message, and some weird message with some /500 ?
    And how do i 'download' the 'skins'?
  • Sorry about that, things should be back now.
  • edited February 2009
    Excuse me, wrong topic!
  • edited March 2009
    Posted By: ChoGGiplease no style requests in this thread (theres a nice bigforumfor that)

    first see the stylish helphereto learn about using stylish and a quick walkthrough of the Stylish edit windowhere

    myguideor whatrevolution'sguide

    Valacar'sspecificity guide(overriding other styles)

    can't change scrollbars/inputs/some tooltips in ff3 (seehere)

    problems using :first-child, :last-child, :only-child, etc with tables (ff1/2)
    Selector gets applied too early
    Selector error????

    Not compatibletrying to use Stylish on a newer version of ff

    if you install the extensionIt's All Text!you can then edit your style in an external editor

    add asearch boxto the stylish edit dialog (also does some other stuff, see readme)
    OffTopicpicks a random style then goes to it and/or copies link to clipboard (it downloads the new style page every 15 mins so hopefully np doesnt mind?)
    download(for windows, uses autohotkey)
    Posted By: whatrevolutionI would like to christen this honorable voyage, with it's first userstyling.

    http://userstyles.org/styles/4558

    *hat-tip*
  • please edit your comment and switch "format command as..." to HTML, so it is rendered correctly. Thanks
  • hi...im pretty sure this is off topic but i need help removing a style/layout from my facebook. not sure how to. new to adding/removing stuff from facebook and i somehow added to layouts. can you please give me instructions on how to remove one so that they do not look like they are overlaying each other. thanks!
  • @HKK
    I think you should know that after somebody has commented after you it is impossible to edit your comment :)
  • hi...im pretty sure this is off topic but i need help removing a style/layout from my facebook. not sure how to. new to adding/removing stuff from facebook and i somehow added to layouts. can you please give me instructions on how to remove one so that they do not look like they are overlaying each other. thanks!
    tools>add-ons>extensions>stylish>options>remove the one you don't want
Sign In or Register to comment.