Change page styles with Greasemonkey/Tampermonkey

This is not a guide, as you can find plenty of them on the web (well, at least for Greasemonkey)…

This is more of a quick and dirty solution to the problem “I just want this thing to be bigger/smaller/a different color” for some web page, and I’m highlighting the word “dirty” here 🙂

I’ll take feedly as an example.

I’m enjoying feedly as a replacement for Google Reader, but I can’t stand its oh-so-narrow central frame when I’m on a 1080p 24” screen.

This is how I “fixed” that.

First, you’ll want to produce the final result you’re aiming for with chrome/firefox developer tools; in Chrome:

  1. right-click on the element whose look you want to change and choose “Inspect element”
  2. move the mouse pointer up and down in the developer tools frame until you see a blueish highlight over the element you want to edit
  3. take note of the element’s type (a <div>, a <p>, a <span>, an <img>, whatever it is) , id or class
  4. use the developer tools to change its looks (just add a custom style on the right under element.style)

Google’s official tutorial on the subject is here.

Once you’ve got a decent looking page (in my case I changed some width and max-width attributes) you’re ready to create a greasemonkey/tampermonkey script that automatically applies those changes for you when you visit that page.

First, install greasemonkey or tampermonkey.

Then, create a new script (tampermonkey has a small icon with a page and a green plus on the top bottom right corner). In the header, the important tag is @match, which tells tampermonkey which pages this script must apply to (in my case, http://cloud.feedly.com/*).

Then, you can copy & paste this piece of code (that I found on the web, it’s used by many user scripts):

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

It’s a function you can call to add CSS rules to the page’s final CSS style.

Then, just call the function for all the styles you want to change using the CSS rules you found at step 3 before, in my case:

addGlobalStyle('.entryBody { max-width: 900px !important; }');
addGlobalStyle('#feedlyFrame { width: 1230px !important; }');
addGlobalStyle('#feedlyPage { width: 900px !important; }');
addGlobalStyle('.entryBody .content img { max-width: 850px !important; width: auto !important; height: auto !important; max-height: 600px !important;}');

All the !important markers are the dirty part: unless the page’s author used those herself (bad, bad author! :P) that tag ensures that your styles are being applied, no matter what. The great thing about !important (which is also the very bad thing) is that it makes styles overwrite definitions even if they’re specified within a style attribute in the element itself!
For example, in:

<div class="wide" style="width: 800px;">

the width value is always overridden by a CSS rule like this:

.wide {
  width: 900px !important;
}

which is both awesome and awful depending on the context 🙂
Feedly has some style definitions like that, and that’s why I needed the !important flags.

Then, save the script and test it!

You can do a lot more than just stuffing your filthy CSS code, of course. I found this great userscript that makes feedly look like google reader (isn’t that what we all want from an RSS reader?), and if you look at the code the author works around the style problem by adding event listeners for DOMNodeInserted, because feedly has a webpage that is built with DOM manipulation performed by javascript. Much more sophisticated 🙂

The lesson here is: search userscripts.org first, and only then create your hacks!

Advertisements

Testing HTML pages for screens with higher resolutions (locally!)

Sometimes you want to test the web page you’re developing on your small 1440×900 laptop monitor for, say, 1080p screens. There are several Chrome extensions for that (I tried Window Resizer and Resolution Test), but they don’t really seem to let you test for resolutions higher than that of your screen.

What I want is just a view of my web page with scrollbars to pan around, and nothing else.

Turns out it’s very simple to achieve that result, but either my Google-fu is getting worse, or it’s not that immediate to find out how to do it on the web.

You just need to create an HTML page that contains an iframe of the correct size that displays your page. That’s it!

Here’s an example page (I saved it as high_res_viewer.html) on pastebin:

High res viewer on pasteBin

And here’s the code. WordPress strips off the iframe code even if it’s within [source][/source] or <pre></pre> tags… meh. If anybody knows how to embed iframe code within WordPress posts please let us know in the comments.

To display it here I had to replace the first iframe tag with a bogus i_frame tag. You need to change it back to iframe of course to make it work.

<html>
<body style="margin:0px;">
<i_frame src="file://localhost/Users/myuser/web/my_page.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="1080px" width="1920px"></iframe>
</body>
</html>

So you need to set the correct path to your HTML page in src, and the resolution you want to test in height and width.

(The source for the iframe courtesy of the Online iFrame generator)

You can then use that page to develop for 1080p screens. You could create a page for each resolution you want to test (maybe with names like 1080p.html, 1920x1200.html and so on). I’m sure you could also generate the iframe dynamically, providing input fields to set the resolution you want and the link to the page under test, but I just needed a quick solution for the time being.

As always, feel free to correct or improve the post in the comments!

Eclipse crashes on startup with Gnome3 on Ubuntu 11.10

Speaking of Gnome3 choices, I really like the whole CSS-ish management of themes: I’m sure it’ll help in making the gnome-look community grow with a number of experienced web developers who won’t have to struggle too much to deliver great-looking themes.

Once again, I think that at this moment we’re not quite there yet.

Not liking the fat-ass default title bar that Gnome3 comes with, I switched to the sleeker Adwaita Dark theme (the link to the developer’s website doesn’t seem to talk about it?) and I’m fine with it.

On an apparently completely unrelated front, Eclipse started to crash on startup, with no error messages logged on workspace/.metadata/.log, no errors on ~.xsession-errors, no errors on the shell! The splash screen would show up, no progress bar would ever come up, and it’d stay forever like that (sometimes with a java process taking up to 100% of CPU, sometimes not).

Out of plain desperation, I went for a shy export GDK_NATIVE_WINDOWS=1 on the shell script that I use to launch Eclipse and… guess what? It worked! 😀

I use an external script to choose one of the installs of Eclipse I have (Helios J2EE, Helios CDT, Indigo.. so I have /usr/bin/helios, /usr/bin/cdt and /usr/bin/indigo), but for what concerns this issue it may come down to this:

#!/bin/bash
export GDK_NATIVE_WINDOWS=1
./eclipse

But then I thought… surely the theme I just installed has nothing to do with this issue, right? Well, I was sadly wrong. Using Gnome Tweak Tool (I don’t understand why this does not come with Gnome by default) I figured out that switching the GTK Theme back to default (Adwaita, but not dark) Eclipse runs fine without the GDK_NATIVE_WINDOWS variable set! And I can keep the Adwaita Dark windows decoration theme!

Another step towards XFCE I managed not to take.. Gnome3, don’t fail me, I’m trying hard to like you! 🙂

Clickable Custom Header in WordPress (.com) using Sandbox theme

Beside this minimalistic blog, I have another blog (that is actually more of a web-site) for which I decided to go with the Sandbox Theme, cause I wanted to customize my page. Yes, you have to buy the Custom CSS upgrade (10 bucks.. a year?!).

One of the most difficult (less documented) tasks has been to change the blog title with a custom image and keep it clickable, so that users can always come back to the main page easily.

The only tutorial I found that is still online is this, as well as some posts in which sunburntkamel (the author) talks about it.

The trick is to expand the a element to the size of your image, and display the title itself off-screen.

My title is center-aligned, so this is the code:

#blog-title {
margin: 0 auto;
position: relative;
width: 361px;
}

#blog-title a {
background: transparent url('http://myblog.files.wordpress.com/2011/06/my_logo.png') top center no-repeat;
display: block;
height: 250px;
text-indent: -9999px;
}

So, as you can see, the text is 9999 pixels left of the display, and the image is as large as the clickable portion of the page! yippie!