Page 2 of 5

Re: Reeder Theme

Posted: 26 May 2013, 09:15
by sleeper_service
props for hosting it on github so all I have to do is a git pull to update.

Re: Reeder Theme

Posted: 27 May 2013, 23:54
by tschinz
I agree git is just awesome. The best versioning system out there.

I've just updated my first post with new screenshots. Some minor bugfixes and changes were made. in particular smaller font sizes, hover markup and better widescreen support.

Cheers

Re: Reeder Theme

Posted: 29 May 2013, 01:03
by poster000
Hi, how to make alignment of images and videos in the middle

Re: Reeder Theme

Posted: 29 May 2013, 18:50
by gitawego
very nice theme!!! thanks for your amazing work!

Re: Reeder Theme

Posted: 02 Jun 2013, 20:31
by tschinz
@poster000
I'm not sure if thats a good idea. Depending on the feed, the outcome will not always be pleasant.
To align images you can add the following code into your reeder.css just before /* Replace images */. It will center the images.

Code: Select all

/* Align images */
div.postContent img,
div.cdmContent img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@gitawego
thanks very much, glad you like it.

Re: Reeder Theme

Posted: 06 Jun 2013, 18:56
by kachaffeous
Awesome theme, but I'm partial to a white background so I hacked it up some. Hope you don't mind. Adding it here just in case anyone else was turned off by the color scheme.

Image

Code: Select all

/*
Tiny Tiny RSS Reeder Theme
Author: zas
Email: [email protected]
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);
@import "default.css";
/************************************************************
* Global Settings
*/
{
  font-family: 'Open Sans',sans-serif !important;
}

/*body,*/
div.hl.Content {
  font-size: 16px !important;
}

div.cdmContentInner p {
  max-width: 100% !important;
}
div.cdm.expanded div.cdmHeader a.title,
div.cdm.active div.cdmHeader a.title,
div.postTitle a{
  color: #000000;
  font-size: 18px !important;
}

span.hlContent {
  font-size: 12px !important;
  margin-right: -20px;
}

/************************************************************
* Sidebar

.dijitTree {
   background-image: url(reeder_img/reeder_stripes.png);
  color: #aba99d;
}
*/

#ttrssMain .dijitTreeExpando {
  background-image: url(reeder_img/tree-expand.png);
   position: relative;
   left: +10px;
}
#ttrssMain .dijitTreeExpandoLeaf {
  background-image: none;
}
#ttrssMain .dijitIconFolderOpen,
#ttrssMain .dijitFolderOpened {
   background: none;
}
#ttrssMain .dijitIconFolderClosed,
#ttrssMain .dijitFolderClosed {
   background: none;
}
#ttrssMain .dijitTreeRow,
#ttrssMain .dijitTreeNode .dojoDndItemBefore,
#ttrssMain .dijitTreeNode .dojoDndItemAfter {
  display: block;
  font-size: 12px;
  line-height: 20px;
   border: none;
}
#ttrssMain .dijitTreeRowHover,
#ttrssMain .dijitTreeNode .dojoDndItemBeforeHover,
#ttrssMain .dijitTreeNode .dojoDndItemAfterHover {
   background-image: url(reeder_img/reeder_stripes.png);
   color: #4f4e48;
}
#ttrssMain .dijitTreeRowSelected {
  color: #4f4e48;
}
#ttrssMain .dijitTreeLabel {
  vertical-align: text-top;
  margin: 0 8px;
}
#ttrssMain .dijitTreeIsRoot > .dijitTreeRow {
  border-top: 1px solid #bebcb0 !important;
  color: #4f4e48;
  display: block;
  font-size: 14px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#ttrssMain .dijitTreeIsRoot > .dijitTreeRowHover {
   background-image: url(reeder_img/reeder_stripes.png);
   color: #4f4e48;
}
#ttrssMain .dijitSplitterV,
#ttrssMain .dijitGutterV {
}
#ttrssMain .dijitSplitterVHover {
  background: #759dc0;
}

#ttrssMain .dijitToolbar {
  color: #4f4e48;
   border: none;
  padding: 6px 0 2px 4px;
}

