Google like RSS view

Post plugins and custom CSS snippets here
Latimer
Bear Rating Master
Bear Rating Master
Posts: 131
Joined: 17 Mar 2013, 19:35

Re: Google like RSS view

Postby Latimer » 20 Mar 2013, 19:57

phz wrote: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

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

I would like to suggest the following update: replace the code above with the code below.

Code: Select all

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

Bold text is indeed disabled for the entire div.cdmContentInner (see cdm.css, line 45). It unfortunately overrides font-weight definitions for h2 and h3 (see tt-rss.css, lines 100 and 108). The code above restores font-weight definition for these two tags. I also had to add the missing (optional) definition for h4 to my custom stylesheet, that's why it also appears in the code above.

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, 20:12

This looks like a css bug.

https://github.com/gothfox/Tiny-Tiny-RS ... 1d31a400ed

Edit: yeah that was there because of a different bug.

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, 20:48

Latimer wrote:I would like to suggest the following update: replace the code above with the code below.

Code: Select all

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

Bold text is indeed disabled for the entire div.cdmContentInner (see cdm.css, line 45). It unfortunately overrides font-weight definitions for h2 and h3 (see tt-rss.css, lines 100 and 108). The code above restores font-weight definition for these two tags. I also had to add the missing (optional) definition for h4 to my custom stylesheet, that's why it also appears in the code above.

fox wrote:This looks like a css bug.

https://github.com/gothfox/Tiny-Tiny-RS ... 1d31a400ed

Edit: yeah that was there because of a different bug.

Alright, thanks to both of you! I hadn't looked into the issue further than that I noticed it for <strong>/<b> when I started configuring TT-RSS. I made that CSS rule and forgot about the issue altogether.

I'm thinking of creating an RSS feed for testing purposes with samples of more or less all tags that should be supported to be able to quickly test for unexpected markup behavior. Will begin, at least.

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

Re: Google like RSS view

Postby Latimer » 20 Mar 2013, 21:06

There's also something wonky going on with td (see Google News feeds, for example). It renders differently in a new article, in a selected article, and finally when an article is marked as unread.

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

Re: Google like RSS view

Postby Latimer » 20 Mar 2013, 21:17

fox wrote:This looks like a css bug.

https://github.com/gothfox/Tiny-Tiny-RS ... 1d31a400ed

Edit: yeah that was there because of a different bug.

Yeah, I tried commenting that out; the results were unexpected.

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, 21:22

Latimer wrote:There's also something wonky going on with td (see Google News feeds, for example). It renders differently in a new article, in a selected article, and finally when an article is marked as unread.


Lawl, they wrap everything in a <font> tag so it shows nothing on trunk. Jesus fuck, Google.

With <font> enabled it looks ok to me.

dimon222
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 18:54

Re: Google like RSS view

Postby dimon222 » 21 Mar 2013, 04:17

Is there any way to add expanding of feeds by click on them ? (similar to Google Reader)
I mean to avoid 3rd frame in right-bottom corner and just expand feeds by click.

ricsi
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 21 Mar 2013, 13:50

Re: Google like RSS view

Postby ricsi » 21 Mar 2013, 13:54

You can switch to widescreen mode and have the 3rd window right of the others.

And you can indeed get rid of the 3rd window completely.

I think you need to set
Automatically expand articles in combined mode to No
Combined feed display to Yes

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

Re: Google like RSS view

Postby phz » 27 Mar 2013, 14:51

phz wrote: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;
}

Updated for bug fixes, code merges and additions in 1.7.5. Some other minor tweaks, but more or less the same as in the quoted screen shot.

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 too wide which makes it difficult to read. 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 (web comics, etc.).*/
div.cdmContentInner img {
   max-width: none;
}

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

/*…but author notification can be toned down a bit, imho. It is often unnecessary, and if I need it, I'll look for it specifically. It should not retract from the title itself.*/
div.cdm.expanded div.cdmHeader a.title span.author {
   color: silver;
   font-weight: normal;
}

/*I don't like the feed name italicized.*/
div.cdm.expanded div.cdmHeader div.hlFeed a {
   font-style: normal;
}

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

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

/*The #ffea9e nuance for selected post headers does not play well with my other colors. Since I clearly mark selected posts with the border, I'd rather not change background color at all on selection. There is some JavaScript magic going on, so "inherit" won't work; I need to explicitly set it to the current inactive header color.*/
div.cdm.expanded div.cdmHeader, div.cdm.expanded div.cdmFooter {
   background-color: #eee ! important;
   background-image: none ! important;
}

