Using Stylish

How To Tutorials
#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!

1 Like
Make the scrollbar wider?
userChrome.css being overridden?
#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 :slight_smile:

#3

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

#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?

#5
  1. http://komodoide.com/resources/addons/todd%20whiteman--dominspector/
  2. http://komodoide.com/resources/addons/defman21--elementinspector/

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

#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);
}
#7

What OS was that on @jake?

Fwiw you dont need the namespace.

#8

This is on osx.

#9

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

#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.