div#headlines-toolbar,
{
   background-image: url(reeder_img/reeder_bg_bright.png);
    border-bottom: 1px solid #bebcb0 !important;
}

#ttrssMain div#headlines-wrap-inner,
div#headlines-frame {
}
#ttrssMain div#headlines-toolbar a,
#ttrssMain .dijitToolbar a {
  color: #5a6e93 !important;
}
#ttrssMain div#headlines-toolbar a:hover,
#ttrssMain .dijitToolbar a:hover {
  color: #404b5e !important;
}

#trssMain div#main-toolbar {
  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 30px;
   text-align: left;
}

.r {
   position: relative;
   right: -999px;
  width:0;
}

#ttrssMain .dijitToolbar .dijitToggleButton,
#ttrssMain .dijitToolbar .dijitButton,
#ttrssMain .dijitToolbar .dijitDropDownButton,
#ttrssMain .dijitToolbar .dijitComboButton {
  vertical-align: top;
}
#ttrssMain .dijitToolbar .actionChooser .dijitToggleButton,
#ttrssMain .dijitToolbar .actionChooser .dijitButton,
#ttrssMain .dijitToolbar .actionChooser .dijitDropDownButton,
#ttrssMain .dijitToolbar .actionChooser .dijitComboButton {
  vertical-align: middle;
}
#ttrssMain .dijitButton .dijitButtonNode,
#ttrssMain .dijitDropDownButton .dijitButtonNode,
#ttrssMain .dijitComboButton .dijitButtonNode,
#ttrssMain .dijitToggleButton .dijitButtonNode,
#ttrssMain .dijitSelect,
#ttrssMain .dijitSelect .dijitButtonContents,
#ttrssMain .dijitTextBox,
#ttrssMain .dijitTextBox .dijitButtonNode {
  border-radius: 3px !important;
  padding: 3px 6px !important;
}
#ttrssMain .dijitButtonHover .dijitButtonNode,
#ttrssMain .dijitDropDownButtonHover .dijitButtonNode,
#ttrssMain .dijitToggleButtonHover .dijitButtonNode,
#ttrssMain .dijitComboButtonHover .dijitButtonNode {
  border: 0 !important;
   border-color: #bebcb0;
   border-radius: 3px !important;
  background: #bebcb0 !important;
}
#ttrssMain .dijitSelect,
#ttrssMain .dijitSelect .dijitButtonContents,
#ttrssMain .dijitTextBox,
#ttrssMain .dijitTextBox .dijitButtonNode {
  padding: 1px 6px !important;
}
#ttrssMain .dijitSelect .dijitArrowButton {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
#ttrssMain .dijitSelectHover .dijitArrowButton {
  background: #aba99d !important;
  border: 0 !important;
}
#ttrssMain .dijitSelect .dijitArrowButtonInner,
#ttrssMain .dijitComboBox .dijitArrowButtonInner,
#ttrssMain .dijitArrowButtonInner {
  background: url(reeder_img/triangle_full_down.png) 50% 10%;
}
#ttrssMain .dijitSelectHover .dijitArrowButtonInner,
#ttrssMain .dijitComboBoxHover .dijitArrowButtonInner,
#ttrssMain .dijitArrowButtonInner {
  background-position: 50% 50% !important;
}
#ttrssMain .dijitMenu {
  border: 1px;
   border-color: #bebcb0;
}
#ttrssMain .dijitMenu td.dijitMenuItemLabel {
  font-size: 14px !important;
}
#ttrssMain .dijitSelectMenu .dijitMenuItemHover td,
#ttrssMain .dijitSelectMenu .dijitMenuItemSelected td,
#ttrssMain .dijitMenuItemHover,
#ttrssMain .dijitMenuItemSelected {
  background-image: none !important;
}
#ttrssMain .dijitSelectMenu .dijitMenuItemHover td td.dijitMenuItemLabel,
#ttrssMain .dijitSelectMenu .dijitMenuItemSelected td td.dijitMenuItemLabel,
#ttrssMain .dijitMenuItemHover td.dijitMenuItemLabel,
#ttrssMain .dijitMenuItemSelected td.dijitMenuItemLabel {
  color: #fafafa;
}
#ttrssMain .dijitSelectMenu .dijitMenuItem td,
#ttrssMain .dijitComboBoxMenu .dijitMenuItem {
  border: 0 !important;
  padding: 5px 6px !important;
}
#feedTree .counterNode,
#feedTree .counterNode.aux {
  background-color: #f5f5f5;
   color: #4f4e48;
   border-color: #bebcb0;
  border: 1;
  line-height: 16px;
  padding: 0 8px;
  top: 3px;
  min-width: 0;
  border-radius: 3px;
}
#feeds-holder,
#content-wrap {
  border-width: 0;
}

