SilverWav's Journal

The best is yet to come…

Stylish-Custom and Friends: Cleaning-up The Web One Site at a time

leave a comment »

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.

________________________________________

1. Stylish-Custom

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…

Stylish-Custom Setup

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


Useful items are the “Site Rules” and the “Insert Text”, as well as the “Page” Options.

________________________________________

Although configuration is a pain and unnecessarily complicated, once up and running, Stylish-Custom is very useful indeed :-)

________________________________________

2. Web Developer

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

Display Ruler.

View Colour Information.

View CSS.

View Style Information.

________________________________________

Hopefully these tools will be useful to you, they certainly have been to me :-)

Advertisements

Written by SilverWav

April 25, 2011 at 2:07 pm

Posted in Feature

Tagged with , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: