Stylish-Custom and Friends: Cleaning-up The Web One Site at a time
In the the previous article on using Stylish I kept it simple by limiting the tools to just Stylish and DOMi.
But if you are using Stylish a lot, then you may find the following advanced tools of use.
This is a great add-on… once you have set it up, but be warned that it is initially confusing, as it has far too many options!
So to save you some pain I recommend that you set it up as per the screen shots “Normal” and “Toggled” below.
So lets jump right in and have a look at Stylish-Custom…
Install the add-on as normal, reboot then:
A Left Click on the Stylish Icon brings up Stylish-Custom.
Or instead, Right Click on an existing Style.
Configure the various toolbars and buttons for Stylish-Custom as detailed in the screen-shots. Its similar to Firefox – i.e. Choose “Customise”.
Normal (Toolbars Insert, Page and Text are off).
Note: if Scratch-pad is missing you need to click the little grippy just under “Url”. It should change to a little hand with a finger (like a web link).
Toggled (All Toolbars on except Scratch pad).
Although configuration is a pain and unnecessarily complicated, once up and running, Stylish-Custom is very useful indeed :-)
A much simpler set-up than Stylish-Custom! Just install the add-on and put its Toolbar button somewhere handy.
The button acts as a toggle for the new Web Developer toolbar, so just hide it until its needed.
Now there are loads of useful tools on the bar so knock yourself out, but for our purposes… here are some of the most useful features.
Information > Display Element Information (Ctrl + Shift + F).
Click on an element in a web page and a note displays all of the elements details (A red box highlights the element selected).
View Colour Information.
View Style Information.
Hopefully these tools will be useful to you, they certainly have been to me :-)