jamoche

How to use css to improve your reading experience on sites using gravatar:

The easy way:
Create a file with the extension "css"
Go to Preferences > Advanced
Go to "Style Sheet", choose the file.

The downside of this method is that it only applies the file when it's first selected or you restart Safari. If you add more trolls, you'll have to force a reload by switching the Style Sheet to "None Selected" and back to your original file. This causes it to reload all your pages twice.


The flexible way:

First, go to Preferences > Advanced, check "Show Develop menu in menu bar"
(This also lets you change the user agent to "iPad" when you've got a site that insists on using Flash when it's got a perfectly valid fallback)

Follow the instructions here, with one change - the original step 2 is:


2. Drag your style sheet into the extension folder.


Instead, create a new plain text file and save it in the folder created by step 1. If you're using TextEdit, make sure to do Format > Make Plain Text - curly quotes are a bad thing.

Choose the site this applies to using the instructions here.

Unlike the Style Sheet you can set in Advanced prefs, you can choose which site this applies to and have different extensions for different sites. When you've updated it, just reload it in Extensions Builder; it'll only reload the sites you've chosen.

This is the File770 troll-blocking script created by Aan. To plonk more trolls, add a new line, then go back to the Extension Builder and reload the extension. The opacity here is 0.6, which leaves the troll readable but easily skipped; set it to 0.99 to make them disappear entirely.

img[id^="grav-b4826f3f85672c6eb0fef5c6c681cfd5"] + span::after,
img[id^="grav-a9bea8198715ed10882ecba7c7adaf37"] + span::after,
img[id^="grav-1809acffb3d75c834d1d3b7b2074ec8c"] + span::after,
img[id^="grav-fad7ef8c84a0040340dfea31d68febbc"] + span::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.6;
pointer-events: none;
}