Google like RSS view

Post plugins and custom CSS snippets here
Links
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 16 Mar 2013, 22:53

Google like RSS view

Postby Links » 16 Mar 2013, 22:55

hi,

I modify the view of the rss feed to be more like the google reader.
Attachments
more_google_like.patch
(6.01 KiB) Downloaded 743 times

Links
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 16 Mar 2013, 22:53

Re: Google like RSS view

Postby Links » 18 Mar 2013, 20:44

some screenshots of the new view.
Attachments
google_view_dark.png
Dark
google_view_dark.png (91.29 KiB) Viewed 14125 times
google_view.png
google_view.png (94.08 KiB) Viewed 14125 times

pokstreet
Bear Rating Trainee
Bear Rating Trainee
Posts: 6
Joined: 15 Mar 2013, 11:29

Re: Google like RSS view

Postby pokstreet » 19 Mar 2013, 09:39

looks great, how can I apply this patch? thanks

Links
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 16 Mar 2013, 22:53

Re: Google like RSS view

Postby Links » 19 Mar 2013, 19:53

on Linux

Code: Select all

patch -p1 < patchfile


on Windows
use a tool like WinMerge

anreyyyy
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 19 Mar 2013, 03:45

Re: Google like RSS view

Postby anreyyyy » 19 Mar 2013, 22:22

Hi All!

I added this code into tt-rrs.css for more similarities with Google Reader:

Code: Select all

a.title {
  color: #15c;
  font-family: arial,sans-serif;
  font-size: 160%;
  font-weight: bold;
}

.cdmContent {
  font-size: 13px;
  font-family: arial,sans-serif;
  margin-bottom: 50px;
}

#headlines-frame .odd {
  max-width: 650px;
}

#headlines-frame .even {
  max-width: 650px;
}

andy
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 17 Mar 2013, 15:22

Re: Google like RSS view

Postby andy » 19 Mar 2013, 22:35

I applied the patch, and took it for a spin, this is going to be my default viewing experience hence forth, it is a dramatical improvement in my opinion as an old time GR-user, it makes me much more efficiant digging thru feeds with hundreds of posts each day and more screen space to see embedded images etc. Beautiful!

Many kudos to you Links, cheers!

andy
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 17 Mar 2013, 15:22

Re: Google like RSS view

Postby andy » 19 Mar 2013, 22:39

anreyyyy wrote:Hi All!

I added this code into tt-rrs.css for more similarities with Google Reader:


I kind of feel that limiting the width feels akward on high resolution screens, but then again perhaps feeds weren't meant to be read horizontally.. Hmm.. Does Google Reader limit it to 650px? I cannot remember hitting that limit.

The rest of your change I'll keep though, thanks! :)

anreyyyy
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 19 Mar 2013, 03:45

Re: Google like RSS view

Postby anreyyyy » 19 Mar 2013, 23:01

Original Google Reader look like:

Image

It was hard to read. So I copied limit to 650px.

Latimer
Bear Rating Master
Bear Rating Master
Posts: 131
Joined: 17 Mar 2013, 19:35

Re: Google like RSS view

Postby Latimer » 19 Mar 2013, 23:30

anreyyyy wrote:Hi All!

I added this code into tt-rrs.css for more similarities with Google Reader:

Code: Select all

#headlines-frame .odd {
  max-width: 650px;
}

#headlines-frame .even {
  max-width: 650px;
}

Replaced the above code with this:

Code: Select all

    .cdmContentInner {
      max-width: 650px;
    }

I think it looks better, and also closer to the original Google Reader layout.

phz
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 18 Mar 2013, 18:32

Re: Google like RSS view

Postby phz » 20 Mar 2013, 10:55

I'll share my stylesheet here, which also started as a Google Reader-like try. It was developed independently from other tries here at the forum, so some things are probably unnecessary, but I'll post on the grounds of "why not share?".

One of the first things I did was to set "max-width: 650px;" as I see you've done as well. This was imho the biggest problem with readability with vanilla TT-RSS, since on bigger screens, it just wasn't pleasant to read the posts (which is quite central to the experience :-) ).

Screenshot:
Image

Stylesheet (I actually commented it for my own sake as I wrote a week ago or so, so it should be quite readable):

Code: Select all

