Mosaic Userstyle PDF Print E-mail
Written by Michael Tunnell   
July 20, 2013


The outstanding RSS Reader app called Feedly released a new version of the app with v14. Version 14 comes with a lot of new features, bug fixes, speed improvements and much more but unfortunately they decided to kill the "Mosaic" view (Grid) from v14. Feedly decided to replace the "Mosaic" view (my preferred view) with a new "Cards" view which essentially was an attempt to do the vertical column layout style made famous by Pinterest. In my opinion, and many others, this was a mistake. I decided to create a userstyle with the browser addon, Stylish. Before we get to the userstyle that I created and the reasons of why I created should first know what a Userstyle is and what Stylish is.


Project Details

Version: 4.2.0
Released: November 16th, 2014
Changelog | RSS Feed



What is Stylish?

Stylish is an extension for Firefox & Google Chrome that allows a user to manipulate the look of a website by altering the CSS of the site. These alterations only apply to the user who has the extension installed and a userstyle installed, it does not actually affect the site itself. You may have heard of the extension "Greasemonkey" which does the same thing but uses javascript instead of CSS.


What is a Userstyle?

A userstyle is a collection of CSS code that is installed via Stylish in order to manipulate a site for various reasons. Using a userstyle allows you to alter a site and keep the modifications over multiple sessions so you only have to activate it once to use it over and over.


Why I created this userstyle:

Feedly replaced Mosaic with Cards and as I said before...Cards is simply a looks great on Android but it is just a ton of wasted space on the desktop versions of Feedly. Below I have provided screenshots of both Cards and my new Mosaics view. Feedly's original Mosaic view did not look like what mine does but it was close enough.


Feedly's Cards View (Before Userstyle)

As you can see the Cards view looks fairly good but it wastes a lot of much so that you can only read the item titles of just 6 items. This is not acceptable to me which is why I created this userstyle.


My Mosaic Userstyle

Now the items are presented in a nice Grid layout which allows the items to display the thumbnail of the item, item title, mark as read link and the save for later link all in a nice but condensed layout. This save a LOT of space as you can now see 12 items and their item titles simultaneously.


My Responsive Mosaic Userstyle

Now the items are presented in Responsive Mode which removes all the useless whitespace to allow the items to display as many as possible. The screenshot was made at 1920 x 1080 which results in 20 items being displayed at one time, if you have a larger screen resolution then even more items will display.



  Before My Userstyle (Cards) After My Userstyle (Mosaic)
Item Thumbnails


12+ (20+ via Responsive)
Mark as Read Link (visible as of v14.0.477)

Icon (only when needed)

Save for Later Link (visible as of v14.0.477)

Icon (only when needed)


Cards: before v14.0.477 the links were hidden so they were not usable until you opened an item.

Mosaic: the icons are hidden until you hover an item, then they display in the top right corner for easy quick access.


Known Bugs:

Save for Later Icon doesn't update once saved: this is because Feedly's code does not change anything but the text of the link and unfortunately because of this it forces the icon to not be modified when saved. This could be solved with a greasemonkey script but to require another addon and installing a script for something so small just doesn't seem worth it to me. Hopefully, Feedly will correct this by allowing the code IDs or Classes to change.


How to get the Mosaic Userstyle:

  1. Install the Stylish extension for Firefox or Google Chrome
  2. Install the Mosaic Userstyle into Stylish, from the button below.
  3. Enjoy your new Mosaic view of Feedly!


Install my Mosaic Userstyle


( OR )

Install my [ Responsive ] Mosaic Userstyle





blog comments powered by Disqus
Last Updated on November 16, 2014