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]

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

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

[quote="fox"]Yeah, I guess this might happen.

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

?

[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]/* 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;
}[/code]

[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.

[attachment=0]

ui_googlereader.zip

(1.38 KiB) Downloaded 426 times

[billamoore]

[quote="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]/* 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;
}[/code]

[TheDave1022]

[quote="billamoore"]
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]

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

[/code]