/*Arial 13px is familiar and pleasant since Google Reader days.*/
body#ttrssMain, body#ttrssPrefs, body#ttrssLogin, body {
   font-family: arial, helvetica, sans-serif;
   font-size: 13px;
}

/*On wide screens, the content is far to wide which makes it unreadable. This gives line breaks for easier reading…*/
div.cdmContentInner, div.cdmContentInner * {
   max-width: 650px;
}

/*…but I want images to only be restricted by the screen width so I unset the property for these.*/
div.cdmContentInner img {
   max-width: none;
}

/*Bold text is disabled by default for some reason. This enables it.*/
div.cdmContentInner b, div.cdmContentInner strong {
   font-weight: bold;
}

/*More visible title, Google Reader style.*/
div.cdmHeader .title, div.cdmHeader span.hlFeed a {
   font-size: 18px;
   font-weight: bold;
}

/*Fittingly enlarged date notation.*/
div.cdmHeader span.updated {
   font-size: 16px;
}

/*The Google Reader blue nuance — pleasant on the eyes.*/
div.cdmHeader .title, div#headlines-toolbar span.r a {
   color: #15c;
}

div.cdmHeader .title .titleAuthor {
   color: silver;
}

/*Some item spacing; makes borders look better (also similar to Google Reader).*/
.even, .odd {
   margin: 5px 0;
}

/*Remove background color on selected items — hinders readability in my view. Also put borders on active…*/
.even.Unread.Selected, .odd.Unread.Selected, .even.Selected, .odd.Selected {
   border: 2px solid #15c;
   background-color: inherit ! important;
}

/*…and inactive items.*/
.even, .odd, .even.Unread, .odd.Unread {
   border: 2px dashed silver;
}

/*Reset default table styling from tt-rss changes of table elements in RSS feeds — vanilla looks weird, imho.*/
/*Fixed in upstream @ https://github.com/gothfox/Tiny-Tiny-RSS/commit/b7ade39dd116e1634c49eb46711a1d6828140c5e , I believe.*/
.odd.Selected td, .even.Selected td, .odd td, .even td {
   border: 1px inset gray;
   background: inherit ! important;
}

anreyyyy
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 19 Mar 2013, 03:45

Re: Google like RSS view

Postby anreyyyy » 20 Mar 2013, 11:41

phz, thank you! good style.

And also for the images I had to delete a row in cdm.css (marked):

div.cdmContentInner img {
border-width : 0px;
max-width : 98%;
}

phz
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 18 Mar 2013, 18:32

Re: Google like RSS view

Postby phz » 20 Mar 2013, 15:11

anreyyyy wrote:phz, thank you! good style.

And also for the images I had to delete a row in cdm.css (marked):

div.cdmContentInner img {
border-width : 0px;
max-width : 98%;
}

Instead of deleting in the mainline (which will be overwritten on upgrades), try doing as I did and just set "max-width: none;" on "div.cdmContentInner img" (the third container in my earlier posted CSS) in your personal CSS. This should unset the mainline setting and hold preference on browser interpretation (I use the "Inspect element" function in Google Chrome to easily see which directives are "winning" in priority).

phz
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 18 Mar 2013, 18:32

Re: Google like RSS view

Postby phz » 20 Mar 2013, 16:18

https://github.com/gothfox/Tiny-Tiny-RS ... 15044e450f — note that this newly committed change that sets "max-width: 650px" on "div.cdmContentInner p" and "div.postContent p" will go into the next TT-RSS version and thus these styles won't be needed in the personal CSS any longer.

Some feeds don't put their text and other objects in <p>-tags, though, so personally I'll keep my "div.cdmContentInner *" with an explicit exception for "div.cdmContentInner img" since that seems to fit my feeds, but others may have other experiences.

User avatar
gmargo
Bear Rating Disaster
Bear Rating Disaster
Posts: 62
Joined: 08 Jan 2012, 22:33
Location: Silicon Valley

Re: Google like RSS view

Postby gmargo » 20 Mar 2013, 19:20

I dislike changes like https://github.com/gothfox/Tiny-Tiny-RS ... 15044e450f
because now I have to delve into the CSS to turn it off. So you're happier but I'm sadder. :?

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

Re: Google like RSS view

Postby fox » 20 Mar 2013, 19:25

I dunno, personally I just don't maximize my windows all the time, but it makes some amount of sense.


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 2 guests