Feedly

Written by Ryan on December 10th, 2014

When Google Reader met its untimely end, I looked around at the alternative RSS readers and settled on Feedly for its features and ease of use. However, I have some strong disagreements with the default Feedly UI, which I think has a terrible reading experience, so I set up the Chrome extension Stylish and got to skinning.

Over time, the Feedly team has updated their design some and I’ve had to modify and add to my styles and I expect that trend to continue, so think of this as a living document instead of a one time fix. I’ll leave version information at the bottom if you’re curious.

The current version improves the font, hides the side bar, hides the redundant Visit Website buttons, reduces some of their over the top margins, has better highlighting for your current item, and makes the body of the site full width, instead of wasting half the space on your monitor.

To make this work, you’ll want to make sure it applies to URLs on the domain feedly.com. I also have www.feedly.com and cloud.feedly.com in mine, though I’m not sure they’re used anymore.

Last updated: 2017-08-14

.u100frame.selectedEntry {
  border: 1px solid #CCF !important;
}
.u100frame.selectedEntry .title {
  color: #000;
}
.sourceTitle {
  color: #009235 !important;
  font-weight: bold !important;
}
#feedlyPage, #feedlyFrame, #mainArea, .fx .container {
  width: auto !important;
  max-width: none !important;
}
#feedlyPart {
  float: none !important;
}
#sideArea {
  display: none !important;
}
#floatingBar {
  left: 236px !important;
  right: 34px !important;
  width: auto !important;
}
.shareBarHolder {
    position: absolute;
    right: 20px;
    top: -20px;
}
.headerInfo {
    border: 0;
}
.headerInfo-links.right {
    display: none;
}
.visitWebsiteButton {
    display: none !important;
}
.tagsHolder {
    display: none !important;
}
.inlineFrame {
    padding: 33px 33px 20px;
}
.u100Entry,
div.entryBody,
.u100Entry .title {
  max-width: none !important;
}
.entryBody img, .entryBody iframe {
  margin: 20px 0 !important;
}
.entryBody a, .entryBody a:visited {
  color: #7EA244 !important;
}
.websiteCallForAction {
  background-color: #FFF !important;
  margin: 10px 0 5px !important;
  line-height: 22px !important;
  text-align: left !important;
  width: 150px;
}
#mainBar {
  width: auto !important;
}
#floatingBar {
  display: none !important;
}
.selectedEntry {
  background-color: #FFF !important;
  border-color: #CCC !important;
}
.selectedEntry .title {
  color: #000 !important;
}
.u100Frame .u100Entry {
  max-width: none !important;
  margin-bottom: 3rem;
}
.entryBody {
  font-size: 14px !important;
  font-family: Arial, sans-serif !important;
  line-height: 20px !important;
  color: #263034 !important;
}
.entryBody p {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.websiteCallForAction {
  display: none;
}
.u100Frame .u100Entry .title {
  margin-bottom: 5px !important;
}
.entryBody blockquote {
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}
.entryholder {
  padding-bottom: 0 !important;
}
.fx .presentation-100 .inlineFrame.selected .title {
    color: #000;
}
.fx .presentation-100 .inlineFrame.unread .title {
    color: #666;
}

Have any ideas to make it better? Let me know!

 

Leave a Comment