maemo.org - Talk - Re-styled Google Reader for 800x480 screens

maemo.org - Talk (https://talk.maemo.org/index.php)

- OS2008 / Maemo 4 / Chinook - Diablo (https://talk.maemo.org/forumdisplay.php?f=29)

- - Re-styled Google Reader for 800x480 screens (https://talk.maemo.org/showthread.php?t=16799)

Re-styled Google Reader for 800x480 screens

Use Google Reader? Wish it displayed better on your N800/N810?

http://farm3.static.flickr.com/2123/...4e003b2d42.jpg
(shown at 120% zoom)

Add this to your ~/.mozilla/microb/chrome/userContent.css (or create it if you don't have one)

Code:

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

@-moz-document url-prefix("https://www.google.com/reader/"),

url-prefix("http://www.google.com/reader/") {

#gbar, #logo, #global-info, .gbh, #logo-container {display:none !important}

#search-input {width:50px!important}

#main {margin-top:0px!important;}

#entries-status{width:11em!important}

#stream-prefs-menu{display:none!important}

/* #chrome-footer-container{width:300px;position:absolute!important;top:34px;right:5px} */

#search{position:absolute;top:9px!important;left:240px!important;margin-bottom:0px!important}

#search-restrict{width:93px!important}

#search-restrict-input{width:55px!important}

.search-restrict-contents .goog-combobox-button{width:72px!important}

#search{width:280px!important}

#viewer-controls{width:185px!important}

.card-actionrow{font-size:18px!important}

#entries-up {height:34px!important;margin-top:-5px!important}

#entries-down {height:34px!important;margin-top:-5px!important}

.entry .card .ctl, .entry .card .ct, .entry .card .ctr, .entry .card .cr, .entry .card .cbr, .entry .card .cb, .entry .card .cbr, .entry .card .cl, .card .card-bottomrow .cbl, .card .card-actionrow .cal, .card .card-actionrow .car  {background-image:none!important; display:none!important}

.entry {margin:3px!important;padding:6px 6px 0 6px!important;border:2px solid #cdcdcd}

.entry .card .entry-actions {margin:0 -8px 0 -4px!important;padding:4px 8px!important;background-color:#EEE}

#current-entry.entry {border:2px solid #8181dc!important}

}

Summary of changes:

Removed logo and links bar from top
Removed view settings button
Search bar moved down and right (could use some more tuning)
Curved borders removed
Actions bar font size increased for finger tapping
Prev/Next buttons made finger-size

Enjoy!

Re: Re-styled Google Reader for 800x480 screens

If you add that to userContent.css then you've messed up any other site which has similar ids and class names, e.g. anything with a div id="logo" or id="search". You would be much better to put it into a greasemonkey script and only apply the css changes for those pages which need them. See userscripts.org for some of the existing scripts which you can use as a base for this.

Re: Re-styled Google Reader for 800x480 screens

Quote:

Originally Posted by Duncan (Post 143972)

If you add that to userContent.css then you've messed up any other site which has similar ids and class names, e.g. anything with a div id="logo" or id="search".

The URL prefix defined in line 2 restricts the CSS changes to ONLY Google Reader:

Quote:

Originally Posted by earth2marsh

@-moz-document url-prefix("https://www.google.com/reader/"),
url-prefix("http://www.google.com/reader/")

The entire block that follows is covered, so adding these tweaks will NOT mess things up on other sites. :)

I didn't know Greasemonkey works under MicroB... I'll have to look into that tomorrow!

Re: Re-styled Google Reader for 800x480 screens

Ok, I didn't know you could restrict the user css that way. Thanks

Greasemonkey works well, the most annoying thing about it though is that CSS changes applied through greasemonkey don't take effect until the page has completely finished loading and for some pages that can be quite some time after it first displays. The advantages of course are that you don't need to restrict yourself just to CSS changes, you can also manipulate the DOM, plus there's a website all setup to act as a single repository for useful scripts (if I can encourage other people to start using it: tag any tablet scripts with 'maemo').

Re: Re-styled Google Reader for 800x480 screens

Yeah, Greasemonkey is pretty wonderful, particularly to change or add features/functionality to a site. But you make a good point about speed--while my desktop re-renders changes quickly enough, the tablet would choke a bit... I'm thinking that careful rules in userContent are probably the better way to do this as the rules get loaded before the page, and to use GM just for heavy lifting.

Incidentally, do you know Stylish, Greasemonkey's cousin? It specializes in just CSS mods, and hosts its scripts on userstyles.org. What's really clever is that userstyles can be loaded into Greasemonkey and Opera directly from the site. The other tool I've been using to squeeze the web onto my N800 is a bookmarklet for Mowser.

Re: Re-styled Google Reader for 800x480 screens

Is stylish available for microb? If not, then perhaps it should be.

Re: Re-styled Google Reader for 800x480 screens

Quote:

Originally Posted by Duncan (Post 144062)

Is stylish available for microb? If not, then perhaps it should be.

I don't think it has been ported. Like GM, it would be applying the CSS rules after the page loaded, so userContent is the faster/better way on a tablet. The tradeoff is that you would have to manually get any script updates (Stylish can do that for you).

Re: Re-styled Google Reader for 800x480 screens

um, ok maybe I am not getting it, but I dont even have a chrome folder in that location. Shouldnt I?

I 'created' a chrome folder and put a userConten.css in it, but it didn't do what it was supposed to.

Am I looking in the wrong location?

/home/user/.mozilla/??

-John

Re: Re-styled Google Reader for 800x480 screens

Quote:

Originally Posted by tobiasj (Post 144078)

I 'created' a chrome folder and put a userConten.css in it, but it didn't do what it was supposed to. Am I looking in the wrong location?

/home/user/.mozilla/??

/home/user/.mozilla/microb/chrome/userContent.css
You're missing the microb dir, and the 2nd "t" in userContent.css

Re: Re-styled Google Reader for 800x480 screens

oops, that was just in my post here, I was typing on the softkeyboard of the n800. but just to be sure.

Nokia-N800-50-2:/home/user/.mozilla/microb# ls -a
. cert8.db extensions history.txt .parentlock secmod.db
.. compreg.dat extensions.cache key3.db passwords.s xpti.dat
.autoreg cookies.txt extensions.ini lock prefs.js

is what I have on the N800 (os2008)

There is no chrome folder and thereby no userContent.css

I can create a chrome folder and the userContent.css however it doesn't seem to work when I do.

if I am still looking in the wrong location then I really just don't get it ;)

Thanks for your help, and I am sorry for the mispost.

-John