Use CSS to Customize Feedly to use Full Width of the Screen (version 8)

Feedly is a magazine style RSS feed reader which integrates with Google Reader. It runs as an extension in both Google Chrome and Mozilla Firefox web browsers. You might have noticed that the interface for Feedly though wide, does not really span the entire strech of your wide screen monitor. It usually uses about 1024px in width thus leaving a huge amount of unused space on either side, especially if you do have a wider screen.

You can use custom Cascading Stylesheet (CSS) in your web browser to maximize the width of the interface thus increasing the content that is visible on the screen.  You will have to add the following CSS into the user specific stylesheet in your web browser or install an extension like Stylish which will allow you to inject site specific CSS into the browser. If you are not sure on how to do this, you can learn more about how to use custom CSS in a web browser.

The following CSS works for the latest version of Feedly which is the version 8 or higher. The latest version 9 should also work well with this. If you do happen to use a previous version of Feedly and not the latest one, then you need to have a slightly different version of the CSS which works for Feedly 6.0.

The following screenshots will show you how the interface should look before and after the use of the CSS

Feedly Version 8 screenshot

 

The Feedly interface after the CSS is applied

Feedly interface after custom css

 

The CSS code itself that modifies the how Feedly is displayed in the browser is below


div#feedlyFrame { width : 96% !important;}
div#feedlyPart0 {
width : 100% !important;
margin-left:1px !important;
}
div#feedlyPart { width : 79% !important;}
div#feedlyPage, div#mainArea { width: 100% !important;}
div#sideArea { width : 210px !important;}
.u4Entry, .u100Entry {
width:100% !important;
max-width: 100% !important;
}
div#feedlyNext {
margin-left: 96% !important;
}
.inlineFrameHolder, .inlineFrame, .selectedEntry, .entryBody {
width:100% !important;
max-width: 100% !important;
font-size: 12px !important;
}
.entryHolder {
width:99% !important;
max-width: 100% !important;
}
.area { margin-left:100px !important }

 

This CSS should work for most screen resolutions, but it is quite possible that you might have to modify it slightly suit your exact screen resolution and your personal taste preferences.  Usually you should be able to do it by just playing around with the width fields in the feedlyFrame and feedlyPart . The above code should also stretch out the article content as well as shown in the screenshots below…

Screenshot of Feedly Version 8

Screenshot of customized feedly interface

If you do happen to have a wide screen monitor, you might as well use the entire space to show the content. Right ?