SilverWav's Journal

The best is yet to come…

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

leave a comment »

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

__________________

Advertisements

Written by SilverWav

April 24, 2011 at 1:27 pm

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: