A minimalist theme with a Feedly vibe: RS2

Post plugins and custom CSS snippets here
User avatar
davidm
Plays it by ear
Posts: 115
Joined: 29 Mar 2012, 20:10
Contact:

A minimalist theme with a Feedly vibe: RS2

Postby davidm » 21 Mar 2013, 19:17

This works with tt-rss 1.7.0. See thread for updated versions.


rs2.png
rs2.png (145.31 KiB) Viewed 10525 times

rs2-noncombined.png
rs2-noncombined.png (211.06 KiB) Viewed 10525 times

rs2-readvsunread.png
rs2-readvsunread.png (40.2 KiB) Viewed 10525 times

rs2-readfeedsvsunread.png
rs2-readfeedsvsunread.png (17.67 KiB) Viewed 10525 times

rs2-biggertext.png
rs2-biggertext.png (210.9 KiB) Viewed 10525 times


The objectives of this customization are: removing as much visual noise as possible; more pleasant and easy reading.

This has been achieved removing borders, using flat colors, bigger text and lots of whitespace. It has a cost: this theme has far less information density than the standard.

CSS:

Code: Select all

/** GLOBAL **/

* {
   font-family: sans-serif !important;  /* replace with your preferred fonts! */
}



/** HEADLINE LIST **/


/* toolbar */

#main-toolbar {
   background: rgb(240, 240, 240);
   border: none;
}



/* headline list padding, border and shape */

#headlines-frame {
    padding: 2em 4em;
    border-radius: 25px 0px 0px 0px;
    -moz-border-radius: 25px 0px 0px 0px;
    -webkit-border-radius: 25px 0px 0px 0px;
   border: solid 1px rgb(180,180,180);
}



/* feed title */

div.cdmFeedTitle {
    margin-top: 2.5em;
    background-color: rgba(255,255,255,0);
    background-image: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
}

div.cdmFeedTitle:first-child {
    margin-top: 0;
}



/* remove headline borders and colors, change margins */

.even, .even td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
   background-color : #ffffff;
}

.odd, .odd td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
}

.even.Unread, .even.Unread td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   background-color : #ffffff;
   border-width : 0px 0px 0px 0px;
}

.odd.Unread, .odd.Unread td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
}



/* headline title - remove bold on unread headlines */

#headlines-wrap-inner a.title, .hlTitle a {
   color: #888888;
}

#headlines-wrap-inner .Unread a.title, .Unread .hlTitle a  {
   font-weight: normal;
   color: black;
}




/** POST CONTENT **/


/* post reading panel - non-combined mode */

#content-insert {
    border-top: 1px solid rgb(180,180,180);
    border-left: 1px solid rgb(180,180,180);
}

#content-insert .postReply .postTitle a {
    color: black;
    font-weight: bold;
    font-size: 14px;
}

div.postReply div.postHeader {
    border-color: rgb(210, 210, 210);
    background: rgb(249,249,249);
}

div.postReply div.postContent, div.postReply div.postContentt li {
   font-family: sans-serif;   /* replace with your preferred font! */
   font-size: 15px;
   line-height: 150%;
}

div.postReply div.postContent {
    padding: 0 4em;
}



/* post content - combined mode */

.Selected p, .Selected li {
   font-family: sans-serif;   /* replace with your preferred font! */
   font-size: 15px;
   line-height: 150%;
}

a.title {
   font-size: 14px;
}





/** FEED LIST **/



/* vertical separator */

#feeds-holder_splitter {
    background-color: rgb(240, 240, 240);
}



/* background and border */

#feeds-holder, #content-wrap {
   border: none;
}

body, #feeds-holder {
    background-color: rgb(240, 240, 240) !important;
}



/* separate feeds into sections */

#dijit__TreeNode_1, #dijit__TreeNode_2 {
   padding-bottom: 1.5em;
   padding-top: .3em;
}

#dijit__TreeNode_3 {
   padding-top: .3em;
}



/* uppercase top-level feed folders */
/* (if you keep all your feeds and feed folders under a single top level folder, you can uppercase that by adding #dijit__TreeNode_3 > .dijitTreeRow  */

#dijit__TreeNode_1 > .dijitTreeRow,
#dijit__TreeNode_2 > .dijitTreeRow {
   text-transform: uppercase;
}



/* colors - remove bold for unread */

.dijitTreeLabel.Unread, #dijit__TreeNode_1 .dijitTreeRow {
   font-weight: normal;
   color: black;
}

.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
   color: #888888;
}

#dijit__TreeNode_1 {
   color: #0000aa;
}

.claro .dijitTreeRow {
    padding: 4px 1px 2px 0px;
}

.claro .dijitTreeRowSelected {
    background-color: rgb(207, 229, 250);
    background-image: none;
    border: none;
    padding: 4px 1px 2px 0px;
}

.claro .dijitTreeRowHover {
    background-color: rgb(180, 200, 250);
    background-image: none;
    padding: 4px 1px 2px 0px;
/*    border: none;*/
}

.claro .dijitTreeRow, .claro .dijitTreeRowHover, .claro .dijitTreeNodeHover {
    border: none;
} /* remove movement on hover */



RS2 stands for Really Simple Tiny Tiny Really Simple Syndication.

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby fox » 21 Mar 2013, 19:20

I actually like how this looks. It would be cool to pluginize it.

User avatar
davidm
Plays it by ear
Posts: 115
Joined: 29 Mar 2012, 20:10
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby davidm » 21 Mar 2013, 19:29

Thanks. I won't be doing it: me not speak PHP sir.

(Crazy idea: would it be easy and interesting to create a plugin that adds to the customize dialog a "Load" and a "Save" button? CSS files would be saved to the tt-rss folder and themes could be switched in three clicks. And you could ship tt-rss with some themes already installed, like the Google Reader one.)

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby fox » 21 Mar 2013, 19:35

It's really very very simple to make a theme plugin. Let me post an example of one shamelessly made using your css. It looks a bit different on trunk, though.

ui_rs2.zip
(1.78 KiB) Downloaded 343 times


As you can see, there's essentially no coding required. The boilerplate init.php can be used for any other generic CSS theme plugin.

Rundfunk
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 19 Mar 2013, 17:00

Re: A minimalist theme with a Feedly vibe: RS2

Postby Rundfunk » 21 Mar 2013, 20:09

Nice work! Currently using some custom CSS, but I'll disable it for a bit and try yours :)

syyttr
Bear Rating Trainee
Bear Rating Trainee
Posts: 8
Joined: 21 Mar 2013, 20:15

Re: A minimalist theme with a Feedly vibe: RS2

Postby syyttr » 21 Mar 2013, 20:21

Wow, this is really nice. I go through thousands of feeds per day and I really like how well this visually separates them. Thank you for your awesome work, I hope more people try this out.

mcleckner
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 20 Mar 2013, 15:04

Re: A minimalist theme with a Feedly vibe: RS2

Postby mcleckner » 21 Mar 2013, 21:08

I thought I understood how to use the "theme plugin," but I am not see anything change.
I unzip'ed the .zip file; copied the ui_r2 directory to tt-rss/plugins; chown to www-data:www-data; chmod 664.

I see it listed as "user plugins" in the preferences.
Screen clip:
Image
I enabled it; reloaded; and even restarted apache.

I know there is the "customize style sheet" section in Preferences where I could put the css style sheet code, but I thought the idea of the theme plugin was to avoid that.

Am I doing it wrong?

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby fox » 21 Mar 2013, 21:12

I don't remember when I added get_css() but it might be newer than the version you're running.

3ruce
Bear Rating Trainee
Bear Rating Trainee
Posts: 2
Joined: 14 Mar 2013, 15:32

Re: A minimalist theme with a Feedly vibe: RS2

Postby 3ruce » 21 Mar 2013, 23:09

Excellent theme - really clean and simple!

Usul
Bear Rating Trainee
Bear Rating Trainee
Posts: 38
Joined: 23 Jul 2008, 10:36

Re: A minimalist theme with a Feedly vibe: RS2

Postby Usul » 21 Mar 2013, 23:26

That's a really nice theme, thank you! I only tweaked it to note enlarge the font of the selected entry, that drives me crazy in combined view.

sanboer
Bear Rating Trainee
Bear Rating Trainee
Posts: 2
Joined: 24 Mar 2013, 23:13

Re: A minimalist theme with a Feedly vibe: RS2

Postby sanboer » 24 Mar 2013, 23:21

2013-03-24--1364152057_1600x900_scrot.png
screenshot
2013-03-24--1364152057_1600x900_scrot.png (90.41 KiB) Viewed 10186 times


I tweaked it some more, to work well on an iPad.
Colors are tweaked, radii around posts, not containing div.

I am annoyed by the top two lines "mark as read, actions" line on the top and the following line "select all, unread etc" I would love to consolidate these.
Attachments
rs2.tgz
pluginized theme, untar in plugins dir.
(1.94 KiB) Downloaded 299 times

sanboer
Bear Rating Trainee
Bear Rating Trainee
Posts: 2
Joined: 24 Mar 2013, 23:13

Re: A minimalist theme with a Feedly vibe: RS2

Postby sanboer » 24 Mar 2013, 23:35

fyi, for IOS " -webkit-overflow-scrolling: touch; " makes all the difference.

some mouse-out hiding of scrollbars would be appreciated for desktop browsers...

User avatar
davidm
Plays it by ear
Posts: 115
Joined: 29 Mar 2012, 20:10
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby davidm » 28 Mar 2013, 01:57

A few adjustments for 1.7.5:

Code: Select all

/**
RS2
Custom tt-rss theme
This version works with: tt-rss v 1.7.5
**/




/** GLOBAL **/

* {
   font-family: sans-serif !important;  /* replace with your preferred fonts! */
}





/** HEADLINE LIST **/




/* toolbar */

#main-toolbar {
   background: rgb(240, 240, 240);
   border: none;
}






/* headline list padding, border and shape */

#headlines-frame {
    padding: 2em 4em;
    border-radius: 25px 0px 0px 0px;
    -moz-border-radius: 25px 0px 0px 0px;
    -webkit-border-radius: 25px 0px 0px 0px;
   border: solid 1px rgb(180,180,180);
}





/* feed title */

div.cdmFeedTitle {
    margin-top: 2.5em;
    background-color: rgba(255,255,255,0);
    background-image: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: rgb(136,136,136);
}

div.cdmFeedTitle:first-child {
    margin-top: 0;
}

div.cdmFeedTitle a.title {
    font-size: 16px;
}




/* remove headline borders and colors, change margins */

.even, .even td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
   background-color : #ffffff;
}

.odd, .odd td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
}

.even.Unread, .even.Unread td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   background-color : #ffffff;
   border-width : 0px 0px 0px 0px;
}

.odd.Unread, .odd.Unread td {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   border-width : 0px 0px 0px 0px;
}





/* headline title - remove bold on unread headlines */

#headlines-wrap-inner a.title, .hlTitle a {
   color: #888888;
}

#headlines-wrap-inner .Unread a.title, .Unread .hlTitle a  {
   font-weight: normal;
   color: black;
}





/** POST CONTENT **/


/* post reading panel - non-combined mode */

#content-insert {
    border-top: 1px solid rgb(180,180,180);
    border-left: 1px solid rgb(180,180,180);
}

#content-insert .postReply .postTitle a {
    color: black;
    font-weight: bold;
    font-size: 14px;
}

div.postReply div.postHeader {
    border-color: rgb(210, 210, 210);
    background: rgb(249,249,249);
}

div.postReply div.postContent, div.postReply div.postContentt li {
   font-family: Ubuntu, sans-serif;   /* replace with your preferred font! */
   font-size: 15px;
   line-height: 150%;
}

div.postReply div.postContent {
    padding: 0 4em;
}




/* post content - combined mode */

.Selected p, .Selected li {
   font-family: Ubuntu, sans-serif;   /* replace with your preferred font! */
   font-size: 15px;
   line-height: 150%;
}

a.title {
   font-size: 14px;
}


odd.Selected, even.Selected {
    background: none repeat scroll 0% 0% rgb(255, 250, 240) !important;
} /* not working! */








/** FEED LIST **/



/* vertical separator */

#feeds-holder_splitter {
    background-color: rgb(240, 240, 240);
}





/* background and border */

#feeds-holder, #content-wrap {
   border: none;
}

body, #feeds-holder {
    background-color: rgb(240, 240, 240) !important;
}





/* separate top-level folders */

.dijitTreeIsRoot {
   padding-bottom: 3em;
}

.dijitTreeIsRoot:last-child {
   padding-bottom: 0;
}

/* uppercase top-level feed folders */

.dijitTreeIsRoot > .dijitTreeRow {
   text-transform: uppercase;
}





/* colors - remove bold for unread */

.dijitTreeLabel.Unread, #dijit__TreeNode_1 .dijitTreeRow {
   font-weight: normal;
   color: black;
}

.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
   color: #888888;
}

#dijit__TreeNode_1 {
   color: #0000aa;
}

.claro .dijitTreeRow {
    padding: 4px 1px 2px 0px;
}

.claro .dijitTreeRowSelected {
    background-color: rgb(207, 229, 250);
    background-image: none;
    border: none;
    padding: 4px 1px 2px 0px;
}

.claro .dijitTreeRowHover {
    background-color: rgb(180, 200, 250);
    background-image: none;
    padding: 4px 1px 2px 0px;
/*    border: none;*/
}

.claro .dijitTreeRow, .claro .dijitTreeRowHover, .claro .dijitTreeNodeHover {
    border: none;
} /* remove movement on hover */

Napkin
Bear Rating Trainee
Bear Rating Trainee
Posts: 21
Joined: 29 Mar 2013, 01:07

Re: A minimalist theme with a Feedly vibe: RS2

Postby Napkin » 29 Mar 2013, 01:15

Great theme, love it! Thanks for keeping it updated, too :)

Wondering, I'm seeing a horizontal scrollbar in the feed tree on the left. I played a bit with the padding options, but failed. That's Firefox and Chrome. It's mostly hidden, though, when you have enough feeds subscribed to - no big deal. Cheers!

User avatar
davidm
Plays it by ear
Posts: 115
Joined: 29 Mar 2012, 20:10
Contact:

Re: A minimalist theme with a Feedly vibe: RS2

Postby davidm » 31 Mar 2013, 16:09

Yeah, that scrollbar appeared when I upgraded to 1.7.5, on Firefox. No damn idea why it's there.


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 4 guests