[Theme][Github] Reeder Theme

Post plugins and custom CSS snippets here
User avatar
sleeper_service
Bear Rating Overlord
Bear Rating Overlord
Posts: 881
Joined: 30 Mar 2013, 23:50
Location: Dallas, Texas

Re: Reeder Theme

Postby sleeper_service » 26 May 2013, 09:15

props for hosting it on github so all I have to do is a git pull to update.

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 27 May 2013, 23:54

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

poster000
I Can't Search Before Posting
Posts: 2
Joined: 10 Apr 2013, 03:54
Contact:

Re: Reeder Theme

Postby poster000 » 29 May 2013, 01:03

Hi, how to make alignment of images and videos in the middle

gitawego
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 08 May 2013, 00:35

Re: Reeder Theme

Postby gitawego » 29 May 2013, 18:50

very nice theme!!! thanks for your amazing work!

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 02 Jun 2013, 20:31

@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.

kachaffeous
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 06 Jun 2013, 18:48

Re: Reeder Theme

Postby kachaffeous » 06 Jun 2013, 18:56

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: zaswiki@gmail.com
*/
@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
Last edited by kachaffeous on 07 Jun 2013, 03:06, edited 1 time in total.

rikels
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 02 Jun 2013, 13:51

Re: Reeder Theme

Postby rikels » 06 Jun 2013, 19:28

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: zaswiki@gmail.com
*/
@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.

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 06 Jun 2013, 20:01

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 ;-)

User avatar
HeikoAdams
Bear Rating Master
Bear Rating Master
Posts: 101
Joined: 19 Mar 2013, 00:17

Re: Reeder Theme

Postby HeikoAdams » 15 Jun 2013, 11:39

Hi, could you please enable word-wrapping for long titles?

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 15 Jun 2013, 13:41

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

User avatar
HeikoAdams
Bear Rating Master
Bear Rating Master
Posts: 101
Joined: 19 Mar 2013, 00:17

Re: Reeder Theme

Postby HeikoAdams » 15 Jun 2013, 13:52

Yes, I'm using the latest version and long titles are looking like this:
Attachments
(26) Tiny Tiny RSS 2013-06-15 11-50-53.png
(26) Tiny Tiny RSS 2013-06-15 11-50-53.png (145.24 KiB) Viewed 4462 times

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 16 Jun 2013, 01:11

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 4394 times


Cheers

User avatar
tschinz
Bear Rating Trainee
Bear Rating Trainee
Posts: 36
Joined: 22 May 2013, 21:52
Contact:

Re: Reeder Theme

Postby tschinz » 16 Jun 2013, 21:50

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

User avatar
HeikoAdams
Bear Rating Master
Bear Rating Master
Posts: 101
Joined: 19 Mar 2013, 00:17

Re: Reeder Theme

Postby HeikoAdams » 16 Jun 2013, 23:31

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.

msilvya
Bear Rating Trainee
Bear Rating Trainee
Posts: 12
Joined: 25 Jun 2013, 21:06

Re: Reeder Theme

Postby msilvya » 27 Jun 2013, 19:57

Could someone help me out with why this is happening in Firefox. Any way I can fix this? :(

Image


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 2 guests