Merge lp:~teemperor/lightread/elementary-ui into lp:~cooperjona/lightread/quickly_trunk

[Raphael Isemann]

Added an optional use of the elementary UI as seen here http://i.imgur.com/RMNpvsu.jpg

If there is no granite-lib available on the system or the system is not elementary OS this merge will not affect lightread-behaviour in any way.

For quick questions i'm also available on #elementary-dev or #elementary on irc.freenode.net

[lp:~teemperor/lightread/elementary-ui]

64. By Raphael Isemann on 2013-02-18

included a new style.css

[Raphael Isemann (teemperor)]

Credits for the style.css goes to the source in this news-article: http://www.elementaryupdate.com/2013/02/lightread-rss-app.html

[lp:~teemperor/lightread/elementary-ui]

65. By Raphael Isemann on 2013-02-27

added granite-gir dep

[Nekhelesh Ramananthan (nik90)]

Raphael all code merge proposals are done in Github. You can find it at https://github.com/stayradiated/LightRead

Unmerged revisions

65. By Raphael Isemann on 2013-02-27

added granite-gir dep

64. By Raphael Isemann on 2013-02-18

included a new style.css

63. By Raphael Isemann on 2013-02-18

added tooltips

62. By Raphael Isemann on 2013-02-18

added support for a optional Granite UI

=== added file 'data/media/app/css/style_elementary.css'
--- data/media/app/css/style_elementary.css	1970-01-01 00:00:00 +0000
+++ data/media/app/css/style_elementary.css	2013-02-27 22:46:21 +0000
@@ -0,0 +1,1065 @@
+button:focus {
+  outline: none; }
+
+a:focus {
+  outline: none; }
+
+::-webkit-scrollbar {
+  width: 5px; }
+
+::-webkit-scrollbar-thumb {
+  background: #4a90d9; }
+
+#articles::-webkit-scroller-thumb {
+  border-left: 1px solid #e1e1df; }
+
+#articles::-webkit-scrollbar-track {
+  border-left: 1px solid #9c9c9c; }
+
+#post-column::-webkit-scrollbar {
+  width: 4px; }
+
+#post iframe#instapaper::-webkit-scrollbar-track {
+  background: #f4f4f4; }
+
+body, html, .splitter {
+  height: 100%;
+  font-family: "Open Sans", "Ubuntu", "Helvetica", "Arial", sans-serif; }
+
+input, textarea {
+  font-family: "Open Sans", "Ubuntu", "Helvetica", "Arial", sans-serif; }
+
+#app {
+  overflow: hidden;
+  width: 100%; }
+  #app > .vsplitbar {
+    width: 1px;
+    cursor: col-resize;
+    background: #9c9c9c; }
+
+#right-side > .vsplitbar {
+  width: 1px;
+  cursor: col-resize;
+  background: white;
+  border-left: 1px solid #9c9c9c;
+  border-right: 3px solid transparent;
+  position: relative;
+  top: 1px; }
+  #right-side > .vsplitbar:after {
+    content: "";
+    position: absolute;
+    display: block;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: auto;
+    width: 4px;
+    height: 36px;
+    background: -webkit-linear-gradient(top, #dbdbdb 0%, #c5c5c5 100%);
+    border-top: 1px solid #737373; }
+
+#feeds-column {
+  height: 100%;
+  width: 200px;
+  min-width: 20px;
+  background: #dbdbdb;
+  box-shadow: 0 1px 0 #7c7c7c inset; }
+  #feeds-column * {
+    -webkit-user-select: none; }
+  #feeds-column ul {
+    margin: 0;
+    padding: 0; }
+  #feeds-column #filters {
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    height: 76px;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.1); }
+  #feeds-column #feeds {
+    position: absolute;
+    display: block;
+    top: 77px;
+    bottom: 36px;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-top: 1px dashed rgba(255, 255, 255, 0.6); }
+  #feeds-column .empty-message {
+    display: none;
+    font-size: 13px;
+    font-family: "Raleway", "Open Sans", "Ubuntu", sans-serif;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 0 white;
+    margin-top: 140px;
+    padding: 0 20px;
+    line-height: 20px;
+    color: #555555; }
+
+#articles-column {
+  min-width: 250px;
+  height: 100%;
+  width: 300px;
+  background: white;
+  box-shadow: 0 1px 0 #7c7c7c inset; }
+  #articles-column * {
+    -webkit-user-select: none; }
+  #articles-column #articles {
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 36px;
+    left: 0;
+    right: 0;
+    overflow-y: scroll;
+    margin: 0;
+    padding: 0; }
+  #articles-column .bar {
+    display: -webkit-box; }
+
+#post-column {
+  min-width: 20px;
+  height: 100%;
+  margin-left: -5px;
+  padding-left: 5px;
+  background: white;
+  box-shadow: 0 1px 0 #7c7c7c inset; }
+  #post-column .bar.disabled #read-button,
+  #post-column .bar.disabled #star-button,
+  #post-column .bar.disabled #close-post-button,
+  #post-column .bar.disabled #instapaper-button,
+  #post-column .bar.disabled #share-button {
+    opacity: 0.4; }
+  #post-column #post-window {
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 36px;
+    left: 0;
+    right: 0;
+    overflow-y: auto; }
+    #post-column #post-window.instapaper {
+      background: #f4f4f4; }
+      #post-column #post-window.instapaper #post {
+        margin: 0;
+        padding: 0;
+        max-width: 100%; }
+
+.scope:after, .scope:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: auto;
+  bottom: 35px;
+  left: 50%;
+  right: auto;
+  border: solid transparent;
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  z-index: 10; }
+
+.scope:after {
+  border-bottom-color: #dbdbdb;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px; }
+
+.scope:before {
+  border-bottom-color: #737373;
+  border-width: 11px;
+  left: 50%;
+  margin-left: -11px; }
+
+#hidden {
+  display: none; }
+
+.bar {
+  position: absolute;
+  display: block;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 35px;
+  background: -webkit-linear-gradient(top, #dbdbdb 0%, #c5c5c5 100%);
+  border-top: 1px solid #737373;
+  font-size: 0; }
+  .bar div {
+    display: inline-block; }
+  .bar button {
+    width: 35px;
+    height: 35px;
+    border: 0;
+    line-height: 35px;
+    vertical-align: top;
+    background: transparent;
+    padding: 0; }
+
+#refresh-button {
+  margin: 0 2px;
+  background-image: url(../images/sync.png);
+  background-repeat: no-repeat;
+  background-position: 5px -211px; }
+
+#mark-all-as-read-trigger {
+  background: url(../images/btn_mark_all_read.png);
+  margin: 0 2px;
+  width: 36px; }
+
+#mark-all-as-read-popup {
+  width: 150px;
+  height: 32px;
+  position: absolute;
+  display: block;
+  top: auto;
+  bottom: 35px;
+  left: 4px;
+  right: auto;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.7);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.3);
+  border: 1px solid black;
+  display: none;
+  z-index: 11; }
+  #mark-all-as-read-popup:after, #mark-all-as-read-popup:before {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none; }
+  #mark-all-as-read-popup:after {
+    border-top-color: rgba(0, 0, 0, 0.8);
+    border-width: 8px;
+    left: 10%;
+    margin-left: -8px; }
+  #mark-all-as-read-popup #mark-all-as-read-button {
+    background: -webkit-linear-gradient(top, #3a3a3a 0%, #232323 100%);
+    width: 138px;
+    height: 22px;
+    margin: 4px 5px;
+    border-radius: 3px;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(255, 255, 255, 0.2);
+    color: #dddddd;
+    font-family: "Open Sans", "Ubuntu Medium", "Ubuntu", "Helvetica", "Arial", sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 22px;
+    text-align: center;
+    border: 1px solid #1a1a1a;
+    cursor: default;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
+    #mark-all-as-read-popup #mark-all-as-read-button:active {
+      background: -webkit-linear-gradient(bottom, #3a3a3a 0%, #232323 100%); }
+
+#add-button {
+  background: url(../images/btn_add.png) no-repeat 8px 8px;
+  float: right; }
+
+#search-button {
+  background: url(../images/btn_search.png);
+  margin: 0 2px; }
+
+#close-post-button {
+  background: url(../images/btn_close.png) no-repeat 8px 8px;
+  margin: 0 2px; }
+
+#star-button {
+  background: url(../images/btn_star.png) no-repeat 8px -18px;
+  margin: 8px 2px 0;
+  height: 18px; }
+  #star-button.starred {
+    background-position-y: 0; }
+
+#instapaper-button {
+  background: url(../images/icon_instapaper.png) no-repeat 8px 8px;
+  margin: 0 2px; }
+
+#share-button {
+  background: url(../images/btn_share.png) no-repeat 8px 8px;
+  margin: 0 2px; }
+  #share-button.active {
+    background-image: url(../images/share_spinner.gif); }
+
+#post iframe#instapaper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  background: #f4f4f4; }
+
+#read-button {
+  background: url(../images/btn_read.png) no-repeat 8px -17px;
+  margin: 8px 2px 0;
+  height: 17px; }
+  #read-button.read {
+    background-position-y: 0; }
+
+#settings-button {
+  background: url(../images/btn_settings.png) no-repeat 0 0;
+  width: 16px;
+  height: 18px;
+  margin: 8px 10px 0;
+  float: right; }
+
+#item-count {
+  display: block;
+  -webkit-box-flex: 1;
+  text-align: center;
+  font-size: 13px;
+  color: #4c4c4c;
+  text-shadow: 0 1px 0 white;
+  line-height: 33px; }
+
+#search-input {
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-user-select: text;
+  height: 25px;
+  margin-top: 5px;
+  padding: 5px 10px;
+  font-size: 13px;
+  box-sizing: border-box;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 0 white;
+  border-radius: 3px;
+  border: 0;
+  border: 1px solid #cccccc;
+  color: #4c4c4c;
+  outline: 0;
+  line-height: 15px; }
+  #search-input.active {
+    background: lightblue; }
+
+#link-url {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 193px;
+  right: 35px;
+  line-height: 35px;
+  font-size: 13px;
+  color: #4c4c4c;
+  text-shadow: 0 1px 0 white;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: right; }
+
+#feeds, #filters {
+  font-size: 13px; }
+  #feeds li, #filters li {
+    cursor: default;
+    text-align: left;
+    text-shadow: 0 1px 0 white; }
+    #feeds li.label, #filters li.label {
+      -webkit-transition: background 0.3s;
+      height: auto; }
+      #feeds li.label header .icon .bit, #filters li.label header .icon .bit {
+        display: block;
+        background: url(../images/icon_label.png);
+        width: 16px;
+        height: 16px;
+        -webkit-transition: all 0.3s; }
+        #feeds li.label header .icon .bit:active, #filters li.label header .icon .bit:active {
+          -webkit-transform: rotate(45deg); }
+      #feeds li.label.expanded, #filters li.label.expanded {
+        padding-bottom: 5px; }
+        #feeds li.label.expanded header .icon .bit, #filters li.label.expanded header .icon .bit {
+          -webkit-transform: rotate(90deg); }
+          #feeds li.label.expanded header .icon .bit:active, #filters li.label.expanded header .icon .bit:active {
+            -webkit-transform: rotate(45deg); }
+        #feeds li.label.expanded ul, #filters li.label.expanded ul {
+          display: block; }
+      #feeds li.label ul li, #filters li.label ul li {
+        padding-left: 10px; }
+    #feeds li.feed, #feeds li.filter, #feeds li.label header, #filters li.feed, #filters li.filter, #filters li.label header {
+      height: 20px;
+      line-height: 20px;
+      display: -webkit-box;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      -webkit-transition: background 0.15s;
+      color: #4c4c4c; }
+      #feeds li.feed:first-child, #feeds li.filter:first-child, #feeds li.label header:first-child, #filters li.feed:first-child, #filters li.filter:first-child, #filters li.label header:first-child {
+        margin-top: 5px; }
+      #feeds li.feed:hover, #feeds li.filter:hover, #feeds li.label header:hover, #filters li.feed:hover, #filters li.filter:hover, #filters li.label header:hover {
+        background: whitesmoke; }
+      #feeds li.feed.selected, #feeds li.filter.selected, #feeds li.label header.selected, #filters li.feed.selected, #filters li.filter.selected, #filters li.label header.selected {
+        color: white;
+        border-top: 1px solid #5296de;
+        border-bottom: 1px solid #377fc9;
+        background: -webkit-linear-gradient(top, #74b0ee 0%, #4c91da 100%);
+        box-shadow: 0 1px 0 #91c1f3 inset, 0 -1px 0 #5b9adc inset;
+        text-shadow: 0 1px 0 #4c4c4c; }
+        #feeds li.feed.selected .count, #feeds li.filter.selected .count, #feeds li.label header.selected .count, #filters li.feed.selected .count, #filters li.filter.selected .count, #filters li.label header.selected .count {
+          background: rgba(255, 255, 255, 0.8);
+          color: #61a1e5; }
+      #feeds li.feed.hover, #feeds li.filter.hover, #feeds li.label header.hover, #filters li.feed.hover, #filters li.filter.hover, #filters li.label header.hover {
+        background: rgba(0, 0, 0, 0.05);
+        border-top: 1px solid #cccccc;
+        border-bottom: 1px solid #cccccc; }
+    #feeds li .icon, #filters li .icon {
+      -webkit-box-flex: 0;
+      display: block;
+      height: 16px;
+      width: 16px;
+      margin: 1px 3px 3px 11px; }
+    #feeds li .title, #filters li .title {
+      display: block;
+      -webkit-box-flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 500;
+      line-height: 20px; }
+    #feeds li .count, #filters li .count {
+      display: block;
+      -webkit-box-flex: 0;
+      color: white;
+      font-weight: bold;
+      text-shadow: none;
+      font-size: 11px;
+      height: 16px;
+      line-height: 16px;
+      padding: 0 5px;
+      margin: 2px 5px 6px 5px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 6px; }
+
+#articles li {
+  padding: 0 5px;
+  border-top: 1px solid white;
+  border-bottom: 1px solid #9c9c9c;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: default;
+  -webkit-transition: height 150;
+  position: relative; }
+  #articles li:last-child {
+    margin-bottom: 10px; }
+  #articles li.read .title {
+    color: #777777; }
+  #articles li.starred .title {
+    color: #3b3b3b;
+    position: relative; }
+    #articles li.starred .title:after {
+      position: absolute;
+      display: block;
+      top: 5px;
+      bottom: auto;
+      left: 3px;
+      right: auto;
+      content: "";
+      display: inline-block;
+      width: 13px;
+      height: 14px;
+      background: url(../images/icon_starred_alt.png) no-repeat;
+      opacity: 0.3; }
+  #articles li.selected {
+    color: white;
+    border-top: 1px solid #5296de;
+    border-bottom: 1px solid #377fc9;
+    background: -webkit-linear-gradient(top, #74b0ee 0%, #4c91da 100%);
+    box-shadow: 0 1px 0 #91c1f3 inset, 0 -1px 0 #5b9adc inset;
+    margin: -1px auto;
+    z-index: 1; }
+    #articles li.selected:first-child {
+      border-top: 0; }
+    #articles li.selected + li {
+      border-top: 1px solid transparent; }
+    #articles li.selected.no-border {
+      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 -1px 0 white;
+      border-bottom: 1px solid transparent; }
+    #articles li.selected .feed, #articles li.selected .title {
+      color: white;
+      text-shadow: 0 1px 0 rgba(76, 76, 76, 0.5); }
+    #articles li.selected .time, #articles li.selected .snippet {
+      color: rgba(255, 255, 255, 0.7);
+      text-shadow: 0 1px 0 rgba(76, 76, 76, 0.3); }
+  #articles li.hover:after {
+    content: "";
+    position: absolute;
+    display: block;
+    top: 1px;
+    bottom: 2px;
+    left: 1px;
+    right: 1px;
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.2); }
+  #articles li header {
+    display: -webkit-box; }
+    #articles li header .icon {
+      padding: 4px 4px 0 2px; }
+    #articles li header .feed {
+      font-size: 11px;
+      color: #777777;
+      line-height: 25px;
+      -webkit-box-flex: 1;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis; }
+    #articles li header .time {
+      display: block;
+      line-height: 25px;
+      font-size: 11px;
+      margin-right: 2px;
+      color: #777777; }
+  #articles li .title {
+    font-size: 12px;
+    display: block;
+    margin-top: -2px;
+    padding: 0 0 2px 22px;
+    font-weight: bold;
+    color: #3b3b3b;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01); }
+  #articles li .snippet {
+    display: block;
+    padding: 0 0 0 22px;
+    line-height: 16px;
+    color: #888888;
+    height: 34px;
+    overflow: hidden; }
+#articles .splitter {
+  height: 20px;
+  padding-left: 10px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #666666;
+  line-height: 20px;
+  background: #f3f3f3;
+  border: 1px solid #9c9c9c;
+  border-left: 0;
+  border-right: 0; }
+  #articles .splitter:first-child {
+    border-top: 0;
+    margin-top: 5px; }
+#articles .splitter:first-child {
+  border-top: 1px solid #9c9c9c; }
+#articles .splitter + li {
+  border-top: 1px solid transparent; }
+#articles .splitter + li.selected {
+  padding-top: 0; }
+#articles li.no-border {
+  border-bottom: 1px solid transparent; }
+  #articles li.no-border.selected {
+    border-bottom: 1px solid #9c9c9c; }
+
+#post {
+  font-family: "Open Sans", "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 600px;
+  overflow: hidden;
+  margin: 0 auto;
+  padding: 0 25px; }
+  #post .post-link {
+    display: block;
+    position: relative;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    border: 1px solid transparent;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 0 white; }
+    #post .post-link .details {
+      font-weight: 400;
+      display: block;
+      font-size: 12px;
+      color: #666666; }
+    #post .post-link h1.title {
+      font-family: "Raleway", "Open Sans", "Ubuntu", sans-serif;
+      font-weight: 200;
+      font-size: 48px;
+      line-height: 1;
+      color: #4c4c4c;
+      padding-bottom: 10px;
+      margin: 0;
+      line-height: 1;
+      text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
+      max-width: 600px; }
+    #post .post-link:hover h1.title {
+      text-decoration: underline; }
+  #post strong {
+    font-weight: bold; }
+  #post em {
+    font-style: italic; }
+  #post table {
+    max-width: 600px;
+    width: 100%; }
+  #post img {
+    max-width: 100% !important;
+    box-sizing: border-box;
+    height: auto !important; }
+  #post img:not(.no-border), #post iframe {
+    /* images resize with window */
+    padding: 4px;
+    margin: 0 15px 15px auto;
+    display: table;
+    background-color: white;
+    border: none;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
+  #post p img:not(.no-border), #post p iframe {
+    margin: 15px auto; }
+  #post h1 {
+    font-family: "Open Sans", "Ubuntu", sans-serif;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1.5; }
+    #post h1 strong {
+      font-weight: inherit; }
+  #post h2 {
+    font-family: "Open Sans", "Ubuntu", sans-serif;
+    font-weight: 200;
+    font-size: 24px;
+    line-height: 28px;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
+    color: #4c4c4c; }
+    #post h2 strong {
+      font-weight: inherit; }
+  #post h3 {
+    font-size: 18px;
+    color: #4c4c4c;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01); }
+    #post h3 strong {
+      font-weight: inherit; }
+  #post a {
+    color: #08a8c5;
+    text-decoration: none; }
+    #post a:not(.post-link):hover {
+      text-decoration: underline; }
+    #post a.youtube {
+      display: block;
+      position: relative; }
+      #post a.youtube:after {
+        content: "";
+        position: absolute;
+        display: block;
+        top: 50%;
+        bottom: auto;
+        left: 50%;
+        right: auto;
+        width: 77px;
+        height: 77px;
+        margin: -37px 0 0 -37px;
+        z-index: 5;
+        background: url(../images/youtube.png); }
+  #post p, #post div, #post img {
+    max-width: 600px; }
+  #post a.hasImage {
+    border-bottom: 0; }
+  #post hr {
+    height: 2px;
+    border: 0;
+    background: url(../images/hr.png); }
+  #post blockquote {
+    font-style: italic; }
+
+#modal * {
+  -webkit-user-select: none; }
+#modal > div {
+  position: fixed;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  z-index: 300; }
+  #modal > div h3 {
+    margin: 20px 0 10px;
+    color: #4c4c4c;
+    padding: 0 25px;
+    font-size: 24px;
+    font-weight: 300;
+    font-family: "Raleway", "Open Sans", "Ubuntu", sans-serif; }
+  #modal > div p {
+    font-size: 13px;
+    color: #4c4c4c;
+    margin: 0 25px 15px;
+    line-height: 18px; }
+  #modal > div input {
+    width: 250px;
+    vertical-align: top;
+    font-size: 13px;
+    line-height: 20px;
+    border-radius: 2px 0 0 2px;
+    height: 20px;
+    outline: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-right: 0;
+    padding: 5px 10px;
+    background: url(../images/input_bg.png);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 white;
+    color: #444444;
+    margin-left: 25px;
+    -webkit-user-select: text; }
+    #modal > div input.isolated {
+      border-radius: 2px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      margin-top: 3px;
+      margin-bottom: 3px; }
+  #modal > div button {
+    text-decoration: none;
+    line-height: 27px;
+    padding: 0 10px;
+    height: 32px;
+    border-radius: 2px;
+    font-size: 13px;
+    font-weight: bold;
+    border: 1px solid #959595;
+    color: #242424;
+    font-family: "Open Sans", "Ubuntu Medium", "Ubuntu", "Helvetica", "Arial", sans-serif;
+    margin: 0 6px 25px;
+    background: -webkit-linear-gradient(top, white 0%, whitesmoke 100%); }
+    #modal > div button:focus {
+      outline: 0;
+      background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
+    #modal > div button:hover {
+      background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+    #modal > div button:active {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.1);
+      background: -webkit-linear-gradient(bottom, white 0%, whitesmoke 100%); }
+#modal .add {
+  top: 40%;
+  left: 50%;
+  margin-top: -52px;
+  margin-left: -190px;
+  width: 381px;
+  display: none; }
+  #modal .add h3:after {
+    width: 146px;
+    background: url(../images/modal_header_text.png); }
+  #modal .add button {
+    border-radius: 0 2px 2px 0;
+    width: 60px;
+    padding: 0;
+    margin: 0 25px 25px 0; }
+  #modal .add .error {
+    display: none;
+    margin-top: -15px; }
+#modal .confirm {
+  top: 40%;
+  left: 50%;
+  margin-top: -52px;
+  margin-left: -190px;
+  width: 340px;
+  text-align: center;
+  display: none; }
+  #modal .confirm h3:after {
+    background: url(../images/text_are_you_sure.png);
+    width: 100px; }
+  #modal .confirm .title {
+    font-weight: bold; }
+  #modal .confirm button {
+    width: 90px;
+    padding: 0; }
+#modal .rename {
+  top: 40%;
+  left: 50%;
+  margin-top: -52px;
+  margin-left: -190px;
+  width: 381px;
+  display: none; }
+  #modal .rename h3:after {
+    background: url(../images/text_rename_feed.png);
+    width: 98px; }
+  #modal .rename button {
+    border-radius: 0 2px 2px 0;
+    width: 60px;
+    padding: 0;
+    margin: 0 25px 25px 0; }
+#modal .pocket-login, #modal .instapaper-login {
+  top: 40%;
+  left: 50%;
+  margin-top: -52px;
+  margin-left: -190px;
+  width: 330px;
+  display: none; }
+  #modal .pocket-login button, #modal .instapaper-login button {
+    margin-left: 25px;
+    margin-top: 3px;
+    width: 272px; }
+
+#overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+  display: none;
+  background: rgba(0, 0, 0, 0.3);
+  top: 0;
+  left: 0; }
+
+#loading {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  z-index: 100; }
+  #loading * {
+    -webkit-user-select: none; }
+  #loading .login {
+    position: absolute;
+    display: block;
+    top: 50%;
+    bottom: auto;
+    left: 50%;
+    right: auto;
+    width: 300px;
+    margin-top: -200px;
+    margin-left: -150px;
+    height: 200px;
+    text-align: center;
+    display: none; }
+    #loading .login h3 {
+      text-align: center;
+      color: #4c4c4c;
+      text-shadow: 0 1px 0 white;
+      font-weight: 300;
+      font-family: "Raleway", "Open Sans", "Ubuntu", sans-serif;
+      font-size: 22px; }
+    #loading .login .password-wrapper,
+    #loading .login .username-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      border-radius: 2px;
+      height: 20px;
+      outline: none;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 5px 0 5px 10px;
+      width: 290px;
+      background: url(../images/input_bg.png);
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 white;
+      margin: 10px 0; }
+      #loading .login .password-wrapper label,
+      #loading .login .username-wrapper label {
+        text-align: left;
+        display: inline-block;
+        width: 80px;
+        color: #333333;
+        font-weight: 500; }
+      #loading .login .password-wrapper input,
+      #loading .login .username-wrapper input {
+        color: #444444;
+        outline: none;
+        border: none;
+        background: transparent;
+        width: 200px;
+        padding: 0;
+        margin: 0;
+        -webkit-user-select: text; }
+        #loading .login .password-wrapper input[type=password],
+        #loading .login .username-wrapper input[type=password] {
+          font: small-caption;
+          font-size: 16px; }
+    #loading .login a {
+      display: inline-block;
+      text-decoration: none;
+      line-height: 27px;
+      padding: 0;
+      margin: 0 5px;
+      width: 100px;
+      height: 30px;
+      box-sizing: border-box;
+      border-radius: 3px;
+      font-size: 13px;
+      font-weight: bold;
+      font-family: "Open Sans", "Ubuntu Medium", "Ubuntu", "Helvetica", "Arial", sans-serif;
+      border: 1px solid #959595;
+      color: #242424;
+      cursor: pointer;
+      background: -webkit-linear-gradient(top, white 0%, whitesmoke 100%); }
+      #loading .login a:focus {
+        outline: 0;
+        background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
+      #loading .login a:hover {
+        background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+      #loading .login a:active {
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.1);
+        background: -webkit-linear-gradient(bottom, white 0%, whitesmoke 100%); }
+    #loading .login .error {
+      display: none;
+      font-size: 13px;
+      font-weight: 500;
+      color: #2a76c6;
+      text-shadow: 0 1px 0 white, 0 1px 2px rgba(0, 0, 0, 0.1); }
+  #loading .progress {
+    position: absolute;
+    display: block;
+    top: 50%;
+    bottom: auto;
+    left: 25%;
+    right: 25%;
+    margin-top: -40px;
+    display: none; }
+    #loading .progress p {
+      text-align: center;
+      font-size: 13px;
+      color: #444444; }
+    #loading .progress progress {
+      width: 100%;
+      -webkit-appearance: none;
+      background-size: auto;
+      height: 18px;
+      border-radius: 3px;
+      box-shadow: 0 1px 0 white, inset 0 1px 5px rgba(0, 0, 0, 0.2); }
+      #loading .progress progress::-webkit-progress-bar {
+        background: #ffeeee;
+        border-radius: 3px; }
+      #loading .progress progress::-webkit-progress-value {
+        background: url(../images/ugly_native_progress_bar.png) 0 0;
+        border-radius: 3px;
+        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
+        border-left: 1px solid #bf5527;
+        border-right: 1px solid #bf5527; }
+
+@-webkit-keyframes move {
+  0% {
+    background-position: 0 -21px; }
+
+  100% {
+    background-position: 30px -21px; } }
+
+#context-menu {
+  -webkit-user-select: none;
+  min-width: 150px;
+  background: white;
+  position: absolute;
+  display: block;
+  top: 10px;
+  bottom: auto;
+  left: 10px;
+  right: auto;
+  z-index: 100;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  border: 1px solid white;
+  outline: 1px solid #ada9a5;
+  padding: 3px 0;
+  display: none; }
+  #context-menu .section {
+    display: block;
+    background: white;
+    border-top: 1px solid #e1e1df;
+    height: 1px;
+    margin: 3px 0; }
+  #context-menu div {
+    height: 20px;
+    line-height: 20px;
+    font-size: 12px;
+    padding: 0 0 0 24px;
+    font-weight: 400;
+    cursor: default;
+    position: relative;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent; }
+    #context-menu div:hover {
+      color: white;
+      border-top: 1px solid #5296de;
+      border-bottom: 1px solid #377fc9;
+      background: -webkit-linear-gradient(top, #74b0ee 0%, #4c91da 100%);
+      box-shadow: 0 1px 0 #91c1f3 inset, 0 -1px 0 #5b9adc inset;
+      text-shadow: 0 1px 0 #4c4c4c; }
+
+#settings {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: auto;
+  left: 50%;
+  right: auto;
+  margin: 0 0 0 -260px;
+  width: 520px;
+  height: 100%;
+  overflow-y: scroll;
+  background: #ececec;
+  border: 1px solid #888888;
+  border-top: 0;
+  border-bottom: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  z-index: 300;
+  display: none; }
+  #settings h2 {
+    margin-top: 0;
+    text-align: center;
+    font-size: 15px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0 white;
+    border-radius: 5px 5px 0 0;
+    background: -webkit-linear-gradient(top, #fafafa 0%, #f6f6f6 100%);
+    color: #3b3b3b;
+    text-shadow: 0 1px 0 #fcfcfc; }
+  #settings h3 {
+    margin: 20px 0 10px;
+    color: #4c4c4c;
+    padding: 0 25px;
+    font-size: 24px;
+    font-weight: 300;
+    font-family: "Raleway", "Open Sans", "Ubuntu", sans-serif; }
+  #settings > div {
+    padding: 10px 25px; }
+    #settings > div:first-of-type {
+      padding-top: 0; }
+    #settings > div:not(:last-child) {
+      border-bottom: 1px solid #cccccc;
+      box-shadow: 0 1px 0 white; }
+  #settings select {
+    font-size: 13px;
+    margin-bottom: 10px;
+    padding: 5px; }
+    #settings select option {
+      font-size: 13px; }
+  #settings label {
+    font-size: 13px;
+    color: #4c4c4c;
+    display: inline-block; }
+    #settings label.mini {
+      width: 150px;
+      text-align: right;
+      margin-right: 10px; }
+      #settings label.mini.right {
+        width: 120px; }
+    #settings label .email {
+      font-weight: bold; }
+  #settings input[type=checkbox] {
+    margin-left: 165px;
+    margin-right: 10px; }
+  #settings button {
+    display: inline-block;
+    text-decoration: none;
+    line-height: 27px;
+    padding: 0 10px;
+    margin: 0 5px 0 79px;
+    height: 30px;
+    box-sizing: border-box;
+    border-radius: 3px;
+    font-size: 13px;
+    font-weight: bold;
+    border: 1px solid #959595;
+    color: #4c4c4c;
+    font-family: "Open Sans", "Ubuntu Medium", "Ubuntu", "Helvetica", "Arial", sans-serif;
+    background: -webkit-linear-gradient(top, white 0%, whitesmoke 100%); }
+    #settings button:focus {
+      outline: 0;
+      background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
+    #settings button:hover {
+      background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+    #settings button:active {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.1);
+      background: -webkit-linear-gradient(bottom, white 0%, whitesmoke 100%); }
 \ No newline at end of file
 
=== added file 'data/media/app/index_elementary.html'
--- data/media/app/index_elementary.html	1970-01-01 00:00:00 +0000
+++ data/media/app/index_elementary.html	2013-02-27 22:46:21 +0000
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>RSS Reader</title>
+	<link rel="stylesheet" href="css/normalize.css">
+	<link rel="stylesheet" href="css/style_elementary.css">
+	
+	<script src="scripts/lib/pyctrl.js"></script>
+	<script src="scripts/lib.js"></script>
+	<script src="scripts/app.js"></script>
+	<script src="scripts/app/storage.js"></script>
+	<script src="scripts/app/ui.js"></script>
+	<script src="scripts/app/core.js"></script>
+	<script src="scripts/app/keys.js"></script>
+</head>
+<body>
+
+	<section id="app" class="splitter">
+
+		<div id="feeds-column">
+			<ul id="filters">
+				<li class="all filter selected">
+					<img class="icon" width="16" height="16" src="images/icon_all.png">
+					<span class="title">All items</span>
+				</li>
+				<li class="unread filter">
+					<img class="icon" width="16" height="16" src="images/icon_unread.png">
+					<span class="title">Unread</span>
+				</li>
+				<li class="starred filter">
+					<img class="icon" width="16" height="16" src="images/icon_starred.png">
+					<span class="title">Starred</span>
+				</li>
+			</ul>
+			<ul id="feeds"></ul>
+			<p class="empty-message">You have no feeds. Click on the + button below to add some.</p>
+			<div class="bar">
+				<button id="refresh-button" title="Refresh"></button><button id="add-button" title="Add Feed"></button>
+			</div>
+		</div>
+
+		<div id="right-side" class="splitter">
+
+			<div id="articles-column">
+				<ul id="articles"></ul>
+				<div class="bar">
+					<button id="mark-all-as-read-trigger" title="Mark All As Read"></button>
+					<div id="mark-all-as-read-popup">
+						<div id="mark-all-as-read-button">Mark All As Read</div>
+					</div>
+					<div id="item-count"></div>
+					<input id="search-input" placeholder="Search 10 items">
+					<button id="search-button" title="Search"></button>
+				</div>
+			</div>
+
+			<div id="post-column">
+				<div id="post-window">
+					<div id="post"></div>
+				</div>
+				<div class="bar" class="disabled">
+					<button id="close-post-button" title="Close Post"></button>
+					<button id="star-button" title="Toggle Star Status"></button>
+					<button id="read-button" title="Toggle Read Status"></button>
+					<button id="instapaper-button" title="View in Instapaper Mobilizer"></button>
+					<button id="share-button" title="Share">
+						<!-- <select>
+							<option value="0">Share to Pocket</option>
+							<option value="1">Share to Instapaper</option>
+						</select> -->
+					</button>
+					<div id="link-url"></div><button id="settings-button" title="Settings"></button>
+				</div>
+			</div>
+
+		</div>
+
+	</section>
+
+	<div id="hidden"></div>
+
+	<div id="modal">
+		<div class="add">
+			<span class="close"></span><h3>Subscribe to a Feed</h3>
+			<input placeholder="Feed URL or Search Term" type="url"><button>Add</button>
+			<p class="error">Could not add feed...</p>
+		</div>
+		<!-- <div class="logout">
+			This will log you out of Lightread
+			<button id="reset-button">Logout</button>
+		</div> -->
+		<div class="confirm">
+			<span class="close"></span><h3>Are you sure?</h3>
+			<p>Are you sure you want to unsubscribe from: <br><span class="title"></span>?</p><button class="yes">Yes</button><button class="no">No</button>
+		</div>
+		<div class="rename">
+			<span class="close"></span><h3>Rename Feed</h3>
+			<input type="text" placeholder="Feed name..."><button>Save</button>
+		</div>
+		<div class="pocket-login">
+			<span class="close"></span><h3>Login to Pocket</h3>
+			<input class="isolated" type="text" placeholder="Username...">
+			<br>
+			<input class="isolated" type="password" placeholder="Password...">
+			<br>
+			<button>Login</button>
+		</div>
+		<div class="instapaper-login">
+			<span class="close"></span><h3>Login to Instapaper</h3>
+			<input class="isolated" type="text" placeholder="Username...">
+			<br>
+			<input class="isolated" type="password" placeholder="Password...">
+			<br>
+			<button>Login</button>
+		</div>
+	</div>
+	<div id="settings">
+		<h3>Settings</h3>
+		<div>
+			<label for="">Signed in as: <span class="email"></span></label><button id="reset-button">Sign out</button>
+		</div>
+		<div>
+			<label class="mini" for="sync-interval">Refresh:</label>
+			<select id="sync-interval">
+				<option value="0">Manual</option>
+				<option value="1">1 Minute</option>
+				<option value="5">5 Minutes</option>
+				<option value="15">15 Minutes</option>
+				<option value="30">30 Minutes</option>
+				<option value="60">1 Hour</option>
+			</select>
+			<br>
+			<input type="checkbox" checked id="sync-on-start"><label for="sync-on-start">Sync on start</label>
+		</div>
+		<div>
+			<label class="mini" for="keep-unread-items">Keep unread items:</label>
+			<select id="keep-unread-items">
+				<option value="-1" selected>Always</option>
+				<option value="0">Never</option>
+				<option value="1">1 day</option>
+				<option value="2">2 days</option>
+				<option value="3">3 days</option>
+				<option value="7">1 week</option>
+				<option value="14">2 weeks</option>
+				<option value="31">1 month</option>
+			</select>
+			<label class="mini right" for="max-special">Max special items:</label>
+			<select id="max-special">
+				<option value="10">10</option>
+				<option value="20">20</option>
+				<option value="30">30</option>
+				<option value="50" selected>50</option>
+				<option value="70">70</option>
+				<option value="100">100</option>
+				<option value="150">150</option>
+				<option value="200">200</option>
+				<option value="300">300</option>
+				<option value="400">400</option>
+				<option value="500">500</option>
+			</select>
+			<br>
+			<label class="mini" for="keep-starred-items">Keep starred items:</label>
+			<select id="keep-starred-items">
+				<option value="-1" selected>Always</option>
+				<option value="0">Never</option>
+				<option value="1">1 day</option>
+				<option value="2">2 days</option>
+				<option value="3">3 days</option>
+				<option value="7">1 week</option>
+				<option value="14">2 weeks</option>
+				<option value="31">1 month</option>
+			</select>
+			<label class="mini right" for="max-read">Max read items:</label>
+			<select id="max-read">
+				<option value="0">None</option>
+				<option value="10">10</option>
+				<option value="20" selected>20</option>
+				<option value="30">30</option>
+				<option value="50">50</option>
+				<option value="70">70</option>
+				<option value="100">100</option>
+			</select>
+			<br>
+			<label class="mini" for="keep-read-items">Keep read items:</label>
+			<select id="keep-read-items">
+				<option value="-1">Always</option>
+				<option value="0">Never</option>
+				<option value="1">1 day</option>
+				<option value="2">2 days</option>
+				<option value="3">3 days</option>
+				<option value="7">1 week</option>
+				<option value="14" selected>2 weeks</option>
+				<option value="31">1 month</option>
+			</select>
+		</div>
+		<div>
+			<input type="checkbox" id="show-notifications" checked><label for="show-notifications">Show notifications</label>
+			<input type="checkbox" id="auto-instapaperizer"><label for="auto-instapaperizer">Auto Instapaper</label>
+			<input type="checkbox" id="night-mode"><label for="night-mode">Night Mode</label><br>
+			<input type="checkbox" id="remember-last-feed" checked><label for="remember-last-feed">Remember Last Feed</label>
+			<input type="checkbox" id="show-indicators"><label for="show-indicators">Show in messaging menu</label>
+			<input type="checkbox" id="run-background" disabled><label for="show-indicators">Run in background</label>
+		</div>
+	</div>
+
+	<div id="overlay"></div>
+
+	<div id="loading">
+		<div class="login">
+			<h3>Sign in to Google Reader</h3>
+			<div class="username-wrapper">
+				<label for="username">Email</label><input tabindex="1" id="username" type="text" placeholder="[e-mail]">
+			</div>
+			<div class="password-wrapper">
+				<label for="password">Password</label><input tabindex="2" id="password" type="password" placeholder="&#183;&#183;&#183;&#183;&#183;&#183;&#183;&#183;">
+			</div>
+			<a class="login-button">Sign in</a>
+			<a href="https://accounts.google.com/NewAccount?service=reader">Register</a>
+			<p class="error">Could not Sign in...</p>	
+		</div>
+		<div class="progress">
+			<p>Downloading items...</p>
+			<progress min="0" value="0" max="100"></progress>
+		</div>
+	</div>
+
+	<div id="context-menu"></div>
+
+	<!--
+		Templates
+	-->
+
+	<!-- Labels -->
+	<script type="text/template" id="label-template">
+		<li class="label">
+			<header data-id="<%= id %>">
+				<span class="icon"><span class="bit"></span></span>
+				<span class="title"><%= title %></span>
+				<% if (count && count > 0) { %>
+					<span class="count"><%= count %></span>
+				<% } %>
+			</header>
+			<ul class="feeds">
+
+				<% _.each(feeds, function(feed) { %><%= feed %><% }) %>
+
+			</ul>
+		</li>
+	</script>
+
+	<!-- Feeds -->
+	<script type="text/template" id="feed-template">
+		<li class="feed" data-id="<%= id %>">
+			<img class="icon" width="16" height="16" src="<%= icon %>">
+			<span class="title"><%= title %></span>
+			<% if (count && count > 0) { %>
+				<span class="count"><%= count %></span>
+			<% } %>
+		</li>
+	</script>
+
+	<!-- Articles -->
+	<script type="text/template" id="article-template">
+		<li class="article <% if (read) { %>read<% } %> <% if (starred) { %>starred<% } %>" data-id="<%= id %>">
+			<header>
+				<img class="icon" width="16" height="16" src="<%= icon %>">
+				<span class="feed"><%= feed %></span>
+				<span class="time"><%= time %></span>
+			</header>
+			<span class="title"><%= title %></span>
+			<span class="snippet"><%= snippet %></span>
+		</li>
+	</script>
+
+	<script type="text/template" id="article-splitter-template">
+		<div class="splitter"><%= date %></div>
+	</script>
+
+	<!-- Post -->
+	<script type="text/template" id="post-template">
+		<a href="<%= link %>" class="post-link">
+			<span class="details">
+				<%= feed %> | 
+				<% if (author !== undefined) {%><%= author %> | <% } %>
+				<%= time %>
+			</span>
+			<h1 class="title"><%= title %></h1>
+		</a>
+		<%= content %>
+	</script>
+
+	<!-- Context Menu Item -->
+	<script type="text/template" id="context-menu-item">
+		<div class="<%= className %>"><%= text %></div>
+		<% if (section) { %>
+			<span class="section"></span>
+		<% } %>
+	</script>
+</body>
+</html>
 
