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

Dropping Greasemonkey for a more “Stylish” Add-on.

Stylish is better in the following areas:

1. Speed, Stylish appears to be instantaneous, whereas Greasemonkey slowed page loads appreciably.
2. CSS not JS so no security issues.
3. A huge number of great ready made styles at http://userstyles.org/ presented in a nice clean manor.
4. Fantastic extra tools to help you such as the DOM Inspector and the Stylish-Custom add-ons.
5. Great developer support for both the main add-on and the extra tools.

__________________

TBH now that I look at it I cant see how it took me so long to move :-)

That said the main issue with Stylish was a lack of an easy “How To” so …

Here you go ;-)

__________________

A Stylish How To – Alter The BBC News Site To Drop The Sidebar (5mins).

Sidebar

No Sidebar

The basics:

Install Stylish.
Install the DOM Inspector.
Reboot.
Put the DOMi button on a Toolbar for easy access.

From the stylish statusbar icon:

Left Click > Write new style > For bbc.co.uk…

Add the code below:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("bbc.co.uk") {

.layout-block-b { display: none !important; }
.layout-block-a { width: 100% !important; }
.story-body { width: 816px !important; }
.story-header{ width: 120% !important; }

}

Save, close & you are done!

__________________

The Stylish Trick (Use the DOM Inspector)

To find which elements to use e.g. “.layout-block-b” I did the following:

Clicked the DOMi button on the Toolbar. (Firefox > Web Developer > DOM inspector).

Clicked on the Top Left Icon. (Magnifying glass with white mouse cursor) “Find a node to inspect by clicking on it”.

On the BBC web page I clicked on the sidebar that I wanted to remove… (A red box surrounded it).

The DOM inspector now displayed a tree view of the web page and the item “hyperpuff”.

I moved up the tree a little and saw that “.layout-block-b” is the element that I wanted to hide and “.layout-block-a” the one I wanted to maximise (A red box surrounded it).

How cool is that!

Once you have this trick down, you have the keys to the city!

No ugly website is safe :-)

__________________

Note: The element selector “name” can be a LOT more involved, especially if its in a table, but the solution is the same.

Right click the element and choose “Copy Selector”.

__________________

More examples of my newbie fumblings here: http://userstyles.org/users/98352

__________________

The latest firefox without the update hassle.
One daily a month from ubuntu-mozilla-daily.

• One update a month.
• Firefox and xulrunner only.
• Tested in a virtual machine.

Firefox has its own PPA so nothing else gets updated.
You don’t get swamped with updates.
You do get the latest Firefox each month.

______________________________

Firefox-4.0 – One Daily A Month #1 – Lucid

sudo add-apt-repository ppa:silverwave/one-daily-a-month-1
sudo apt-get update
sudo apt-get install firefox-4.0

Firefox-4.0 – One Daily A Month #3 – Karmic

sudo add-apt-repository ppa:silverwave/one-daily-a-month-3
sudo apt-get update
sudo apt-get install firefox-4.0

All tested and working

Based on:

4.0~b2~hg20100712r47317+nobinonly-0ubuntu1~umd2
2.0~b2~hg20100712r47317+nobinonly-0ubuntu1~umd1

Enjoy!

Details here:

http://ubuntuforums.org/showthread.php?t=1352580

One downside of using ubuntu-mozilla-daily is the number of updates offered.
Another is that packages other than Firefox are present in the PPA.

This is my solution.
________________________________________

One daily a month from ubuntu-mozilla-daily.
The latest firefox without the update hassle.

• One ppa for each Firefox.
• Updated at the start of each month.
• Tested in a virtual machine.

Firefox-3.6.5 or Firefox-3.7a5(aka Firefox-4) via One Daily A Month.

Firefox-3.6 – one-daily-a-month-0 – Lucid
Firefox-3.7 – one-daily-a-month-1 – Lucid
Firefox-3.6 – one-daily-a-month-2 – Karmic
Firefox-3.7 – one-daily-a-month-3 – Karmic
________________________________________

Add a PPA:

Firefox-3.6 – One Daily A Month #0 – Lucid

sudo add-apt-repository ppa:silverwave/one-daily-a-month-0
sudo apt-get update
sudo apt-get install firefox

Firefox-3.7 – One Daily A Month #1 – Lucid

sudo add-apt-repository ppa:silverwave/one-daily-a-month-1
sudo apt-get update
sudo apt-get install firefox-3.7

Firefox-3.6 – One Daily A Month #2 – Karmic

sudo add-apt-repository ppa:silverwave/one-daily-a-month-2
sudo apt-get update
sudo apt-get install firefox

Firefox-3.7 – One Daily A Month #3 – Karmic

sudo add-apt-repository ppa:silverwave/one-daily-a-month-3
sudo apt-get update
sudo apt-get install firefox-3.7

Firefox 3.6 will be found under the name “Namoroka” in Applications > Internet.
Firefox 3.7 will be found under the name “Minefield 3.7 Web Browser”.

Disclaimer: Use at your own risk, no guarantees.

Interesting update to the Firefox Speed Test feature I did a while back.

In Firefox 3.6.5 if you set html5.enable to true via about:config then you get some inpressive gains on the test case load times.

Down to 13 seconds from 37 seconds!

Wow way to go guys :-)

Note: Filter time obviously haven’t moved as this is a parser replacement nothing to do with js,

Firefox 4: the HTML5 parser – inline SVG, speed and more

______________________________

Test Results – Linux

Reload

Filter

Filter word: Platypus

______________________________

Henri Sivonen wrote on May 11th, 2010 at 10:50 am:

@jpvincent, It’s highly unlikely that this would get backported to 3.6.x.

@jng, Flipping the pref in Firefox 3.6.x exposes you to known bugs inlcuding crashers. The snapshot of the parser in 3.6 is from June 2009 before the parser had had any testing by our community of users of nightly builds. I recommend getting a trunk nightly if you want to run the HTML5 parser and not enabling it on 3.6.x.