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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#chrome-header {
height: 0 !important;
position: static !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#entries.list #current-entry.expanded .entry-actions {
border: 0 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.goog-button-base-content{
padding:0 !important;
line-height: 1 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#search {
left:270px !important;
width: 100%;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#search-restrict,#search-submit { margin: 4px 0 0 10px !important; }&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#search-restrict{width:100px !important}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#search:hover #search-submit,
#search:hover  #search-restrict {
display: inline !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#search:hover #search-input,
#search-input:focus {
border: 1px solid #999 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.lhn-hidden #search{
left:10px !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#global-info {
color: #ccc;
margin-right: 7px !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;a.entry-source-title { font-weight: bold;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;a, a.link, .link {
color: #777 !important;
text-decoration: none !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#viewer-top-controls {
color: #bbb !important;
font-size: 12px !important;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#stream-prefs-menu{ z-index: 0;}&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#stream-prefs-menu-contents li {  margin: 0 0 3px 0 !important; }&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#stream-prefs-menu .goog-button-body{ margin: 3px 0 0 10px !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;/*Sidebar*/&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.lhn-hidden #nav:before {
content:"" !important;
margin: 0 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#friends-tree .name,
#sub-tree .name  {
margin: 0 0 0 5px !important;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#lhn-friends .lhn-section-primary, .lhn-section-footer {padding-left:18px !important}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#friends-tree-item-0-name,
#sub-tree-header {
font-weight: bold !important;
color: #333 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#sub-tree-header {
padding: 0 0 0 12px;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#lhn-selectors.lhn-section-minimized .selector{padding-left:22px !important}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;.subscribe-button{ background-position: -28px -14px !important;padding-left: 15px !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.lhn-section{
border-top:0 !important;
margin: 15px 0 0 0 !important;
background: transparent !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;/*Posts*/&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.card-common{
margin:0 10px 0 0 !important;
background: #f1f1f1 !important;
border-width: 1px !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;#entries .collapsed .entry-title {font-size: 12px !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#current-entry .card {
border-color:#e5e5e5 !important;
background: #fff !important;
border-width: 1px !important;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#current-entry .card .card-content{padding:10px 1px 5px 5px !important}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.cards .entry-date {
font-size: 11px;
margin: 0.6em 0 0 0 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.item-body div {
margin: 10px 0 0 0;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.item-body *,
.item-snippet {
line-height: 1.4;
font-size: 13px !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.item-body div a{
color: #4489dd !important;
text-decoration: none !important;
}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.item-body div a:hover{text-decoration: underline !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;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;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;.cards .entry .entry-icons .item-star {margin: 0.5em 0 0 0 !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.entry-actions span{
display: none;
font-size: 11px;
font-weight: bold;
margin: 0 0 0 4px !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.entry-actions:hover span {
display: inline !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.entry-actions .link:hover{
color: #000 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;amp;gt;/*footer*/&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#viewer-footer .goog-button{margin:0 !important;}
.goog-button-base-content{padding:0 !important;}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#mark-all-as-read {
position: absolute !important;
bottom: 5px !important;
left: 380px !important;
z-index: 1000 !important;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.lhn-hidden #viewer-refresh{ left:40px !important;}
.lhn-hidden #mark-all-as-read { left:110px !important;}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#tips-body .bookmarklet{background-color:#666 !important;}&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;a.result-title,
.title a {
color: #333 !important;
margin: 0 0 6px 0 !important;
display: block;
}
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;.item-title { color: #555;}
.overview-segment .label {color: #999 !important;}
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;/* Loading message */&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p style="text-align: center;"&amp;amp;gt;#loading-area td.c, #loading-area td.s { background-color: transparent !important; }&amp;amp;lt;/p&amp;amp;gt;
<p style="text-align: left;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;">&lt;p style="text-align: center;"&gt;&amp;amp;lt;p style="text-align: center;"&amp;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;amp;lt;p style="text-align: center;"&amp;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.

I worte a post a couple of days ago about getting back into photoshop, I have just been playing around with it again, to remind myself of the tools more than anything else, Ive been getting rusty. Anyway here are a couple of pieces I just finnished.

I will be putting up the PSD files for them as well so if anyone else wishes to use them for their own work you are more than welcome. I love photoshop!

I was unaware until recently that google now offers its own repository for javascript frameworks. It wasn’t until I actually tried this out for myself that I found in most cases my pages loaded faster when I called in Jquery through google. This you may think Isn’t a smart move, what if google moves the code URL? well google have promised the repository will stay fixed for the next 10 years and beyond. so that’s reassurance enough for me.

Clever Thinking

What I was most impressed with however was the forward thinking nature of the repository. For example I recently upgraded my Jquery library to version 1.3, by using google, however version 1.3 had several bugs in its release, so when version 1.3.1 came out, google took the initiative to upgrade for me. let me show you what I mean.

This is what a call to a javascript framework looks like, if you call it from google;

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

of course if you can choose which version you want, and if you want it minified or uncompressed via the relevant directories, and if a user goes from 1 website using the same js framework being called from google, to your website the framework will already be loaded, meaning that your page will load even quicker, pretty nifty I think. why not check it out for yourself, and see if you notice the difference

I decided to have a play in photoshop the the other day, I wanted to brush up my skills so i read through a couple of tutorials I had saved on my delicious list of things to do. I have always enjoyed design, but with my job heavily focused on web development Its nice to have a change of focus.

I came accross this awesome tutorial and really liked the style. I wanted to achive the same effect but I didnt want to use illistator. So This is my own take. I hope to write a tutorial In the near future to show how you can do this, its not too tricky and the method can be applied to anything.

I Have read through a lot of blogs this month all discussing new years resolutions, whether it be learning ruby on rails, or maybe a new javascript framework. This got me thinking about making a new years resolution that would benefit not just me, but everybody.

The Idea is pretty simple. Take every web project that you work in this year, and put the following code somewhere suitable;

<!--[if IE 6]>
<a href="http://www.mozilla.com/firefox?from=sfx&uid=0&t=306"><img border="0" alt="Spreadfirefox Affiliate Button" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/110x32_get_ffx.png" /></a>
<![endif]-->

If you haven’t guessed already the idea is to inform those still clinging to IE6 to upgrade, admittedly I may be bias choosing FireFox, but the principle is the same. We as designers, developers and web enteupeners have a responsability to guide the misinformed into the light. The Big players are already doing this, Facebook is just one example.

The real beauty of this idea is that it does not hinder your site, the only people effected are the ones already at a disadvantage.

I will be implimenting this on my own, site, and I would hope that it may be something that you will consider doing too! Thoughts and comments appreciated!

I Have recently been putting together a business model for my freelance work. The intention being that I will have a viable platform that I can use for clients of varying sizes and requirements. As part of this I have been doing a lot of research into wireframes.

This is something I myself have been guilty of overlooking in the past, however its important not to underestimate the need for wireframes in modern web design. To Better explain what wireframes are and why they should be used I have put together this short introductory guide.

Whats a Wireframe

In its most basic sense a wireframe is a document which describes the layout of information within a web page. This is not a document to outline style or colour. Instead a wireframe should show how to organize and display elements of the page. A wireframe could be the responsibility of a designer or a usability expert, but whoever is responsible should have a good understanding of information structure and an eye for layout and design patterns.

Whats The Benefit of Producing a Wireframe?

Apart from the obvious reasons why you would want to produce a wireframe, it can be an integral part of your brief. The wireframes themselves can become a brief which you or a client can refer back to throughout the process of a project. Its also important because it helps cement the foundation of what you are trying to create, so that’s the client can indicate their thoughts and feedback before the bulk of effort is put into the full mock ups and logo design.

This also helps massively with the design process, once you have a clear outline, it leads you to think how best you can dress up the site with colors, imagery and overall design. This is also something you can charge for, as part of the business model, another step which means another installment, assuming you are working with phase payments.

What Does a Wireframe Look Like

The structure of a wireframe will be wildly different depending on the client and the requirements, however there are a couple of ground rules that will help you out.

• Always work in black and white – this is a great way to detract from thinking about color or design, it will force you to focus on the layout and spacing of elements on the page.
• Keep the Fonts Simple - Its very easy to get caught up in how a fonts look, however you should resist, remember that its about the format not the style.

What Should I Use to Create A  Wireframe

There are several ways you can go about doing this, using photoshop, or omigraffle or even sketching on paper, however this may not be the best principle if you are going to present to your client. Once you have created a design it is best to create a PDF and a print out so that you can refer back to it if any issues arise later in the project.

Wireframes are not a designed as another hurdle to overcome in modern web design. Instead they should be considered as an aid in the design process. I hope to evaluate a few tools which can make this process much quicker and easier, I will post my findings when I have evaluated a few possibilities.