=== modified file 'debian/control'
--- debian/control	2012-10-03 03:35:42 +0000
+++ debian/control	2013-02-27 22:46:21 +0000
@@ -17,6 +17,7 @@
  gir1.2-indicate-0.7,
  gir1.2-gtk-3.0,
  gir1.2-glib-2.0,
+ gir1.2-granite-1.0,
  gir1.2-dbusmenu-glib-0.4,
  gir1.2-unity-5.0,
  gir1.2-soup-2.4,
 
=== modified file 'lightread/LightreadWindow.py'
--- lightread/LightreadWindow.py	2012-10-05 07:58:49 +0000
+++ lightread/LightreadWindow.py	2013-02-27 22:46:21 +0000
@@ -96,6 +96,18 @@
         session.add_feature(cookie_jar)
         session.props.max_conns_per_host = 8
 
+        # elementary OS HIG support
+        #getting env-var and try importing granite
+        #if one fails, we dont use elementary ui
+        self.elementary_ui = False
+        if(os.environ["DESKTOP_SESSION"] == "pantheon"):
+            try:
+                from gi.repository import Granite
+                self.elementary_ui = True
+                print "We use the elementary ui"
+            except ImportError:
+                pass
+
 
         self.webview = WebKit.WebView()
         self.scroller.add(self.webview)