/****************************************************************************
* Groups
*/
div.cdmFeedTitle {
   background: #e9e6d7;
   background-image: url(reeder_img/reeder_bg_bright.png);

}

/****************************************************************************
* Posts
*/
div.cdm.expandable.Selected.active a,
div.cdm.expanded a,
div.hl.active.Selected a,
div.postReply a {
   text-shadow: none !important;
}

div.cdm.expandable.Selected.active a:hover,
div.cdm.active a:hover,
div.cdm.expanded a:hover,
div.hl.active.Selected a:hover,
div.postReply a:hover {
   color: #404b5e !important;
}

div.cdm.expandable,
div.cdm.expanded,
div.cdm.expanded.Unread,
div.cdm.expandable.Unread,
div#headlines-frame .hl {
   border: 1px solid #bebcb0;
   border-top: 1px solid #bebcb0;
   position:relative;
   margin-top: -1px;
}

div.cdm.expandable.Selected.active,
div.cdm.active {
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
  border: 1px solid #bebcb0;
  margin: 6px;
  position: relative;
}

div#headlines-frame .hl {
   border: 1px solid #bebcb0;
}

div.cdm.expanded.Selected.active,
div.content-insert{
   color: #15c;
   border: 1px solid #bebcb0;
  /*
   -moz-box-shadow:    0px 0px 20px 3px #636260;
  -webkit-box-shadow: 0px 0px 20px 3px #636260;
  box-shadow:         0px 0px 20px 3px #636260;
   margin: 20px;
   */
}

div#headlines-frame .hl,
div.cdmHeader {
}

div.cdmContent{
   padding: 10px;
}

div.cdmFooter {
   font-size: 12px !important;
   padding:10px;
}

div.hl.marked.active.Selected,
div.hl.active.Selected,
div.hl:hover,
div.cdmHeader:hover {
}

div.postTitle {
     margin-top: 30px;
   margin-left: 10px;
   margin-right: 10px;
   line-height: 35px;
   overflow: visible !important;
   white-space: normal !important;
}

div.postHeader {
  color: #ffffff;
  border-top: 1px solid #bebcb0 !important;
}
div.postContent,
div.dijitContentPane{
}


/* Remove functions I don't want */
div.cdmHeader .dijitCheckBox,
div#headlines-frame .dijitCheckBox
{
   width: 0 !important;
}

div.cdmHeader img[src*="images/pub_unset.svg"],
div#headlines-frame img[src*="images/pub_unset.svg"] {
  width: 0 !important;
}
div.cdmHeader img[src*="images/pub_set.svg"],
div#headlines-frame img[src*="images/pub_set.svg"] {
   width: 0 !important;
}
div.cdmHeader .hlScorePic,
div#headlines-frame .hlScorePic {
   width: 0 !important;
}

/* Replace images */

img[src*="plugins/mobilize/but.png"] {
  background: transparent url(reeder_img/mobilize.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/note/note.png"] {
  background: transparent url(reeder_img/note.png) 50% !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}


img[src*="images/tag.png"] {
  background: transparent url(reeder_img/tag.png) !important;
   height: 24px !important;
   padding-right: 24px;
   width: 0 !important;
   display: inline-block;
}

img[src*="images/pub_set.svg"] {
  background: transparent url(reeder_img/rss.png) !important;
   height: 24px !important;
   padding-right: 24px;
   width: 0 !important;
   display: inline-block;
}

img[src*="images/recently_read.png"] {
  background: transparent url(reeder_img/watch.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="images/fresh.png"] {
  background: transparent url(reeder_img/flash.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
 }

 img[src*="images/archive.png"] {
  background: transparent url(reeder_img/lock.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="images/mark_set.svg"] {
   background: transparent url(reeder_img/star_full.png) !important;
   height: 24px !important;
   padding-right: 24px;
   width: 0 !important;
  display: inline-block;
}

img[src*="images/mark_unset.svg"] {
  background: transparent url(reeder_img/star.png) no-repeat !important;
   height: 24px !important;
   padding-right: 24px;
  width: 0 !important;
   display: inline-block;
}

img[src*="images/indicator_white.gif"] {
  background: transparent url(reeder_img/loader-bars.gif) 50% 100% no-repeat !important;
  height: 16px !important;
   position: relative;
   left: -9px !important;
  padding-right: 16px;
  width: 0 !important;
  display: inline-block;
}
img[src*="images/indicator_tiny.gif"] {
  background: transparent url(reeder_img/loader-bars.gif) 50% 100% no-repeat !important;
  height: 11px !important;
  padding-right: 16px;
  width: 0 !important;
  display: inline-block;
}

 /* Replace plugin images */
img[src*="plugins/mail/mail.png"] {
  background: transparent url(reeder_img/mail.png) no-repeat !important;
   height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/share/share.png"] {
   background: transparent url(reeder_img/share.png) no-repeat !important;
   height: 24px !important;
   padding-right: 24px;
   width: 0 !important;
  display: inline-block;
}
img[src*="plugins/embed_original/button.png"] {
 background: transparent url(reeder_img/embed.png) no-repeat !important;
 height: 24px !important;
 padding-right: 24px;
 width: 0 !important;
 display: inline-block;
}


img[src*="plugins/inline_readability/readability.png"],
img[src*="plugins/readability/readability.png"],
img[src*="plugins/readability_mobile/readability_mobile.png"]
{
  background: transparent url(reeder_img/readability.png) no-repeat !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/evernote/evernote.png"] {
  background: transparent url(reeder_img/evernote.png) no-repeat !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

/*************************************************************************************
* Loader
*/
#overlay {
   background-image: url(reeder_img/tt-rss_logo.png);
   background-repeat: no-repeat, repeat;
  background-position: center 5%;
}
div.insensitive{
  color: #4f4e48;

}
#overlay_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -220px;
  text-align: center;
   background-image: url(reeder_img/reeder_stripes.png);
   -moz-box-shadow:    0px 0px 30px 0px #000000;
  -webkit-box-shadow: 0px 0px 30px 0px #000000;
  box-shadow:         0px 0px 30px 0px #000000;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
}
#overlay_inner .dijitProgressBar {
  display: inline-block;
  margin-top: 20px;
}
#overlay_inner .dijitProgressBarEmpty {
  border: 0;
}
#overlay_inner .dijitProgressBarTile {
  border-radius: 3px;
  background-color: #4f4e48;
}
#overlay_inner .dijitProgressBarFull {
  border: 0;
}


edit: Fixed non-combined mode

Re: Reeder Theme

Posted: 06 Jun 2013, 19:28
by rikels
kachaffeous wrote:Awesome theme, but I'm partial to a white background so I hacked it up some. Hope you don't mind. Adding it here just in case anyone else was turned off by the color scheme.

Image

Code: Select all

/*
Tiny Tiny RSS Reeder Theme
Author: zas
Email: [email protected]
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);
@import "default.css";
/************************************************************
* Global Settings
*/
{
  font-family: 'Open Sans',sans-serif !important;
}

/*body,*/
div.hl.Content {
  font-size: 16px !important;
}

div.cdmContentInner p {
  max-width: 100% !important;
}
div.cdm.expanded div.cdmHeader a.title,
div.cdm.active div.cdmHeader a.title,
div.postTitle a{
  color: #000000;
  font-size: 18px !important;
}

span.hlContent {
  font-size: 12px !important;
  margin-right: -20px;
}

/************************************************************
* Sidebar

.dijitTree {
        background-image: url(reeder_img/reeder_bg_dark.png);
        background-image: url(reeder_img/reeder_stripes.png), url(reeder_img/reeder_bg_dark.png);
  color: #aba99d;
}
*/

#ttrssMain .dijitTreeExpando {
  background-image: url(reeder_img/tree-expand.png);
        position: relative;
        left: +10px;
}
#ttrssMain .dijitTreeExpandoLeaf {
  background-image: none;
}
#ttrssMain .dijitIconFolderOpen,
#ttrssMain .dijitFolderOpened {
        background: none;
}
#ttrssMain .dijitIconFolderClosed,
#ttrssMain .dijitFolderClosed {
        background: none;
}
#ttrssMain .dijitTreeRow,
#ttrssMain .dijitTreeNode .dojoDndItemBefore,
#ttrssMain .dijitTreeNode .dojoDndItemAfter {
  display: block;
  font-size: 12px;
  line-height: 20px;
        border: none;
}
#ttrssMain .dijitTreeRowHover,
#ttrssMain .dijitTreeNode .dojoDndItemBeforeHover,
#ttrssMain .dijitTreeNode .dojoDndItemAfterHover {
        background-image: url(reeder_img/reeder_stripes.png);
        color: #4f4e48;
}
#ttrssMain .dijitTreeRowSelected {
  color: #4f4e48;
}
#ttrssMain .dijitTreeLabel {
  vertical-align: text-top;
  margin: 0 8px;
}
#ttrssMain .dijitTreeIsRoot > .dijitTreeRow {
  border-top: 1px solid #bebcb0 !important;
  color: #4f4e48;
  display: block;
  font-size: 14px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#ttrssMain .dijitTreeIsRoot > .dijitTreeRowHover {
        background-image: url(reeder_img/reeder_stripes.png);
        color: #4f4e48;
}
#ttrssMain .dijitSplitterV,
#ttrssMain .dijitGutterV {
}
#ttrssMain .dijitSplitterVHover {
  background: #759dc0;
}

#ttrssMain .dijitToolbar {
  color: #4f4e48;
        border: none;
  padding: 6px 0 2px 4px;
}

div#headlines-toolbar,
{
        background-image: url(reeder_img/reeder_bg_bright.png);
        border-bottom: 1px solid #bebcb0 !important;
}

#ttrssMain div#headlines-wrap-inner,
div#headlines-frame {
}
#ttrssMain div#headlines-toolbar a,
#ttrssMain .dijitToolbar a {
  color: #5a6e93 !important;
}
#ttrssMain div#headlines-toolbar a:hover,
#ttrssMain .dijitToolbar a:hover {
  color: #404b5e !important;
}

#trssMain div#main-toolbar {
  position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 30px;
        text-align: left;
}

.r {
        position: relative;
        right: -999px;
  width:0;
}

#ttrssMain .dijitToolbar .dijitToggleButton,
#ttrssMain .dijitToolbar .dijitButton,
#ttrssMain .dijitToolbar .dijitDropDownButton,
#ttrssMain .dijitToolbar .dijitComboButton {
  vertical-align: top;
}
#ttrssMain .dijitToolbar .actionChooser .dijitToggleButton,
#ttrssMain .dijitToolbar .actionChooser .dijitButton,
#ttrssMain .dijitToolbar .actionChooser .dijitDropDownButton,
#ttrssMain .dijitToolbar .actionChooser .dijitComboButton {
  vertical-align: middle;
}
#ttrssMain .dijitButton .dijitButtonNode,
#ttrssMain .dijitDropDownButton .dijitButtonNode,
#ttrssMain .dijitComboButton .dijitButtonNode,
#ttrssMain .dijitToggleButton .dijitButtonNode,
#ttrssMain .dijitSelect,
#ttrssMain .dijitSelect .dijitButtonContents,
#ttrssMain .dijitTextBox,
#ttrssMain .dijitTextBox .dijitButtonNode {
  border-radius: 3px !important;
  padding: 3px 6px !important;
}
#ttrssMain .dijitButtonHover .dijitButtonNode,
#ttrssMain .dijitDropDownButtonHover .dijitButtonNode,
#ttrssMain .dijitToggleButtonHover .dijitButtonNode,
#ttrssMain .dijitComboButtonHover .dijitButtonNode {
  border: 0 !important;
        border-color: #bebcb0;
        border-radius: 3px !important;
  background: #bebcb0 !important;
}
#ttrssMain .dijitSelect,
#ttrssMain .dijitSelect .dijitButtonContents,
#ttrssMain .dijitTextBox,
#ttrssMain .dijitTextBox .dijitButtonNode {
  padding: 1px 6px !important;
}
#ttrssMain .dijitSelect .dijitArrowButton {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
#ttrssMain .dijitSelectHover .dijitArrowButton {
  background: #aba99d !important;
  border: 0 !important;
}
#ttrssMain .dijitSelect .dijitArrowButtonInner,
#ttrssMain .dijitComboBox .dijitArrowButtonInner,
#ttrssMain .dijitArrowButtonInner {
  background: url(reeder_img/triangle_full_down.png) 50% 10%;
}
#ttrssMain .dijitSelectHover .dijitArrowButtonInner,
#ttrssMain .dijitComboBoxHover .dijitArrowButtonInner,
#ttrssMain .dijitArrowButtonInner {
  background-position: 50% 50% !important;
}
#ttrssMain .dijitMenu {
  border: 1px;
        border-color: #bebcb0;
}
#ttrssMain .dijitMenu td.dijitMenuItemLabel {
  font-size: 14px !important;
}
#ttrssMain .dijitSelectMenu .dijitMenuItemHover td,
#ttrssMain .dijitSelectMenu .dijitMenuItemSelected td,
#ttrssMain .dijitMenuItemHover,
#ttrssMain .dijitMenuItemSelected {
  background-image: none !important;
}
#ttrssMain .dijitSelectMenu .dijitMenuItemHover td td.dijitMenuItemLabel,
#ttrssMain .dijitSelectMenu .dijitMenuItemSelected td td.dijitMenuItemLabel,
#ttrssMain .dijitMenuItemHover td.dijitMenuItemLabel,
#ttrssMain .dijitMenuItemSelected td.dijitMenuItemLabel {
  color: #fafafa;
}
#ttrssMain .dijitSelectMenu .dijitMenuItem td,
#ttrssMain .dijitComboBoxMenu .dijitMenuItem {
  border: 0 !important;
  padding: 5px 6px !important;
}
#feedTree .counterNode,
#feedTree .counterNode.aux {
  background-color: #f5f5f5;
        color: #4f4e48;
        border-color: #bebcb0;
  border: 1;
  line-height: 16px;
  padding: 0 8px;
  top: 3px;
  min-width: 0;
  border-radius: 3px;
}
#feeds-holder,
#content-wrap {
  border-width: 0;
}

/****************************************************************************
* Groups
*/
div.cdmFeedTitle {
        background: #e9e6d7;
        background-image: url(reeder_img/reeder_bg_bright.png);

}

/****************************************************************************
* Posts
*/
div.cdm.expandable.Selected.active a,
div.cdm.expanded a,
div.hl.active.Selected a,
div.postReply a {
        text-shadow: none !important;
}

div.cdm.expandable.Selected.active a:hover,
div.cdm.active a:hover,
div.cdm.expanded a:hover,
div.hl.active.Selected a:hover,
div.postReply a:hover {
        color: #404b5e !important;
}

div.cdm.expandable,
div.cdm.expanded,
div.cdm.expanded.Unread,
div.cdm.expandable.Unread,
div#headlines-frame .hl {
        border: 1px solid #bebcb0;
        border-top: 1px solid #bebcb0;
        position:relative;
        margin-top: -1px;
}

div.cdm.expandable.Selected.active,
div.cdm.active {
        background-image: url(reeder_img/reeder_bg_dark.png);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
  border: 1px solid #bebcb0;
  margin: 6px;
  position: relative;
}

