Minimalist User Styles (Google Readerish)

Post plugins and custom CSS snippets here
daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Minimalist User Styles (Google Readerish)

Postby daledavies » 27 Apr 2013, 16:52

Hi All,

Just wanted to say I love Tiny Tiny RSS, I installed it last night and so far it is working perfectly.

I added a few custom styles just to create a more minimalist look like I'm used to in Google Reader, plus it tightened the articles list up a little.

Just paste the following into the Customize Stylesheet dialogue...

Code: Select all

div.cdm.expanded, div.cdm.expandable {
    margin: 4px 4px 0px;
    border-width: 1px;
    border-color: none;
    box-shadow: none;
}

div.cdm {
    border-width: 0px 1px 1px 0px;
    border-collapse: collapse;
    border-color: none;
    border-style: none;
    background: none;
}

div.cdm.Unread div.cdmHeader {
    background: none;
}

div.cdm.active div.cdmContent {
    padding-bottom:15px;
    border-bottom:1px solid #F1F1F1;
}

div.cdm.expanded, div.cdm.expandable {
    margin: 4px 4px 0px;
    border-width: 1px;
    border-color: none;
    box-shadow: none;
}

div.cdm {
    border-width: 0px 1px 1px 0px;
    border-collapse: collapse;
    border-color: none;
    border-style: none;
    background: none;
}

div.cdm.Unread div.cdmHeader {
    background: none;
}
div.cdm.active div.cdmContent {
    padding-bottom:15px;
    border-bottom:1px solid #F1F1F1;
}
.claro .dijitToolbar {
    border-bottom: 1px solid #F1F1F1;
    background-color: #F1F1F1;
    background-repeat: repeat-x;
    background-image: none;
    padding: 6px 0px 2px 4px;
}

div#headlines-toolbar {
    border-width: 0px 0px 0px 0;
    background-color: #F1F1F1;
    border-color: #EBEBEB;
    font-size: 11px;
    font-family: "Segoe UI",Tahoma,sans-serif;
    color: gray;
    padding: 2px 0px 0px 10px;
    margin: 0px;
    overflow: visible;
    height: 25px;
    line-height: 25px;
}

#headlines-frame {
    padding-top:3px;
    border-top:1px solid #E5E5E5;
    border-left:1px solid #E5E5E5;
    margin-top:3px
}
#headlines-wrap-inner {
    background-color: #F1F1F1;
}

#content-wrap {
border:none
}

#feeds-holder {
border:none;
background-color: #fff;
}

#feeds-holder_splitter {
background-color: #F1F1F1;
border-left:1px solid #e3e3e3;
}

.claro .dijitSplitterVHover {
    background-image:none;
}
.claro .dijitTreeRowSelected {
    background-color: #F1F1F1;
    background-repeat: repeat-x;
    background-image: none;
    padding: 3px 0px 1px;
    border:1px solid #F1F1F1;
    color: rgb(0, 0, 0);
}

.claro .dijitTreeRowHover {
    background-color: #F1F1F1;
    background-repeat: repeat-x;
    background-image: none;
    border:1px solid #F1F1F1;
    color: rgb(0, 0, 0);
}

.claro .dijitTreeRowHover .dijitTreeExpando {
    margin-left:-1px;
}
.claro .dijitTreeRowSelected .dijitInline {
    margin-left:0;
}

.dijitTree {
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: inset -2px 0px 6px -5px #bbb;
}

div.cdmHeader > * {
    padding: 3px;
}


Hope someone finds it useful :-)

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 27 Apr 2013, 17:14

FYI here's a screenshot...

Image
Attachments
ttrss-screenshot.jpg
Screenshot
ttrss-screenshot.jpg (139.3 KiB) Viewed 8325 times

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 28 Apr 2013, 03:52

Here's a slightly updated version...

Code: Select all

div.cdm.expanded, div.cdm.expandable {
    margin: 4px 4px 0px;
    border:none;
    box-shadow: none;
}

div.cdm {
    border:none;
    background: none;
}

div.cdm.Unread div.cdmHeader {
    background: none;
}

div.cdm.active div.cdmContent {
    padding-bottom:15px;
    border-bottom:1px solid #F1F1F1;
}

.claro .dijitToolbar {
    border-bottom: 1px solid #F1F1F1;
    background-color: #F1F1F1;
    background-image: none;
    padding: 6px 0px 2px 4px;
}

div#headlines-toolbar {
    border-width: 0px 0px 0px 0;
    background-color: #F1F1F1;
    border-color: #EBEBEB;
    font-size: 11px;
    font-family: "Segoe UI",Tahoma,sans-serif;
    color: gray;
    padding: 2px 0px 0px 10px;
    margin: 0px;
    overflow: visible;
    height: 25px;
    line-height: 25px;
}

#headlines-frame {
    padding-top:3px;
    border-top:1px solid #E5E5E5;
    border-left:1px solid #E5E5E5;
    margin-top:3px;
}

#headlines-wrap-inner {
    background-color: #F1F1F1;
}

#content-wrap {
    border:none;
}

#feeds-holder {
    border:none;
    background-color: #fff;
}

#feeds-holder_splitter {
    background-color: #F1F1F1;
    border-left:1px solid #e3e3e3;
}

.claro .dijitSplitterVHover {
    background-image:none;
}

.claro .dijitTreeRowSelected {
    background-color: #F1F1F1;
    padding: 3px 0px 1px;
    border:1px solid #F1F1F1;
    background-image: none;
}

.claro .dijitTreeRowHover {
    background-color: #F1F1F1;
    border:1px solid #F1F1F1;
    background-image: none;
}

.claro .dijitTreeRowHover .dijitTreeExpando, .claro .dijitTreeRowSelected  .dijitTreeExpando {
    margin-left:-1px;
}

.claro .dijitTreeRowSelected .dijitInline {
    margin-left:0;
}

.dijitTree {
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: inset -2px 0px 6px -5px #bbb;
}

div.cdmHeader > * {
    padding: 3px;
}

div.cdm.expandable {
    background: none;
}

div.cdm.expandable a.title {
    color:#888;
}

div.cdm.expandable.Unread a.title {
    color:#000;
}

div.cdm.expanded div.cdmHeader a.title, div.cdm.active div.cdmHeader a.title {
    font-size: 12px;
}

.dijitIconFolderOpen, .dijitFolderOpened, .dijitIconFolderClosed, .dijitFolderClosed {
    display:none;
}

.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf {
    width:10px;
    height:auto;
}

.claro .dijitTreeContainer {
    padding-bottom:7px;
}

.claro .dijitTreeContainer .dijitTreeContainer .dijitTreeContainer .dijitTreeContainer {
    padding-bottom:0;
}

skeptix
Bear Rating Trainee
Bear Rating Trainee
Posts: 28
Joined: 14 Mar 2013, 19:06

Re: Minimalist User Styles (Google Readerish)

Postby skeptix » 28 Apr 2013, 13:04

I like it, thanks!

zeiram
Bear Rating Trainee
Bear Rating Trainee
Posts: 12
Joined: 29 Apr 2013, 17:04

Re: Minimalist User Styles (Google Readerish)

Postby zeiram » 29 Apr 2013, 17:05

Excellent! I really like it. Thanks a lot!

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 30 Apr 2013, 22:10

No worries, glad you like it!

I want to tidy up the styles for Virtual Feeds because I only just tried that feature out, so I'll post another slightly updated version here soon :)

Wibbly
Bear Rating Trainee
Bear Rating Trainee
Posts: 30
Joined: 03 May 2013, 12:35

Re: Minimalist User Styles (Google Readerish)

Postby Wibbly » 03 May 2013, 12:44

daledavies wrote:No worries, glad you like it!

I want to tidy up the styles for Virtual Feeds because I only just tried that feature out, so I'll post another slightly updated version here soon :)