@@ -104,7 +116,10 @@
         self.webviewsettings.set_property("javascript-can-open-windows-automatically", True)
         self.webviewsettings.set_property("enable-universal-access-from-file-uris", True)
         self.webviewsettings.set_property("enable-developer-extras", True)
-        self.webview.load_uri(get_media_file('app/index.html'))
+        if(self.elementary_ui):
+            self.webview.load_uri(get_media_file('app/index_elementary.html'))
+        else:
+            self.webview.load_uri(get_media_file('app/index.html'))
 
         self.webview_inspector = self.webview.get_inspector()
         self.webview_inspector.connect('inspect-web-view', self.inspect_webview)
@@ -113,7 +128,7 @@
         self.webview.show()
 
         #Menubar
-        self.add = self.builder.get_object("add")
+        self.add_btn = self.builder.get_object("add")
         self.refresh = self.builder.get_object("refresh")
         self.star = self.builder.get_object("star")
         self.read = self.builder.get_object("read")
@@ -225,12 +240,84 @@
                         else:
                             self.indicator.remove_indicator(urllib.unquote(feed_json['id']))
 
+
+        #building the elementary UI
+        if(self.elementary_ui):
+            vbox1 = self.builder.get_object("vbox1")
+            menubar1 = self.builder.get_object("menubar1")
+            #no menubars
+            vbox1.remove(menubar1)
+            toolbar = Gtk.Toolbar()
+
+            #add toolbarbuttons
+            button_add = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW)
+            toolbar.add(button_add)
+            button_add.set_name("add")
+            button_add.set_tooltip_text(self.add_btn.get_label())
+            button_add.connect("clicked", menuexternal, None)
+
+            button_refresh = Gtk.ToolButton.new_from_stock(Gtk.STOCK_REFRESH)
+            toolbar.add(button_refresh)
+            button_refresh.set_name("refresh")
+            button_refresh.set_tooltip_text(self.refresh.get_label())
+            button_refresh.connect("clicked", menuexternal, None)
+
+            button_star = Gtk.ToolButton.new_from_stock(Gtk.STOCK_ABOUT)
+            toolbar.add(button_star)
+            button_star.set_name("star")
+            button_star.set_tooltip_text(self.star.get_label())
+            button_star.connect("clicked", menuexternal, None)
+
+            button_read = Gtk.ToolButton.new_from_stock(Gtk.STOCK_COPY)
+            toolbar.add(button_read)
+            button_read.set_name("read")
+            button_read.set_tooltip_text(self.read.get_label())
+            button_read.connect("clicked", menuexternal, None)
+
+
+            button_next = Gtk.ToolButton.new_from_stock(Gtk.STOCK_GO_DOWN)
+            toolbar.add(button_next)
+            button_next.set_name("next-article")
+            button_next.set_tooltip_text(self.next_article.get_label())
+            button_next.connect("clicked", menuexternal, None)
+
+            button_previous = Gtk.ToolButton.new_from_stock(Gtk.STOCK_GO_UP)
+            toolbar.add(button_previous)
+            button_previous.set_name("prev-article")
+            button_previous.set_tooltip_text(self.prev_article.get_label())
+            button_previous.connect("clicked", menuexternal, None)
+
+            #spanner that the appmenu is on the right side
+            spanner = Gtk.ToolItem()
+            spanner.set_expand(True)
+            toolbar.add(spanner)
+
+            appmenu = Gtk.Menu()
+            #add the settings menu
+            self.logout.unparent()
+            appmenu.append(self.logout)
+            #add the contents of the helpmenu to the appmenu
+            help_menu = self.builder.get_object("helpMenu")
+            for i in help_menu.get_children():
+                i.unparent()
+                help_menu.remove(i)
+                appmenu.add(i)
+
+            button_appmenu = Granite.WidgetsAppMenu.new(appmenu)
+            toolbar.add(button_appmenu)
+
+
+            vbox1.pack_start(toolbar,False,False,0)
+            vbox1.remove(self.scroller)
+            vbox1.pack_end(self.scroller,True,True,0)
+            toolbar.show_all()
+
         # Connects to WebView
         self.webview.connect('title-changed', title_changed)
         self.webview.connect('navigation-requested', _navigation_requested_cb)
         self.webview.connect('console-message', console_message_cb)
 
-        self.add.connect("activate", menuexternal, None)
+        self.add_btn.connect("activate", menuexternal, None)
         self.refresh.connect("activate", menuexternal, None)
         self.star.connect("activate", menuexternal, None)
         self.read.connect("activate", menuexternal, None)
 
=== modified file 'po/lightread.pot'
--- po/lightread.pot	2012-10-05 07:58:49 +0000
+++ po/lightread.pot	2013-02-27 22:46:21 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2012-10-05 20:57+1300\n"
+"POT-Creation-Date: 2013-02-18 12:27+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"