div#headlines-frame .hl {
  background-image: url(reeder_img/reeder_bg_dark.png);
        border: 1px solid #bebcb0;
}

div.cdm.expanded.Selected.active,
div.content-insert{
        color: #15c;
        border: 1px solid #bebcb0;
  /*
        -moz-box-shadow:    0px 0px 20px 3px #636260;
  -webkit-box-shadow: 0px 0px 20px 3px #636260;
  box-shadow:         0px 0px 20px 3px #636260;
        margin: 20px;
        */
}

div#headlines-frame .hl,
div.cdmHeader {
  background-image: url(reeder_img/reeder_bg_dark.png);
}

div.cdmContent{
        padding: 10px;
}

div.cdmFooter {
        font-size: 12px !important;
        padding:10px;
}

div.hl.marked.active.Selected,
div.hl.active.Selected,
div.hl:hover,
div.cdmHeader:hover {
  background-image: url(reeder_img/reeder_bg_darker.png) !important;
}

div.postTitle {
        margin-top: 30px;
        margin-left: 10px;
        margin-right: 10px;
        line-height: 35px;
        overflow: visible !important;
        white-space: normal !important;
}

div.postHeader {
  color: #ffffff;
  background-image: url(reeder_img/reeder_bg_dark.png) !important;
  border-top: 1px solid #bebcb0 !important;
}
div.postContent,
div.dijitContentPane{
}


/* Remove functions I don't want */
div.cdmHeader .dijitCheckBox,
div#headlines-frame .dijitCheckBox
{
        width: 0 !important;
}

div.cdmHeader img[src*="images/pub_unset.svg"],
div#headlines-frame img[src*="images/pub_unset.svg"] {
  width: 0 !important;
}
div.cdmHeader img[src*="images/pub_set.svg"],
div#headlines-frame img[src*="images/pub_set.svg"] {
        width: 0 !important;
}
div.cdmHeader .hlScorePic,
div#headlines-frame .hlScorePic {
        width: 0 !important;
}

/* Replace images */

img[src*="plugins/mobilize/but.png"] {
  background: transparent url(reeder_img/mobilize.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/note/note.png"] {
  background: transparent url(reeder_img/note.png) 50% !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}


img[src*="images/tag.png"] {
  background: transparent url(reeder_img/tag.png) !important;
        height: 24px !important;
        padding-right: 24px;
        width: 0 !important;
        display: inline-block;
}

img[src*="images/pub_set.svg"] {
  background: transparent url(reeder_img/rss.png) !important;
        height: 24px !important;
        padding-right: 24px;
        width: 0 !important;
        display: inline-block;
}

img[src*="images/recently_read.png"] {
  background: transparent url(reeder_img/watch.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="images/fresh.png"] {
  background: transparent url(reeder_img/flash.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
 }

 img[src*="images/archive.png"] {
  background: transparent url(reeder_img/lock.png) !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="images/mark_set.svg"] {
        background: transparent url(reeder_img/star_full.png) !important;
        height: 24px !important;
        padding-right: 24px;
        width: 0 !important;
  display: inline-block;
}

img[src*="images/mark_unset.svg"] {
  background: transparent url(reeder_img/star.png) no-repeat !important;
        height: 24px !important;
        padding-right: 24px;
  width: 0 !important;
        display: inline-block;
}

img[src*="images/indicator_white.gif"] {
  background: transparent url(reeder_img/loader-bars.gif) 50% 100% no-repeat !important;
  height: 16px !important;
        position: relative;
        left: -9px !important;
  padding-right: 16px;
  width: 0 !important;
  display: inline-block;
}
img[src*="images/indicator_tiny.gif"] {
  background: transparent url(reeder_img/loader-bars.gif) 50% 100% no-repeat !important;
  height: 11px !important;
  padding-right: 16px;
  width: 0 !important;
  display: inline-block;
}

 /* Replace plugin images */
img[src*="plugins/mail/mail.png"] {
  background: transparent url(reeder_img/mail.png) no-repeat !important;
        height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/share/share.png"] {
        background: transparent url(reeder_img/share.png) no-repeat !important;
        height: 24px !important;
        padding-right: 24px;
        width: 0 !important;
  display: inline-block;
}
img[src*="plugins/embed_original/button.png"] {
 background: transparent url(reeder_img/embed.png) no-repeat !important;
 height: 24px !important;
 padding-right: 24px;
 width: 0 !important;
 display: inline-block;
}


img[src*="plugins/inline_readability/readability.png"],
img[src*="plugins/readability/readability.png"],
img[src*="plugins/readability_mobile/readability_mobile.png"]
{
  background: transparent url(reeder_img/readability.png) no-repeat !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

img[src*="plugins/evernote/evernote.png"] {
  background: transparent url(reeder_img/evernote.png) no-repeat !important;
  height: 24px !important;
  padding-right: 24px;
  width: 0 !important;
  display: inline-block;
}

/*************************************************************************************
* Loader
*/
#overlay {
        background-image: url(reeder_img/tt-rss_logo.png);
        background-repeat: no-repeat, repeat;
  background-position: center 5%;
}
div.insensitive{
  color: #4f4e48;

}
#overlay_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -220px;
  text-align: center;
        background-image: url(reeder_img/reeder_stripes.png);
        -moz-box-shadow:    0px 0px 30px 0px #000000;
  -webkit-box-shadow: 0px 0px 30px 0px #000000;
  box-shadow:         0px 0px 30px 0px #000000;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
}
#overlay_inner .dijitProgressBar {
  display: inline-block;
  margin-top: 20px;
}
#overlay_inner .dijitProgressBarEmpty {
  border: 0;
}
#overlay_inner .dijitProgressBarTile {
  border-radius: 3px;
  background-color: #4f4e48;
}
#overlay_inner .dijitProgressBarFull {
  border: 0;
}



