Google Reader theme

[fox]

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

[Bobjespat]

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

[fox]

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]

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?

[fox]

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

[ration]

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]

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.

[fox]

Yeah, I guess this might happen.

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

?

[fox]

>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]

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]

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

[fox]

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

[billamoore]

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]

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]

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