Google Reader theme

Post plugins and custom CSS snippets here
User avatar
dxbi
Bear Rating Disaster
Bear Rating Disaster
Posts: 62
Joined: 16 Mar 2013, 13:44

Re: Google Reader theme

Postby dxbi » 16 Mar 2013, 14:11

To get the feed title in front of the article header use something like this (in Preferences -> Customize Stylesheet):

Code: Select all

/* move feed info to the left */
div.cdmHeader span.hlFeed {
    float: left;
    max-width: 50px;
    overflow: hidden;
    margin-right: 10px;
    white-space: nowrap;
}


Or (if you don't like the feed name being moved down when the title of the article gets too long):

Code: Select all

div.cdmHeader span.hlFeed {
    float: left;
    max-width: 14%;
    overflow: hidden;
    white-space: nowrap;
}
div.cdmHeader span.titleWrap a.title {
    float: right;
    width: 85%;
}

rmtew
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 17 Mar 2013, 00:11

Re: Google Reader theme

Postby rmtew » 17 Mar 2013, 01:44

Here's my list of user Reader interface changes required, for tt-rss (which I've installed a personal instance of) to be as comfortable as Google Reader to use FOR ME. The reason I emphasize FOR ME is that I imagine that there's a different combination of appreciated Reader features for every unique snowflake out there that currently uses it :D

It's ordered from most important feature to least important:
  • Articles should be readable in order of publication. If a blog is posting a series of articles, reading the last post of the series before the first makes no sense.
  • Keyboard shortcuts that are not only similar to Google Reader, but configurable to opt out of those that I don't want.
  • Selecting a category should go straight into combined view, rather than showing me the article list, and then requiring me to select a first article.
I've tried the Google Reader plugin for keyboard shortcuts, and I can't tell if it makes a difference. I expect it maps in some keyboard shortcuts that someone uses in Google Reader, but they're not the one's I use, and it works differently for me than Google Reader does.

Reil
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 17 Mar 2013, 02:05

Re: Google Reader theme

Postby Reil » 17 Mar 2013, 02:07

rmtew wrote:
  • Articles should be readable in order of publication. If a blog is posting a series of articles, reading the last post of the series before the first makes no sense.

Preferences -> Reverse headline order (oldest first)

Should cover you. :3

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: Google Reader theme

Postby levito » 17 Mar 2013, 04:30

Sorry, missed some fixes for the theme. Here is the revised CSS:

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.claro .dijitToolbar .dijitButton .dijitButtonNode,
.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboBox .dijitButtonNode {
   -moz-transition: background-color, border-color, color;
   -webkit-transition-property: background-color, border-color, color;
   transition: background-color, border-color, color;
}


/* some style */
#feeds-holder,
#content-wrap,
#headlines-frame {
   border: none;
}
#ttrssMain #headlines-toolbar,
#ttrssMain .dijitToolbar,
#ttrssMain .cdmHeader {
   background-color: transparent;
   border-color: transparent;
}
#ttrssMain .cdm {
   margin: 1em;
   border: 1px solid #ddd !important;
   box-shadow: 0 0 4px rgba(0,0,0,.1);
   background: #fff !important;
}
#ttrssMain .cdm.Selected {
   border-left-color: #4d90f0 !important;
   background: #fff !important;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background-color: #fafafa;
}

.titleWrap .title {
   font-size: 1.5em;
   font-weight: bold;
   color: #444;
}
.Unread .titleWrap .title {
   color: #15c;
}
.Selected .title,
html div.cdmContent a {
   color: #15c;
}
div.cdmHeader span.hlFeed {
   padding-top: .5em;
}

rmtew
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 17 Mar 2013, 00:11

Re: Google Reader theme

Postby rmtew » 17 Mar 2013, 04:35

rmtew wrote:
  • Articles should be readable in order of publication. If a blog is posting a series of articles, reading the last post of the series before the first makes no sense.
  • Keyboard shortcuts that are not only similar to Google Reader, but configurable to opt out of those that I don't want.
  • Selecting a category should go straight into combined view, rather than showing me the article list, and then requiring me to select a first article.

After some playing and some source code reading, I've come up with the following that get me pretty close to how I use Google Reader. As these persist in the database, they only need to be done once.
  • In the main view, select "Unread" as the "show article" drop down setting.
  • In the Preferences menu, turn on "Combined feed display".
  • In the Preferences menu, turn on "Automatically expand articles in combined mode" (requires checking "Show additional preferences").
  • In the main view, press "f" then "x", to reverse the article sorting to be oldest to newest.
I can do my own plugin for Google Reader keyboard shortcuts.

kashub
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 17 Mar 2013, 09:18
Location: Poland
Contact:

Re: Google Reader theme

Postby kashub » 17 Mar 2013, 09:33

levito wrote:Sorry, missed some fixes for the theme. Here is the revised CSS: (...)

Thanks for that. Looks very similar to Google Reader.

kashub
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 17 Mar 2013, 09:18
Location: Poland
Contact:

Re: Google Reader theme

Postby kashub » 17 Mar 2013, 11:01

I made one change - removed

Code: Select all

font-weight: bold;
from the

Code: Select all

.titleWrap .title {...}
to see the difference between read and unread.

Erhnam
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 17 Mar 2013, 17:34

Re: Google Reader theme

Postby Erhnam » 17 Mar 2013, 17:36

fox wrote: disable expand articles automatically


I've been trying to look this up, but I can't find this option. Can you please be more specific about the name of the checkbox?

Edit found it. The name of the checkbox is:

"Automatically expand articles in combined mode": disabled
Combined feed display: enabled
Last edited by Erhnam on 17 Mar 2013, 17:39, edited 1 time in total.

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: Google Reader theme

Postby fox » 17 Mar 2013, 17:38

Enable additional options first (checkbox at the bottom), then you'll see it. Automatically expand articles in combined mode.

rmtew
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 17 Mar 2013, 00:11

Re: Google Reader theme

Postby rmtew » 17 Mar 2013, 23:00

Reil wrote:
rmtew wrote:
  • Articles should be readable in order of publication. If a blog is posting a series of articles, reading the last post of the series before the first makes no sense.

Preferences -> Reverse headline order (oldest first)

Should cover you. :3

I don't have this in my preferences (1.7.4 tarball from website):
Image

rmtew
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 17 Mar 2013, 00:11

Re: Google Reader theme

Postby rmtew » 18 Mar 2013, 00:57

levito wrote:Sorry, missed some fixes for the theme. Here is the revised CSS:


Thanks for that. I've made some additional changes, to get the more subtle selected article white background with blue left hand side that Reader has. Also I override the default background color for odd or even entries (one or the other gets a grey background with default tt-rss css).

Image

Specific change:

Code: Select all

.odd, .even {
   background-color: #ffffff ! important;
}
.odd.Selected, .even.Selected, .odd.Unread.Selected, .even.Unread.Selected {
   background-color: #ffffff ! important;
   border: 1px solid #dddddd ! important;
   border-left-color: #4d90f0 ! important;
   box-shadow: 0 0 4px #e3e5eb ! important;
}


Entire CSS:

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.claro .dijitToolbar .dijitButton .dijitButtonNode,
.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboBox .dijitButtonNode {
   -moz-transition: background-color, border-color, color;
   -webkit-transition-property: background-color, border-color, color;
   transition: background-color, border-color, color;
}


/* some style */
#feeds-holder,
#content-wrap,
#headlines-frame {
   border: none;
}
#ttrssMain #headlines-toolbar,
#ttrssMain .dijitToolbar,
#ttrssMain .cdmHeader {
   background-color: transparent;
   border-color: transparent;
}
#ttrssMain .cdm {
   margin: 1em;
   border: 1px solid #ddd !important;
   box-shadow: 0 0 4px rgba(0,0,0,.1);
   background: #fff !important;
}
#ttrssMain .cdm.Selected {
   border-left-color: #4d90f0 !important;
   background: #fff !important;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background-color: #fafafa;
}

.titleWrap .title {
   font-size: 1.5em;
   color: #444;
}
.Unread .titleWrap .title {
   color: #15c;
}
.odd, .even {
   background-color: #ffffff ! important;
}
.odd.Selected, .even.Selected, .odd.Unread.Selected, .even.Unread.Selected {
   background-color: #ffffff ! important;
   border: 1px solid #dddddd ! important;
   border-left-color: #4d90f0 ! important;
   box-shadow: 0 0 4px #e3e5eb ! important;
}
div.cdmHeader span.hlFeed {
   padding-top: .5em;
}

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: Google Reader theme

Postby levito » 18 Mar 2013, 01:41

rmtew wrote:Thanks for that. I've made some additional changes, to get the more subtle selected article white background with blue left hand side that Reader has. Also I override the default background color for odd or even entries (one or the other gets a grey background with default tt-rss css).


I have actually done that, but based on the code from github. There we have the class "cdm" for every article.

Here is a more updated code, now with tuned margins and styled feed headlines:

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.claro .dijitToolbar .dijitButton .dijitButtonNode,
.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboBox .dijitButtonNode {
   -moz-transition: background-color, border-color, color;
   -webkit-transition-property: background-color, border-color, color;
   transition: background-color, border-color, color;
}


/* some style */
body#ttrssMain,
a,
.titleWrap .title  {
   color: #444;
}
a:hover,
.Unread .titleWrap .title,
.Selected .titleWrap .title,
html div.cdmContent a {
   color: #15c;
}
#feeds-holder,
#content-wrap,
#headlines-frame {
   border: none;
}
#ttrssMain #headlines-toolbar,
#ttrssMain .dijitToolbar,
#ttrssMain .cdmHeader {
   background: #fff;
   border-color: transparent;
}
#ttrssMain #headlines-toolbar {
   border-color: #ebebeb;
}
#ttrssMain .cdm {
   margin: 5px 25px 10px 5px;
   border: 1px solid #ddd !important;
   box-shadow: 0 0 4px rgba(0,0,0,.1);
   background: #fff !important;
}
#ttrssMain .cdm.Selected {
   border-left-color: #4d90f0 !important;
   background: #fff !important;
}
#ttrssMain .cdmFeedTitle {
   border-color: #ebebeb;
   background: #fff;
   font-size: 1.2em;
   font-weight: bold;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background: #fafafa;
}

.titleWrap .title {
   font-size: 1.5em;
   font-weight: bold;
}
div.cdmHeader span.hlFeed {
   padding-top: .5em;
}


And that's what it looks like (Chrome, Mac):

Active/new/read articles:
Image

Feed headlines:
Image

rmtew
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 17 Mar 2013, 00:11

Re: Google Reader theme

Postby rmtew » 18 Mar 2013, 01:49

Ah, latest from github. Nice. I'll see what's involved in upgrading.

Aldursil
Bear Rating Master
Bear Rating Master
Posts: 106
Joined: 18 Mar 2013, 03:11

Re: Google Reader theme

Postby Aldursil » 18 Mar 2013, 03:23

Will this be made into a plugin? I would love to be able to use this as well.

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: Google Reader theme

Postby fox » 18 Mar 2013, 09:30

I've added the ability for plugins to add css blocks: https://github.com/gothfox/Tiny-Tiny-RS ... 1a2d09c1b6 so, technically, yes.

Looks great, by the way. Nicely done theme.


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 1 guest