Google Reader theme

Post plugins and custom CSS snippets here
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, 13:02

By the way, theoretical "make things look like greader" plugin can also set relevant preferences on initialization, like enabling combined mode and stuff.

Bobjespat
Bear Rating Trainee
Bear Rating Trainee
Posts: 34
Joined: 15 Mar 2013, 11:43
Location: near Munich/Germany
Contact:

Re: Google Reader theme

Postby Bobjespat » 18 Mar 2013, 13:28

That would be a great! Is there such a "complete" Plugin planed?

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, 14:17

https://github.com/gothfox/Tiny-Tiny-RS ... 8ed7e7706d

CSS by levito + enables combined mode on startup.

Edit: Hope that's okay with you, levito. If not, I can remove the plugin.

Tscherno
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 18 Mar 2013, 15:52

Re: Google Reader theme

Postby Tscherno » 18 Mar 2013, 15:57

By the way, theoretical "make things look like greader" plugin can also set relevant preferences on initialization, like enabling combined mode and stuff.


Would it be possible to set the read timeout from that plugin?

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, 16:11

That's pretty much the same as adding an option for that, so no.

ration
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 18 Mar 2013, 16:02

Re: Google Reader theme

Postby ration » 18 Mar 2013, 16:13

Tried this from master, enabling this on Postgresq 8.4 will break updates:

PHP Warning: pg_query(): Query failed: ERROR: syntax error at end of input
LINE 4: AND owner_uid =
^ in /include/db.php on line 56
Query <i>UPDATE ttrss_user_prefs SET
value = 'true' WHERE pref_name = 'COMBINED_DISPLAY_MODE'
AND profile IS NULL
AND owner_uid = </i> failed []: ERROR: syntax error at end of input
LINE 4: AND owner_uid =

Tscherno
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 18 Mar 2013, 15:52

Re: Google Reader theme

Postby Tscherno » 18 Mar 2013, 16:15

But if the purpose of the plugin is to make the expierence as much as possible as GR, then it should be part of it, IMO. I think i'm not the only "switcher" from GR.

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, 16:16


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, 16:19

>But if the purpose of the plugin is to make the expierence as much as possible as GR, then it should be part of it, IMO. I think i'm not the only "switcher" from GR.

As much as possible being the key phrase here. Making a clone of google reader, be it in form of a plugin or not, is not something that is on the agenda.

billamoore
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 02:58

Re: Google Reader theme

Postby billamoore » 20 Mar 2013, 03:03

fox wrote:Yeah, I guess this might happen.

https://github.com/gothfox/Tiny-Tiny-RS ... 4ccac053f0

?


Beautiful work here. I am new to TT-RSS and a convert from Google Reader. This above plus the Android app have been the best find I have made recently. Tweet with hashtags #TinyTinyRSS and #ReplaceReader to get this awesome work more attention.

Can't thank you enough for creating a solution to a problem you couldn't have known would come up - Google quitting us. Tell me how I can buy you a beer.

.bill

TheDave1022
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 22:50

Re: Google Reader theme

Postby TheDave1022 » 20 Mar 2013, 22:54

I used the css here to try to get it more like the Google Reader format. Only issue I'm really having is the preview text expands too far in the DIV for items with long titles.

Here is my CSS if anyone can help

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.1em;
   font-weight: bold;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background: #fafafa;
}

.titleWrap .title {
font-size: 1.1em;
font-weight: bold;
color: black;
}


img.tinyFeedIcon {
display: none;
}

img.hlScorePic {
display: none;
}

div.cdmHeader span.hlFeed {
padding-top: 0em;
padding-right: 1em;
float: left;
width: 11em;
color: #555;
font-size: 100%;
white-space: nowrap;
overflow: hidden;
}


#ttrssMain #headlines-toolbar, #ttrssMain .dijitToolbar, #ttrssMain .cdmHeader {
overflow: hidden;
white-space: nowrap;
}

