leifw

My wife has a netbook that I occasionally swipe to browse the web, which usually consists of at least peeking at Gmail and Google Reader. On the netbook's tiny screen, both feel like they could afford to have some of their cruft removed. I went searching and found scripts that I could hack up into what I wanted.

Gmail

This just removes the right column when you view a conversation. That means that you lose ads and Gmail's smart parsing of your email to offer to help you track packages and schedule events.

 // borrowed from http://userscripts.org/scripts/show/43495

 var css = "table[class='Bs nH iY'] tr td[class='Bu']:last-child {display:none !important;}";



 if (typeof GM_addStyle != "undefined") {

  GM_addStyle(css);

 } else if (typeof addStyle != "undefined") {

  addStyle(css);

 } else {

  var heads = document.getElementsByTagName("head");

  if (heads.length > 0) {

   var node = document.createElement("style");

   node.type = "text/css";

   node.appendChild(document.createTextNode(css));

   heads[0].appendChild(node); 

  }

 }

Google Reader

This is a bigger change. It smashes together many elements at the top of the page above the item list, violating a host of aesthetic principals, making graphic designers everywhere weep. It also reduces the whitespace inside the display of individual items. Finally it removes the bar at the bottom of the item list. I believe that my changes from the original were primarily around restoring a few things the original hid and fiddling with the styling.

// From: Google Reader Compact & Clean

(function() {

var css = "/* Hide all the elements that take up space */ #logo-container, #gbar, #global-info, .gbh, #lhn-add-subscription-section, #viewer-footer, #chrome-view-links, #viewer-refresh, #viewer-details-toggle, #chrome-header, #chrome-lhn-toggle, .scroll-tree .icon, .entry .entry-title .entry-title-go-to, #entries.list .collapsed .entry-main .entry-original { display: none !important; } /* move the main window up to the top to fill in leftover space */ #main, #settings-frame, #settings { top:0 !important; margin: 0 !important; } /* tighten up the vertical padding on header bars */ #viewer-top-controls, #chrome-header { padding: 2px 0 2px 5px !important; } /* right-justify the \"Loading...\" and other messages so they don't obscure other elements */ #loading-area, #message-area-outer { width: auto !important; left: auto !important; right: 0 !important; top: 26px !important; } /* right-align search bar and hide buttons until hovering */ #search { left: auto !important; right: 10px !important; top: 1px !important; width: 210px !important; height:23px !important; overflow: hidden !important; } #search:hover { width: 403px !important; height:323px !important; overflow: visible !important; } #search-restrict-button .goog-menu { left: auto !important; right: 0 !important; } #chrome.search-stream #viewer-search-parent { text-align: left !important; } /* shrink the navigation sidebar */ #nav, #nav * { max-width: 200px !important; } #chrome { margin-left: 200px !important; } .lhn-hidden #chrome { margin-left: 1px !important; } #entries .entry-body { max-width: none !important; } /* remove icons from navbar and tighten the left margin for folder/subscription entries */ .scroll-tree .expanded .toggle { background-position: 3px -58px !important; } .scroll-tree .collapsed .toggle { background-position: -20px -58px !important; } #lhn-subscriptions .scroll-tree li a { padding-left: 0 !important; } #lhn-subscriptions #sub-tree ul ul li a { padding-left: 10px !important; } #lhn-subscriptions .scroll-tree .toggle { width: 16px !important; } /* shrink titles, but add underlining for visual identification */ .entry /*.entry-title { font-size:100% !important; background-color: #FFFFFF !important;}*/ /*REMOVING UNDERLINE*/ /* tighten up spacing around entries */ /* expanded view */ #entries .entry { padding: 5px !important; margin: 0 !important; background-color: #FFFFFF !important; } #entries .card-content { padding: 2px !important; } #entries .card-common { padding: 0 !important; margin: 0 !important; border-width: 2px !important; } #entries .collapsed { padding: 0px !important; border: 0 !important; } /* list view */ #entries .collapsed .entry-date { margin: 0 2px 0 0 !important; } /*CHANGING BACKGROUND COLOR*/ #entries #current-entry .collapsed { background-color: #FCFCFC !important; } #entries.list .collapsed .entry-icons, #entries.list .collapsed .entry-main .entry-original { top: 1px !important; } #entries.list .collapsed .entry-secondary { top: 0px !important; margin-right: 7em !important; background-color: #FFFFFF !important;} #entries.list .collapsed { text-decoration: none !important; background-color: #FFFFFF !important;} #entries.list .collapsed .entry-source-title { top: 0px !important; background-color: #FFFFFF !important;} #entries.list .collapsed .entry-title { text-decoration: none !important; background-color: #FFFFFF !important;} /* make entries borders square for consistency with new design */ .entry .card, .card .card-bottom { -moz-border-radius: 0 !important; } /* Hide Like feature */ /*#entries .entry-author { display: none !important; }*/";

if (typeof GM_addStyle != "undefined") {

 GM_addStyle(css);

} else if (typeof addStyle != "undefined") {

 addStyle(css);

} else {

 var heads = document.getElementsByTagName("head");

 if (heads.length > 0) {

  var node = document.createElement("style");

  node.type = "text/css";

  node.appendChild(document.createTextNode(css));

  heads[0].appendChild(node); 

 }

}

})();

I like both of these enough that I ended up using them on systems with decent sized monitors, too. They're particularly handy for making my favorite Google apps fit getter when I'm trying to put two windows side-by-side on a widescreen monitor.