/*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 clearly visible 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;
}

/*I don't think TT-RSS should interfere too much with standard styling among the content — idioms enhances usability. Remove special link styling.*/
div.cdmContent a         {color: blue; text-decoration: underline;}
div.cdmContent a:hover   {color: blue;}
div.cdmContent a:visited {color: purple;}
div.cdmContent a:active  {color: red;}

/*…but in cdmFooter, there are some Javascript links that _always_ marks as "visited", which is annoying.*/
div.cdmContent div.cdmFooter a {
   color: #15c;
}

/*Raise importance of feed/category name. This gives a good feel in my style context.*/
div#headlines-toolbar span.r span#feed_title {
   font-weight: bold;
}

A tip for everyone who want to create custom stylesheets is to make a directory called "themes" in the TT-RSS installation folder, put your stylesheet within as e.g. "mystyle.css" and then enter only this in the "Customize stylesheet" attribute in the TT-RSS preferences:

Code: Select all

@import url('themes/mystyle.css');

Now the style is edited via a regular text editor of choice instead of the tiny text area in the preferences, and you only need to save the text file and refresh for the changes to be taken into account (as compared to "Save", wait for reload, "Exit preferences", wait for reload).

This procedure is completely identical to this tip :-) . Convergent evolution at work.

At first I thought of editing the database entry containing the user style directly via an editor plugin, but the style entry in the database is saved with <br> tags which added another layer of translation, and the above was easier in every way.

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

Re: Google like RSS view

Postby andy » 27 Mar 2013, 15:32

phz wrote:A tip for everyone who want to create custom stylesheets is to make a directory called "themes" in the TT-RSS installation folder, put your stylesheet within as e.g. "mystyle.css" and then enter only this in the "Customize stylesheet" attribute in the TT-RSS preferences:

Code: Select all

@import url('themes/mystyle.css');

Now the style is edited via a regular text editor of choice instead of the tiny text area in the preferences, and you only need to save the text file and refresh for the changes to be taken into account (as compared to "Save", wait for reload, "Exit preferences", wait for reload).


I cannot beileve I didn't think about this before, also using your css now, much appreciated thank you!

usn.mustanger
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 28 Mar 2013, 19:23

Re: Google like RSS view

Postby usn.mustanger » 28 Mar 2013, 19:39

phz, thanks for sharing! One issue: My titles don't appear in bold blue like yours.
Here's mine:
Image
Any idea why?
TIA!

EDIT: I looked at your CSS code, and see the lines for the article title (implementing 18px bold and #15c color), but for some reason they're not having any effect. I've tried FF 20.0 (Mac ML), and Chrome 27.0.1453.6 dev (Mac ML), and Opera 12.14.1738 (Mac ML), and all of them show the title (and author, despite your CSS to the contrary) in bold black 12pt font (or at least the same pt size as the rest of the article, as seen above). I've even tried using both the direct in-preferences css copy/paste, and the @include method. Same result. This is puzzling me, as I don't have any other custom style sheets in either browser that should override this style sheet. I'd love some help here. THX!

northmendo
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 31 Mar 2013, 02:33

Re: Google like RSS view

Postby northmendo » 31 Mar 2013, 02:38

Links wrote:hi,

I modify the view of the rss feed to be more like the google reader.



Is there any way you could just post the code to apply this with in the preferences?

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

Re: Google like RSS view

Postby phz » 02 Apr 2013, 19:29

usn.mustanger wrote:phz, thanks for sharing! One issue: My titles don't appear in bold blue like yours.
Here's mine:
http://i.imgur.com/5jEV3rh.png?1
Any idea why?
TIA!

EDIT: I looked at your CSS code, and see the lines for the article title (implementing 18px bold and #15c color), but for some reason they're not having any effect. I've tried FF 20.0 (Mac ML), and Chrome 27.0.1453.6 dev (Mac ML), and Opera 12.14.1738 (Mac ML), and all of them show the title (and author, despite your CSS to the contrary) in bold black 12pt font (or at least the same pt size as the rest of the article, as seen above). I've even tried using both the direct in-preferences css copy/paste, and the @include method. Same result. This is puzzling me, as I don't have any other custom style sheets in either browser that should override this style sheet. I'd love some help here. THX!

Perhaps we're running different versions. The latest version of my above stylesheet (note that I have posted two versions: use the latest!) was made for 1.7.5, but still works on the very latest GitHub version of TT-RSS as of writing (though some things have changed in minor ways due to additions and changes in default styles, but nothing annoying).

When looking at which styles get preference, I use the "Inspect element" function in Chrome. Try doing that, selecting the header that don't style as you want and manually inspect which rules from which files trump which others in the pane to the lower right. That is often/always illuminating. Other browsers may have similar functionality.


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 2 guests