span.cdmExcerpt {
font-size: 12px;
}
Attachments
Capture.PNG
Capture.PNG (35.25 KiB) Viewed 5544 times

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 » 21 Mar 2013, 19:41

After some further thinking, I'm not sure if that's a good idea to bundle theme plugins like that - I can't update them all, and it could quickly lead to annoying breakage of things. I'll attach the plugin I hacked using levito's CSS here for posterity.

ui_googlereader.zip
(1.38 KiB) Downloaded 397 times

billamoore
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 02:58

Re: Google Reader theme

Postby billamoore » 22 Mar 2013, 00:23

TheDave1022 wrote:I used the css here to try to get it more like the Google Reader format. Only issue I'm really having is the preview text expands too far in the DIV for items with long titles.

Here is my CSS if anyone can help

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.1em;
   font-weight: bold;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background: #fafafa;
}

.titleWrap .title {
font-size: 1.1em;
font-weight: bold;
color: black;
}


img.tinyFeedIcon {
display: none;
}

img.hlScorePic {
display: none;
}

div.cdmHeader span.hlFeed {
padding-top: 0em;
padding-right: 1em;
float: left;
width: 11em;
color: #555;
font-size: 100%;
white-space: nowrap;
overflow: hidden;
}


#ttrssMain #headlines-toolbar, #ttrssMain .dijitToolbar, #ttrssMain .cdmHeader {
overflow: hidden;
white-space: nowrap;
}

span.cdmExcerpt {
font-size: 12px;
}


I really like that layout. Will be watching to see if you get it working the way you want. I was not however (using your code) able to get the authors name to appear correctly before the subject. Looks nice. Surprised not more interest.

.bill

TheDave1022
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 22:50

Re: Google Reader theme

Postby TheDave1022 » 22 Mar 2013, 03:08

billamoore wrote:I really like that layout. Will be watching to see if you get it working the way you want. I was not however (using your code) able to get the authors name to appear correctly before the subject. Looks nice. Surprised not more interest.

.bill


I can likely get it to fully look as I want, but I was trying to only edit the CSS vs editing the files.

TheDave1022
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 20 Mar 2013, 22:50

Re: Google Reader theme

Postby TheDave1022 » 23 Mar 2013, 05:36

Here is v2 of my theme which adds a gray background hover effect over the row when the mouse passes over it.
Article Title gets cropped at 50% of the DIV width.
Article summary text has a max-width of 400px as it would push the text to the next line. (Testing on a 1920x1080 monitor with the default position of the Side Nav Bar width)

Waiting on the next version of ttrss as there will be an option to remove the Author. Will see if I can figure out how to get the article summary to extend all the way until it hits the date div.

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.1em;
   font-weight: bold;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background: #fafafa;
}

img.tinyFeedIcon {
display: none;
}

img.hlScorePic {
display: none;
}

div.cdmHeader span.hlFeed {
padding-top: 0em;
padding-right: 1em;
float: left;
width: 11em;
color: #555;
font-size: 100%;
white-space: nowrap;
overflow: hidden;
}


#ttrssMain #headlines-toolbar, #ttrssMain .dijitToolbar, #ttrssMain .cdmHeader {
overflow: hidden;
}

/* Set Line Background to White */
.odd.Selected, .odd.Selected td {
background: rgb(255, 255, 255) ! important;
}
.even.Selected, .odd.Selected td {
background: rgb(255, 255, 255) ! important;
}

/* Article Title Cell Width 50% */
.titleWrap .title {
color: #15c;
overflow: hidden;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
padding-right: 15px;
font-size: 1.1em;
font-weight: bold;
}

/* Article Text Summary Blurb */
span.cdmExcerpt {
font-size: 12px;
overflow: hidden;
max-width: 400px;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}

/* Line Hover Color */
#ttrssMain .cdmHeader:hover {
background-color:#F0F0F0;
}

Attachments
Capture.PNG
Capture.PNG (28.28 KiB) Viewed 5224 times


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 2 guests