SilverWav's Journal

The best is yet to come…

Posts Tagged ‘stylish

A simple alternative to Hacktheweb, aardvark, platypus or Tampermonkey.

leave a comment »

Because I hate ugly distracting cruft on websites. :-)

History:

I loved Platypus but moved on to Aardvark when it died, then created Hacktheweb to enable aardvark to save scripts to Stylish (recreating most of the platypus functionality with out the risks).

But while creating extensions can be a lot of fun, maintaining them… not so much.

Each time Stylish changes you need to update Hacktheweb to match. Tried that for a few years and… meh. So instead I just used Hacktheweb with the old 1.4.1.1 Stylish.

Also Hacktheweb was created on Firefox and I have moved to Chrome… but the Stylish scripts were usable on both, so I was still using Hacktheweb when I needed a quick and dirty script.

On Chrome the closest extension I could see was Stylebot, but with no easy saving to Stylish and a quirky interface, it was not something I could live with.

So looking around for something simple and safe, I looked at Tampermonkey which seems great but requires a lot of trust… and is probably overkill for my needs.

The Binding Flash of Inspiration:

But I had a revelation… Adblock Plus! Never really considered it after ruling it out a while ago (no widthify, no stylish, and I had hid the ABP button so out of sight out of mind).

But looking at it in this new light (looking for Simple, Quick and Good Enough, rather than Perfect).

I turned the ABP button back on then hid the distracting ‘Shown number of ads blocked’ badge.

In testing ABP, I found it to be a good fit for my requirements; the block element function does 90% of what I wanted. Just getting rid of sidebars was my main aim, the filters are not synced but easily cut and pasted.

As this looked to be a wining solution, it was worth thinking of a way around the ‘Site Not Centred ‘issue, resulting from blocking sidebars…

My solution:

  1. Create Stylish scripts to change margin-left to 10%, 20% etc…
  2. Upload the Scripts to https://userstyles.org/users/98352 so that I can install on all of my browsers.

So on each browser on the ABP Options page, I just paste the filter text into the ‘Your Own Filters’ tab.

Then I go to userstyles.org and install the scripts I need e.g. ‘0sw_MLeft10percentWhite’ and I am done.

The Benefits for me are:

No extra extensions, I am using ABP and Stylish already, so no extra trust needed. Also both extensions are backed by big name developers.

ABP block element is quick and easy to use, as is transferring filters.

The Result:

Fantastic clean, distraction free, easy reading of my favourite web sites… without having to build and maintain my own extension.

Looks like a plan :-)

Written by SilverWav

July 21, 2015 at 3:09 pm

The Best Chrome Extensions For An Ex Firefox User (9 month later)

leave a comment »

Extensions:

Adblock Plus  1.5.4

Blocks all annoying ads on the web: video ads on YouTube, Facebook ads, banners and much more. Visit website

Close tab on context menu 0.2

A simple extension that add a ‘close tab’ context menu entry. Visit website

Create Link  0.2.9

Copy current page URL to clipboard in various formats. Visit website

Double Click Closes Tab 1.0.9

Double left/right or triple left clicks on WEBPAGE (not tab) to close tab. Reopen tab by shiftKey + DC/TC. Visit website

Force Background Tab 2.0.4

Force New Tab Running In Background Visit website

Netflix Rate 1.3.18

Add IMDB and Rotten Tomato ratings to the Netflix webpage. Visit website

PageZipper 1.3
A free bookmarklet which automatically merges all the ‘Next’ pages into one page Visit website

Pocket (formerly Read It Later) 1.5.6
Pocket Extension for Google Chrome – The best way to save articles, videos and more Visit website

Readability Redux 1.3.4

Readability for Chrome. Now fully customizable! Visit website

Scroll To Top Button 6.2.4

Adds a scroll to top or bottom button. Visit website

Stylebot 2.1

Change the appearance of websites instantly. Visit website

I use this to generate CSS code then create a style at http://userstyles.org/users/98352 for use in Stylish 1.2

I find Stylebots use of a form and click’n’pick selection easy to use, but prefer saving to Stylish.

Main thing you have to change in the CSS is adding “!important” to things.

Stylish 1.0

Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. Visit website

The best :-) see http://userstyles.org/users/98352.

Having the styles on the web makes it easy to add then on any Chrome browser, at home or work.

URL Pinner 0.6.15
Auto pin your websites via URL and keep them sorted! Visit website

Set “RegExmode” to “.*” then all tabs are pinned.

______________________________

Notes:

RSS: I now use Feedly via the web, no need for an extension.

Font Size: Chrome’s Built In Page Zoom and Minimum Font Size mean that there is no need for an extension.

Not perfect but with the occasional Stylish hack, workable.

Notes: The Best Chrome Extensions For An Ex Firefox User.

leave a comment »

Note that this post has been updated here.

Extensions:

Adblock Plus 1.3.1

Blocks all annoying ads on the web: video ads on YouTube, Facebook ads, banners and much more. Visit website

Chrome Downloads Button 0.0.1

Provides quick icon access to your Chrome downloads. Visit website

Chrome History Button 0.0.1

Provides quick icon access to your Chrome history. Visit website

Chrome Options Button 0.0.1

Provides quick icon access to your Chrome options or settings. Visit website

Close tab on context menu 0.2

A simple extension that add a ‘close tab’ context menu entry. Visit website

Create Link 0.1.1

Copy current page URL to clipboard in various formats. Visit website

Double Click Closes Tab 1.0.6

Close tab by double. Optional: an icon to either duplicate or close current tab; disable closing the last tab of the last window. Visit website

Evernote Web Clipper 5.9.1

Use the Evernote extension to save things you see on the web into your Evernote account. It even lets you search through your notes. Visit website

Font Size Decrease 1.0.0.8

With one click on the button the font size on the current page will decrease. Visit website

Font Size Increase 1.0.0.8

With one click on the button the font size on the current page will increase. Visit website

Forecastfox 2.0.10

Get international weather forecasts with this highly customizable extension Visit website

Go Extensions 0.1

Quick access to the Extensions Control Panel directly from the toolbar Visit website

Pocket (formerly Read It Later) 1.1.3

Pocket Extension for Google Chrome – The best way to save articles, videos and more Visit website

Readability Redux 1.3.4

Readability for Chrome. Now fully customizable! Visit website

RSS Live Links 1.9.0.0

Your RSS/Atom feeds as bookmarks and a whole lot more Visit website

This is fantastic as it lets you:

  • Adds different RSS feeds in a drop-down list and click to see the RSS Articles.
  • Checks the articles every x mins (I have mine set to 10 mins).
  • Killer feature: Hover over an item for a Tool-tip showing the first few lines of the article.

RSS Subscription Extension (by Google) 2.2.0
Adds one-click subscription to your toolbar. Visit website

Scroll To Top Button 6.1.9

Adds a scroll to top or bottom button. Visit website

Sidewise Tree Style Tabs 2012.11.23.0

A dockable sidebar for Chrome featuring vertical Tree Style Tabs, Tab Hibernation, and much more. Visit website

Stylebot 1.7.3.1

Adapt the web’s appearance Visit website

Stylish 1.0

Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. Visit website

______________________________

Updated 24.8.2013: Simplified things and just go to the built in settings page instead of using extensions.

Notes: Chrome’s Built In Page Zoom and Minimum Font Size – No Need For An Extension? Probably.

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

Written by SilverWav

April 25, 2011 at 2:07 pm

Posted in Feature

Tagged with , , ,

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

__________________

Written by SilverWav

April 24, 2011 at 1:27 pm