How To Skin Google Reader With GreaseMonkey
I have been using google reader for a good few years now, to aggrigate my feeds, however when i came across a website called helvetireader it got me thinkning, instead of having googles name and branding splashed all over a page I use frequently, why not make it my own, literally. In this short tutorial I will outline all you need to create your own version of google reader.
What You Need
In order for this to work you will need to be using google reader to aggrigate your feeds. Secondly you will need to be using Firefox, and thirdly you will need to have the greasemonkey firefox add-on installed.
How To Pull It Off
In order for this to work you will need to create a couple of grease monkey, for the sake of this tutorial I will use my ODIN READER, but you can skin it as you wish.
Lets start by downloading the files. You should have a css and a js file. The stylesheet should look like this;
<p style="text-align: center;">/* @group ODINreader */</p>
<p style="text-align: center;">* {font-family: "Helvetica Neue", Helvetica, sans-serif !important;}</p>
<p style="text-align: center;">body {background-color: #fff !important;}</p>
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/* Anything to to hide? */
.page-view #chrome-view-links,
#gbar,#footer,#logo,#chrome-title,#chrome-lhn-toggle-icon,.selector-icon,.goog-menu-button-dropdown,a#logo-container,#search-restrict,#chrome-lhn-menu,#entries-status,#entries-up .text,#entries-down .text,#viewer-details-toggle,#search-submit {display: none !important;}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#chrome-header {
height: 0 !important;
position: static !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/* Get rid of all unwanted borders and backgrounds */
#chrome-header,.gbh,.goog-button-base-top-shadow,.goog-button-base-outer-box,.goog-button-base-inner-box,#main,#viewer-header,#chrome,#chrome-view-links,#chrome-viewer,#chrome-viewer-container,#chrome-lhn-toggle,#viewer-container,#viewer-footer,#viewer-top-controls,.entry-title-go-to,.scroll-tree li,#entries .entry,.collapsed,.card-bottom {
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;div#main {
background-color:#fff !important;
background-image:url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHCAgICAgICAgICD/2wBDAQcHBw0MDRgQEBgaFREVGiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/wAARCAFKABsDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECCP/EABUQAQEAAAAAAAAAAAAAAAAAAAAR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOqQAAAAAAAQAAAEoFAoFBAAAAQAAAEoFAoFBAAAAQAAACgUCgUEAAABAAAAQAAAEoFAoFBAAAAQAAAEoFAoFBAAAAQAAAEAAABKBQKBQQAAAEAAABKBQKBQAAAAZAAABAAAAKBQKBQQAAAGQAAAKBQKBQQAAAEAAABAAAASgUCgUEAAABAAAAAAAAAAAAAAAAAAAAAAAAf/2Q==) !important;
background-position: left bottom !important;
background-repeat: repeat-x !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#entries.list #current-entry.expanded .entry-actions {
border: 0 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.goog-button-base-content{
padding:0 !important;
line-height: 1 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#search {
left:270px !important;
width: 100%;
}
&amp;lt;p style="text-align: center;"&amp;gt;#search-restrict,#search-submit { margin: 4px 0 0 10px !important; }&amp;lt;/p&amp;gt;
&amp;lt;p style="text-align: center;"&amp;gt;#search-restrict{width:100px !important}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.goog-menu,
#stream-prefs-menu-contents,
#quick-add-bubble-holder {
background: #fff !important;
border: 1px solid #ccc !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
padding: 4px !important;
margin: 5px 0 0 0 !important;
z-index: 1000 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#search:hover #search-submit,
#search:hover #search-restrict {
display: inline !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#search-input {
margin: 0 10px 0 0;
border: 1px solid #ddd !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#search:hover #search-input,
#search-input:focus {
border: 1px solid #999 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.lhn-hidden #search{
left:10px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#global-info {
color: #ccc;
margin-right: 7px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#global-info a{
color: #666 !important;
font-weight: normal !important;
font-size: 11px;
}
#global-info b{
color: #666 !important;
font-size: 11px;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/* Red Highlights */
.section-header,
.scroll-tree li .updated,
.scroll-tree li a:hover,
#current-entry a.entry-title-link,
.tree-link-selected .name-text,
#lhn-selectors .selected .text,
#lhn-selectors .selected:hover,
.unread-count {
color: #006699 !important;
font-weight: bold !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;a.entry-source-title { font-weight: bold;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;a, a.link, .link {
color: #777 !important;
text-decoration: none !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#viewer-top-controls {
color: #bbb !important;
font-size: 12px !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;#stream-prefs-menu{ z-index: 0;}&amp;lt;/p&amp;gt;
&amp;lt;p style="text-align: center;"&amp;gt;#stream-prefs-menu-contents li { margin: 0 0 3px 0 !important; }&amp;lt;/p&amp;gt;
&amp;lt;p style="text-align: center;"&amp;gt;#stream-prefs-menu .goog-button-body{ margin: 3px 0 0 10px !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/*Hover colours*/
.goog-menuitem-highlight,.goog-menuitem-hover,
#stream-prefs-menu-contents li:hover,
#stream-prefs-menu-contents li li:hover,
.scroll-tree li .updated,
.scroll-tree li a:hover,
.friends-tree-invite-info,
.lhn-menu #lhn-add-subscription-section .goog-button-body:hover,
#lhn-selectors .selector:hover{background-color:#f1f1f1 !important;}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.scroll-tree li .tree-link-selected,.scroll-tree li .tree-link-selected:hover, #lhn-selectors .selected,
#lhn-selectors .selected:hover{background-color: transparent !important; }
&amp;lt;p style="text-align: center;"&amp;gt;/*Sidebar*/&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#nav:before {
content:"ODIN READER";
display: block;
margin: -33px 0 25px 17px;
color: #006699;
font-size: 20px;
font-weight: bold;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.lhn-hidden #nav:before {
content:"" !important;
margin: 0 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#friends-tree .name,
#sub-tree .name {
margin: 0 0 0 5px !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;#lhn-friends .lhn-section-primary, .lhn-section-footer {padding-left:18px !important}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#friends-tree-item-0-name,
#sub-tree-header {
font-weight: bold !important;
color: #333 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#sub-tree-header {
padding: 0 0 0 12px;
}
&amp;lt;p style="text-align: center;"&amp;gt;#lhn-selectors.lhn-section-minimized .selector{padding-left:22px !important}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.lhn-button,.scroll-tree .toggle,.subscribe-button,#lhn-selectors .selector-icon,#viewer-footer .arrow,.bundle-container .bundle-show-details-toggle {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAABOCAMAAABheHQlAAAAA3NCSVQICAjb4U/gAAAA3lBMVEX///////+0tLSZmZl7e3tKSkrY2Ni0tLSkpKSZmZlKSkrw8PDMzMyZmZnMzMyZmZmMjIz///+0tLSZmZlKSkr////////29vbm5ua8vLyZmZlVVVX////w8PDY2NiZmZmUlJS8vLy0tLSZmZl7e3taWlpKSkrw8PCZmZl7e3uZmZn///+0tLR7e3tKSkrm5ua8vLxVVVX////m5ubGxsa8vLy0tLSkpKSZmZmMjIxmZmZKSkr////29vbw8PDm5ube3t7MzMzGxsa8vLy0tLR7e3tra2tVVVVKSkrZAAAaLl1QAAAASnRSTlMAEREREREiIiIiIjMzM0RERFVVVVVmd3d3d3d3iIiIiIiZmZmZmZmqqqq7zMzMzN3d3e7u7u7u7u7u7u7//////////////////508cQgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzOY1kYDAAABmUlEQVRIie2V61LCMBBGt4KXesNSQEVuWhRIRREVRMrFNrTh/V/IbYsoGNowYxx1PD+6s/RMst8yAwAhBoiiElVU1YkuqhpEdIIEISQRax3UyTv1VPSJ5blZjj1ZDw+uiyTTA1VoB/lAzQuYfv680A4gRQwVVINExw/vD5InygIT6Ev11zKdTmWrL2/M3oTA506WKifWl6k/jtlSQ6KDSFAjvtjvUdeYVZoqgQ2gFB8hm8AYPvhcXG9ROuycBs3VzQ5j4/4Z19zu0EdKHWofY7PbZ8+Mecw94bqHjnM7cmzLVLA58ryW7bmDoFmGUnrf1kpYsGGMPbS1ChbeoeiMNEhjsQLV1iCDxeK5Q8cppTutgeW/HXteJdO/CxtOLJtSzKaEsVzGMBtvVIBz28JlOSPTby7dAS7Lc0yuCgUT59xrZ4NkBRPn3G9nVyQDwNHwSvqxWWHKINlIAlQnPtUYszlpJiHXRbObi1Yb6DQAir1Jrxhtvt2s1J5q/MXPyZk+eLNSiDH/+SMs/JLKUxf+NKI/lqOuMasU9RWFCIJnVmrsJAAAAABJRU5ErkJggg==) !important;
background-repeat: no-repeat !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;.subscribe-button{ background-position: -28px -14px !important;padding-left: 15px !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.lhn-section{
border-top:0 !important;
margin: 15px 0 0 0 !important;
background: transparent !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;img[src="/reader/ui/3544433079-tree-view-folder-open.gif"],
img[src="/reader/ui/1891922333-tree-view-folder-closed.gif"] {
width: 0 !important;
height: 0 !important;
margin: 0 4px 0 0 !important;
padding: 16px 0 0 16px !important;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMjkvNi8wOJJ/BVgAAAG3SURBVDiNpZIhb5RBEIaf2W+vpIagIITSBIHBgsGjEYQaFLYShcITDL+ABIPnh4BFN0GQNFA4Cnf3fbszL2L3jiuEVLDJbCazu8+8Mzsmif9ZBvDy7bvXlni0HRe8eXL/zuPzABng62J5kFKaAQSQgJAOgHMB9vDZq+d71689Hcyw9LfAZAYdioE10VSJo6OPL/KNvSuHD+7dhU0vHEsDUUWJChIlYJIjFx5BuMB2mJY/DnMoOJl/R147oBUR0QAm8LAGCOEh3IOULiAl8jSOy/nPetGsbGRKjktEiBCEHMlQj4loCuu4zCXCi4lUHTNDtGqEiACTqAFSIOgAUAKv4bkWVy2g6tAbJtGy0TNugM3HADmlurKH27dVZSecxjboXggiAsMItRh99wTILdewYRpXVJWtY85k7fPW8e1GpJFJacgesXs6VYYomz9G2yDhwPB7NEBBDAMK7WYJlisYVBCpfaJBeB+eocFyVyAgCaoMCTJSTOOCWSyILrAnaXpSexRsxGGAZ0AR+XT+5fjzyfwSpnUB/1w64xizVI/t6q3b+58+vJ96mWtLf9haxNoc8Mv7N3d+AT4XPcFIxghoAAAAAElFTkSuQmCC) no-repeat !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;/*Posts*/&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.card-common{
margin:0 10px 0 0 !important;
background: #f1f1f1 !important;
border-width: 1px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry .card{
border-color:#ddd !important;
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-width: 1px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;h2.entry-title,
a.entry-title-link {
font-family: "HelveticaNeue-Bold",Helvetica !important;
font-weight: bold;
line-height: 1.3;
font-size: 24px;
color: #000000 !important;
text-shadow: 0 1px 1px #fff;
}
&amp;lt;p style="text-align: center;"&amp;gt;#entries .collapsed .entry-title {font-size: 12px !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/*highlight current entry*/
#current-entry,#current-entry .entry-source-title {color: #000 !important;}#current-entry .item-body div {color: #555 !important;}#current-entry .entry-actions .link {color: #666 !important;}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#current-entry .card {
border-color:#e5e5e5 !important;
background: #fff !important;
border-width: 1px !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;#current-entry .card .card-content{padding:10px 1px 5px 5px !important}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry,
.entry-author a,
a.entry-source-title,
.entry-actions,
.entry-actions .link,
.item-body div,
.entry-date {
color: #999 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.cards .entry-date {
font-size: 11px;
margin: 0.6em 0 0 0 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.item-body div {
margin: 10px 0 0 0;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.item-body *,
.item-snippet {
line-height: 1.4;
font-size: 13px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.item-body div a{
color: #4489dd !important;
text-decoration: none !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;.item-body div a:hover{text-decoration: underline !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry .entry-title .entry-title-go-to,
#recent-activity .recent h4,
#trends .sorting .trends-sorting-homepage{background:url(/reader/ui/3728287201-entry-action-icons.png) no-repeat 2px -258px;}
&amp;lt;p style="text-align: center;"&amp;gt;.entry .entry-actions .star,.entry .entry-actions .read-state,.entry .entry-actions .broadcast,.entry .entry-actions .broadcast-with-note,.entry .entry-actions .note-delete,.entry .entry-actions .email,.entry .entry-actions .tag,.entry .entry-icons .star{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAEQCAMAAABoXw3mAAAAA3NCSVQICAjb4U/gAAAA/FBMVEX////MzMyzs7OZmZlZWVrZAADMzMyZmZn4jARZWVrZAADMzMz4jASZmZlZWVrZAADMzMyZmZn4jATZAADMzMyZmZn4jARZWVrZAADMzMyZmZn4jARZWVrZAACZmZlZWVrZAADMzMyZmZnMzMyZmZn4jARZWVrZAADMzMyzs7OZmZn4jARZWVrZAADMzMyzs7OZmZn4jATZAADMzMyzs7OZmZn4jARZWVrZAADMzMz4jARZWVrZAADMzMz4jASZmZlZWVrZAAD////4+Pjw8PDm5ube3t7V1dXMzMzExMS8vLyzs7OsrKylpaWZmZn4jAR/f4BmZmZZWVrZAABfVncfAAAAVHRSTlMAEREREREiIiIiIjMzMzMzRERERFVVVVVVZmZmZmZ3d3eIiJmZmZmZqqqqqqqqu7u7u7vMzMzMzMzd3d3d7u7u7u7///////////////////////+PAnOHAAAACXBIWXMAAArwAAAK8AFCrDSYAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAABBF0RVh0WE1MOmNvbS5hZG9iZS54bXAAPD94cGFja2V0IGJlZ2luPSIgICAiIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNC4xLWMwMzQgNDYuMjcyOTc2LCBTYXQgSmFuIDI3IDIwMDcgMjI6MTE6NDEgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhhcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4YXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTMzwveGFwOkNyZWF0b3JUb29sPgogICAgICAgICA8eGFwOkNyZWF0ZURhdGU+MjAwOC0xMi0wNlQxMjo0Njo0MFo8L3hhcDpDcmVhdGVEYXRlPgogICAgICAgICA8eGFwOk1vZGlmeURhdGU+MjAwOC0xMi0wOFQwOTo1OTowNFo8L3hhcDpNb2RpZnlEYXRlPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9wbmc8L2RjOmZvcm1hdD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgVC9XvQAAA0pJREFUeJzt3etTElEYx/Gt1ShvaImU5rYh5SWlFcOsBHTdlQMk1O7//790LnvFF0wzzTyP+ftMDPTuO+c8Z3dgRrAsY9VipkkdMKPiVagTympejTqhrOnx2jPb8zybOiKxeuTljjaocyS7kfU0mKxSzSzSEZ+5rukgPj2Wo4Mc6oyMOmMOo3NmbXjNilVpehyOmObo02U32OxZbeYZAAAAAOABekUdMOuSOmBGNa5SJ5S5sUudUHYRX1AnlCzGcbxEHZF4fR3nrnepc6SldtbTZrJKrlmka5c6JOPqIJc6I3eig06oMzLqjO3LxyJ1SGo3vqxa1cuYwxHT9ttqbRbb+9QhKXfmGQAAAAAA/oVnB+LgGXVEUUsI0aKOKBIKdURu/UxwWSE1O+ut7sE6lxlq6aVZps7IMZuddIVYbJahZ+isu7fMZYaMzW9sTlmK5SyxWiF29zIAAAAAgAdupTftrVBHFPWm02mPOqJoqlBH5F6eT7mskJqdrdPepx0uM6RmZ3rKIsVgNjvpCj2nzsipGdo5733Y4jJDxtZ3NqcsxXKWWK0Qu3sZAAAAAMBDJTLUJQlx7wUxBM2DoHkQNA+/IG4XRgAAAAAAeCzqb6kLjPRN0fB3xKMofXt2HEXHpCEpGbQmn+pRdLVA3aIJa+HqnXxEUZ06xRBys65eyA37RV2SENbHKPohN2xIXZKQM/Q1kupcPnyQHWqAjvl8PCMfa+qEsQlSJnf4vAgAAAAAAB6vceEfC+MMdUmC3wrde0EMQfMgaB6mQYdfDnkFfX7KbYUYBXG7dQAAAAAA/IVxGXWODBKBnwoFh6BgFCY9A3HDIcgPRJj0+D6LIFl0K3uE7GES5PvDgS+GIZugGzEcjUYDtXM8guSODYa3/s04YBEUjG6TUxaIgEOQCLPrUDDiEMTtSg0AAAAA8D/YPGP0w0SW9WRPCPE+/7/d6EwmnYZN1bOsf9cq/22i7f5E62/T9LzpCvlWLRSiu2l6JhmaIrU6+sMQ84cgdj8P6pPsmirRK2SCHFUS/jRFDlVQ4atVOipELpgO6jAImpgg+b5fveAUNGYSxG7LzFDf8RlqHse++AVGLC6MpW9Uor513AuybEfdXB2ym2vJH/FF+DokTxXCAAAAAElFTkSuQmCC) !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry .entry-icons .item-star {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAA3NCSVQICAjb4U/gAAAAG1BMVEW3t7e8vLzg4ODx8fHFxcXMzMzk5OT29vbS0tL6qoz8AAAACXRSTlP/////////AP/taWrtAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFHRFWHRDcmVhdGlvbiBUaW1lADMvNC8wN0HM0QkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzOY1kYDAAAEEXRFWHRYTUw6Y29tLmFkb2JlLnhtcAA8P3hwYWNrZXQgYmVnaW49IiAgICIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA0LjEtYzAzNCA0Ni4yNzI5NzYsIFNhdCBKYW4gMjcgMjAwNyAyMjoxMTo0MSAgICAgICAgIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eGFwPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhhcDpDcmVhdG9yVG9vbD5BZG9iZSBGaXJld29ya3MgQ1MzPC94YXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4YXA6Q3JlYXRlRGF0ZT4yMDA4LTAxLTE0VDIwOjE2OjMzWjwveGFwOkNyZWF0ZURhdGU+CiAgICAgICAgIDx4YXA6TW9kaWZ5RGF0ZT4yMDA4LTAxLTE0VDIwOjIyOjE1WjwveGFwOk1vZGlmeURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICDc/8AGAAAAW0lEQVQImWMoLy8vBuICBiBRCGMYmEMZCupQhoM7lMHADmIkMoAAYwJDeQCIEQ6UKhJgYBACq1FgYFAHM4By4WAGAwdQG5BRxmhuyAZiVISXl0eAGEVAI4vKCwDybCe8qt+/4QAAAABJRU5ErkJggg==) no-repeat !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;.cards .entry .entry-icons .item-star {margin: 0.5em 0 0 0 !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.cards .entry .entry-icons .item-star-active{margin: 0.5em 0 0 0 !important;}
.entry .entry-icons .item-star-active{
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAA3NCSVQICAjb4U/gAAAALVBMVEXZAADsgIDgMDD1v7/bEBDlUFDxoKD639/eICDjQEDukJDnYGDzsLD4z8/29vZ6TjJkAAAAD3RSTlP//////////////////wDU3JihAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFHRFWHRDcmVhdGlvbiBUaW1lADMvNC8wN0HM0QkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzOY1kYDAAAEEXRFWHRYTUw6Y29tLmFkb2JlLnhtcAA8P3hwYWNrZXQgYmVnaW49IiAgICIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA0LjEtYzAzNCA0Ni4yNzI5NzYsIFNhdCBKYW4gMjcgMjAwNyAyMjoxMTo0MSAgICAgICAgIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eGFwPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhhcDpDcmVhdG9yVG9vbD5BZG9iZSBGaXJld29ya3MgQ1MzPC94YXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4YXA6Q3JlYXRlRGF0ZT4yMDA4LTAxLTE0VDIwOjE2OjMzWjwveGFwOkNyZWF0ZURhdGU+CiAgICAgICAgIDx4YXA6TW9kaWZ5RGF0ZT4yMDA4LTAxLTE0VDIwOjIyOjE1WjwveGFwOk1vZGlmeURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICDc/8AGAAAAYElEQVQImWN49+7dYyB+wAAkXsAYF+5BGQJyUIaCHpTBwA5iHGEAAZYEhucTQIzpQKlXDgwMXmA1CxgY1oEZAQwMcWAGAzcDH4jxjOPeDTYQ4/W8d+9mgxivgEa+evcAAOAQT9LdAharAAAAAElFTkSuQmCC) no-repeat !important}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry-actions {
height: 1em;
padding: 2px 20px 10px 30px !important;
margin: 0 0 0 5px !important;
background-color: transparent !important;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAMAAACTbPdTAAAAA3NCSVQICAjb4U/gAAAAXVBMVEX///////+0tLTY2Ni0tLTx8fHMzMz///+0tLT////29va7u7v////Y2Ni7u7u0tLT///+0tLTm5ua7u7v////m5ubCwsK0tLT////29vbx8fHm5ubCwsK7u7u0tLQXN3g3AAAAH3RSTlMAEREiIjNEVVVmd3eIiJmZzMzd3e7u7u7/////////INKuhgAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAWdEVYdENyZWF0aW9uIFRpbWUAMjAvMTIvMDjFSokUAAAAZElEQVQImS2NSRKAMAgEiVvcjWvQhPn/M8VEDkN1FfQQUUGARp5lLYHHDwkqjwsQxD5hI7IFieyMAoDzsJMuyhTsl+APH5Gp9fvNnC0RUJVJljmyNkhwuXB0+lMf3S8i0h89BL154whof+mZogAAAABJRU5ErkJggg==) !important;
background-position: 3px 4px !important;
background-repeat: no-repeat !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry-actions span{
display: none;
font-size: 11px;
font-weight: bold;
margin: 0 0 0 4px !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry-actions:hover span {
display: inline !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.entry-actions .link:hover{
color: #000 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#rec-preview,#tips,
.friend-interruption,
#no-entries-msg {
border: 0 !important;
background: #f1f1f1 !important;
text-shadow: 0 1px 0 #fff !important;
color: #666 !important;
-webkit-border-radius:8px !important;
-moz-border-radius:8px !important;
}
&amp;lt;p style="text-align: center;"&amp;gt;/*footer*/&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#chrome-view-links {
display: block !important;
bottom: 0 !important;
top: auto !important;
right: 18px !important;
z-index: 1000;
color: #aaa !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#viewer-footer .goog-button{margin:0 !important;}
.goog-button-base-content{padding:0 !important;}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#chrome-view-links span,
.goog-button-base-content,
#mark-all-as-read,
#viewer-refresh,
#sub-tree-subscriptions {
color: #777 !important;
font-size:12px !important;
text-shadow: 0 1px 0 #fff;
font-weight: bold !important;
z-index: 1000 !important;
}
#viewer-refresh {
position: absolute !important;
bottom: 5px !important;
left: 310px !important;
z-index: 1000 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#mark-all-as-read {
position: absolute !important;
bottom: 5px !important;
left: 380px !important;
z-index: 1000 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.lhn-hidden #viewer-refresh{ left:40px !important;}
.lhn-hidden #mark-all-as-read { left:110px !important;}
&amp;lt;p style="text-align: center;"&amp;gt;#tips-body .bookmarklet{background-color:#666 !important;}&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;a.bookmarklet-link,
#tips-body .bookmarklet a{
background-color:#666 !important;
color: #fff !important;
font-weight: bold;
text-shadow: #000 0 -1px 0 !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;a.result-title,
.title a {
color: #333 !important;
margin: 0 0 6px 0 !important;
display: block;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;.item-title { color: #555;}
.overview-segment .label {color: #999 !important;}
&amp;lt;p style="text-align: center;"&amp;gt;/* Loading message */&amp;lt;/p&amp;gt;
&amp;lt;p style="text-align: center;"&amp;gt;#loading-area td.c, #loading-area td.s { background-color: transparent !important; }&amp;lt;/p&amp;gt;
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#loading-area {
position: absolute !important;
top: 50% !important;
width: 190px !important;
height: 63px !important;
padding: 0 !important;
margin: -32px 0 0 -88px !important;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAA/CAMAAAB3j7JhAAAAA3NCSVQICAjb4U/gAAAAP1BMVEX///8AAAAAAAAAAAAAAAAAAAALCwsAAABmZmZMTEwzMzMXFxenp6eSkpJ8fHzh4eHMzMy3t7f////6+vry8vIRVwdgAAAAFXRSTlMAEVVmiJm7u8zMzMzd3d3u7u7///9bA+/sAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAABR0RVh0Q3JlYXRpb24gVGltZQAzLzQvMDdBzNEJAAABzklEQVRoge2a247CIBBAW6uU20gZ+P9vXaa06yWu1l1xJMt5sDDQ5DgZEBO6juh3+/HD2e/6bqUfuG22MSzK/YHbZCuHvi7fxbiSesgMKcHcDs/R15VgSvHH72eX7Dtug2dpwqVpwqVpwqVpwqVpwqVpwqVpwqVpwqV5mbC1j+c4uWnaXV4m7NzjOQibpt3l3cJ/poiwBFBzQxwBzNxS1EjCJnX1KADkHDYAetSCV9iEABapK9GBR0+jaG3wuSQ0+tRDTJoTepjDrMKzq6BPpBV2TGYWKc9xFUb6WmnwFOYUJsGRsmuMIx+NOpuPahU+Li+cwpzCU8zPWcvoY0StMZf0KqzzC2fh7bxeeG0kDYsTSEnC+rbwd5hT2If5IVACLiVhUObQpbA4hTmFZfYBFDkEVMM+j1wKj2GZwLxLxGBoJdnRU4ZVSJUKlEuD18IKvUiLlEkYF2h3dXmriuhC1CEJWowxqGvhUUVEZ3iEzxE6r6a0SZg1toZuzM7b3EZYj5fTUsMsP82/weCktMWnTpy8B3gBzvkfa+Um//cfx7towqVpwqVpwqVpwqVpwqWpT7i6+xLV3Uip7s5PXSkeary3VpHxoa/z7mVdt1u/ALNrN8AScfhFAAAAAElFTkSuQmCC) no-repeat !important;}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;#loading-area p {
display: block !important;
text-indent: -999em;
padding: 0 !important;
margin: 0 auto !important;
overflow:hidden !important;
width:138px !important;
height: 35px !important;
background-position: 5px 50% !important;
background-image: url(data:image/gif;base64,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) !important;
background-repeat:no-repeat !important;
}
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;/* @end */
In here we have all the classes and divs that we need to modify the look of the site. You can change out the styles as you require.
Next we have the javascript file, where all the magic switcherooness happens. lets pop open the file and Il talk you through it;
// ==UserScript==
// @name ODIN Reader
// @description The odin style for Google Reader
// @include https://*.google.com/reader/view/*
// @include http://*.google.com/reader/view/*
// @include htt*://*.google.*/reader/view*
// @author THE ODIN
// ==/UserScript==
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;var favvy = document.createElement('link');
favvy.setAttribute('type', 'image/x-icon');
favvy.setAttribute('rel', 'shortcut icon');
favvy.setAttribute('href', 'http://www.theodin.co.uk/graphics/favicon.ico');
var head = document.getElementsByTagName('head')[0];
head.appendChild(favvy);
<p style="text-align: left;"><p style="text-align: center;">&amp;lt;p style="text-align: center;"&amp;gt;var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://www.theodin.co.uk/tools/greasemonkey/ODIN_READER/ODIN_READER.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);
&amp;lt;p style="text-align: center;"&amp;gt;
Its actually just a few lines which do all the hard work. Notice at the top we have comments, these are important as they tell grease-monkey that we want to run a script. So leave the syntax the same, just change any details that you me need to.Below this we have a few lines which start CSS.Node these will execute as grease-monkey scripts, we are defining the title, media and location of the stylesheet to use, you can adjust this to point at your file, you will of course need to upload your version to a bit of site sapce, but once this is done you should be home free.
The Final Act
The last thing you will need to do is install your script with grease monkey, this is very straight forward, just select tools>greasemonkey>new user script on the page you want to update, enter the relevant info into the fields provided.
You can then open manage use script and specify the location of the files you want grease monkey to use.
Now close FireFox and restart. If you have set everything correctly you should find when you browse to google reader you will have your very own over branded version. Its as simple as that. And if you keep the files in the same loaction you can quickly apply this to any future machine you work on. Happy Coding.
Talk to me