Using Stylish

deluxyme 2014-10-05 20:20:31 UTC #1

Since this helped me I'll take the liberty of creating a quick 'How to' for anyone else that might need this.

Download Stylish Here: http://komodoide.com/resources/addons/jasonbarnabe--stylish/

Step 1: Follow the link above to 'Install Stylish'. Remember to Right-Click 'Save As'.
Step 2: Take the .xpi file you downloaded, and literally drag it straight onto Komodo.

Step 3: From Komodo; go to... Tools, Addons

Step 4: Click on 'User Styles' in the left pane.
Step 5: Click on 'Write New'
Step 6: Give it a Name, Give it some tags, and Paste in the CSS you see above.
Step 7: Click 'Save'

You're done!

Make the scrollbar wider?

userChrome.css being overridden?

nathanr 2014-10-06 15:47:40 UTC #2

Thanks @deluxyme! I went ahead and moved your post into a thread of its own in the tutorials section, so more people can see this

deluxyme 2014-10-06 16:07:26 UTC #3

Ok Great. Thanks I'll put up some more of these in the future if I can.

jake 2015-03-26 17:37:37 UTC #4

This is helpful in getting Stylish setup. But what about actually using it? If I want to customize some parts of the interface, how would I go about finding their classnames or element names? Is there an "Inspector" like in Firefox or something?

Defman 2015-03-26 17:44:33 UTC #5

Install these add-ons and next time you want to change something - just right click on it with shift pressed.

jake 2015-03-26 18:31:55 UTC #6

Awesome, that's perfect. Here's what I did to the tabs on the default theme to make them more understandable.

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

tab:not([selected="true"]) {
  background: HSL(0, 0%, 83%) !important;
  box-shadow: 3px 0px 8px hsla(0,0%,0%,.2);
}
tab[selected="true"] {
  background: HSL(0, 0%, 98%) !important;
}

hbox > vbox box.scrollbox-innerbox {
  background-color: hsl(0,0%,60%) !important;
  background-image: repeating-linear-gradient(35deg,transparent,transparent 2px,hsla(0,0%,0%,.1) 4px, hsla(0,0%,0%,.1) 3px) !important;
  box-shadow: inset 0px -2px 6px hsla(0,0%,0%,.4);
}

nathanr 2015-03-26 19:43:31 UTC #7

What OS was that on @jake?

Fwiw you dont need the namespace.

jake 2015-03-26 20:37:42 UTC #8

This is on osx.

nathanr 2015-03-26 20:56:40 UTC #9

Ok, looks neat Though fwiw you should probably make the rules a bit more specific because they apply to all tabs atm.

deluxyme 2015-03-27 18:16:17 UTC #10

Wow. Prima! Dimensions are perfect for better visibility.

I made a slight modification on this for dark Komodo themes.

tab:not([selected="true"]) {
background: #2b2b2b
/*background: HSL(0, 0%, 83%) !important;*/
box-shadow: 3px 0px 8px hsla(0,0%,0%,.2);
}
tab[selected="true"] {
background: #616161
/*background: HSL(0, 0%, 98%) !important;*/
}

hbox > vbox box.scrollbox-innerbox {
background-color: hsl(0,0%,60%) !important;
background-image: repeating-linear-gradient(35deg,transparent,transparent 2px,hsla(0,0%,0%,.1) 4px, hsla(0,0%,0%,.1) 3px) !important;
box-shadow: inset 0px -2px 6px hsla(0,0%,0%,.4);
}

Here's what it looks like:
I have a few documents open, and highlighted a random menu selection so you could see the dimension and color.

I've got a Mac at home otherwise; it would be the osx view.