Thanks, this does make it look more like Greader, and uses less bandwith, as it's loading less pictures.

Re: Reeder Theme

Posted: 06 Jun 2013, 20:01
by tschinz
Hello guys,
of course I don't mind, do as you like.
You could also fork it on Github so you don't have to post code here. Fork on Github takes up one click....

But I don't understand why so many want Greader look. It was the worst look possible, truly terrible. But I like the white though of the Reeder theme fork ;-)

Re: Reeder Theme

Posted: 15 Jun 2013, 11:39
by HeikoAdams
Hi, could you please enable word-wrapping for long titles?

Re: Reeder Theme

Posted: 15 Jun 2013, 13:41
by tschinz
Hello Heiko,

hmm do you have to lastest version? My titles and feed entries wrap automatically in Combined Feed Mode and 3 Coulumn Mode.
Could you specify more clearly.

PS: Open Sans works now properly thanks to mchiron

Cheers

Re: Reeder Theme

Posted: 15 Jun 2013, 13:52
by HeikoAdams
Yes, I'm using the latest version and long titles are looking like this:

Re: Reeder Theme

Posted: 16 Jun 2013, 01:11
by tschinz
Hello Heiko,

I checked and on my version the word wrap is enabled, see screenshot. I'll make some test next week and will get back to you.

54  Tiny Tiny RSS.png
54 Tiny Tiny RSS.png (149.56 KiB) Viewed 6753 times


Cheers

Re: Reeder Theme

Posted: 16 Jun 2013, 21:50
by tschinz
Hello,

I saw that my current trunk version was a bit different then the last github version. Please check if the word wrap work with that.

I also added images for facebook, twitter and google plus and integrated OpenSans font better

screenshots and desciption on the first post are updated.

Cheers

Re: Reeder Theme

Posted: 16 Jun 2013, 23:31
by HeikoAdams
I did some investigations on that problem and it looks like

Code: Select all

span.titleWrap {
    white-space: nowrap;
}

breaks word-wrapping. If I change the white-space rule to "normal" word-wrapping works fine.

Re: Reeder Theme

Posted: 27 Jun 2013, 19:57
by msilvya
Could someone help me out with why this is happening in Firefox. Any way I can fix this? :(

Image