This is great - looking forwards to your update. When using a big screen and all articles view, a fixed number of articles are displayed and no more will download until I reduce the window size and force the scroll bar to display. I can then scroll down and more articles are downloaded. I'm wondering if there's a way to force the scroll bar to come up from the start? Not sure if that's fixable in the CSS
Last edited by Wibbly on 03 May 2013, 15:47, edited 1 time in total.

Wibbly
Bear Rating Trainee
Bear Rating Trainee
Posts: 30
Joined: 03 May 2013, 12:35

Re: Minimalist User Styles (Google Readerish)

Postby Wibbly » 03 May 2013, 13:05

I am sometimes seeing shading of alternate lines. Not worked out what triggers this yet. Any idea if it's a CSS issue or something else.

Image

Wibbly
Bear Rating Trainee
Bear Rating Trainee
Posts: 30
Joined: 03 May 2013, 12:35

Re: Minimalist User Styles (Google Readerish)

Postby Wibbly » 03 May 2013, 16:07

Wibbly wrote:I am sometimes seeing shading of alternate lines. Not worked out what triggers this yet. Any idea if it's a CSS issue or something else.



This seems to be related to checking/unchecking the "Combined feed display" option

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 03 May 2013, 23:50

Wibbly wrote:
daledavies wrote:No worries, glad you like it!

I want to tidy up the styles for Virtual Feeds because I only just tried that feature out, so I'll post another slightly updated version here soon :)


This is great - looking forwards to your update. When using a big screen and all articles view, a fixed number of articles are displayed and no more will download until I reduce the window size and force the scroll bar to display. I can then scroll down and more articles are downloaded. I'm wondering if there's a way to force the scroll bar to come up from the start? Not sure if that's fixable in the CSS


I had this problem on my larger monitor in work, the problem seems to be related to the fact only 30 articles are loaded at a time. I found a fix in the following thread...

https://plus.google.com/108554689272628 ... PXqnGnP7na

In the classes/feeds.php file I increased the value of $limit (line 799) from 30 to 45, then also changed line 68 of js/viewfeed.js to reflect that value...

Code: Select all

if (parseInt(headlines_count) < 45) {

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 03 May 2013, 23:55

Here is the latest version of the Google Readerish theme, this time I've attached a ZIP containing a theme file.

This version also styles up combined and non-combined modes plus virtual feeds...
Attachments
google_readerish.zip
Google Readerish Theme (v1.0)
(1.08 KiB) Downloaded 441 times

Wibbly
Bear Rating Trainee
Bear Rating Trainee
Posts: 30
Joined: 03 May 2013, 12:35

Re: Minimalist User Styles (Google Readerish)

Postby Wibbly » 04 May 2013, 12:16

Thanks. Will have a try. Hopefully that will appear as a setting in the next release of ttrss.

Sent from my Nexus 4 using Tapatalk 2

scheffdog
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 12 May 2013, 07:17

Re: Minimalist User Styles (Google Readerish)

Postby scheffdog » 14 May 2013, 04:01

Awesome theme! Thank you for doing!

Wibbly
Bear Rating Trainee
Bear Rating Trainee
Posts: 30
Joined: 03 May 2013, 12:35

Re: Minimalist User Styles (Google Readerish)

Postby Wibbly » 16 May 2013, 18:34

Wibbly wrote:
Wibbly wrote:I am sometimes seeing shading of alternate lines. Not worked out what triggers this yet. Any idea if it's a CSS issue or something else.



This seems to be related to checking/unchecking the "Combined feed display" option


Problem has returned with 1.7.9

Can I also edit the CSS somewhere to reduce the font size of the article list specifically, as the default for 1.7.9 is larger than 1.7.8

Image

daledavies
Bear Rating Trainee
Bear Rating Trainee
Posts: 9
Joined: 27 Apr 2013, 16:45
Contact:

Re: Minimalist User Styles (Google Readerish)

Postby daledavies » 17 May 2013, 19:29

Oops I've not installed the latest version yet, been kinda busy this week. I'll take a look at it over the weekend and get back asap.


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 3 guests