[Theme] Feedly Inspired - Updated Nov 18

Post plugins and custom CSS snippets here
Bear Rating Trainee
Bear Rating Trainee
Posts: 17
Joined: 18 Nov 2013, 04:39
Location: Ontario, Canada

[Theme] Feedly Inspired - Updated Nov 18

Postby mbazdell » 18 Nov 2013, 04:50

Edit 2: Updated more stuff. Just a note that I'm color blind so things may look rather bland. Tomorrow I'll go through and remove any redundant CSS that doesn't need overriding. I was mostly just grabbing whatever chrome was telling me was in use for particular elements.

Hey all. First post here. In fact I've only been using it since... this morning. Anyways I like it so far and it seems to be working out swell. So I got around to creating a layout I like that was clearly inspired (read: stolen) from Feedly. Keep in mind this layout takes nothing into consideration like mobile phones and has a width of 1080px. Also, I prefer this layout because I'm lazy and like to just sit back and scroll the wheel mouse while reading the headlines and a bit of the article. No need for clicking unless I want to actually read something.

I made this as easy as possible. Basically you need to be running the default theme, and have Combined Feed Display enabled. Click the Customize button and paste in

Code: Select all

#ttrssMain #main {
    background: #eee;
    width: 1080px;
    margin: 0 auto;

body#ttrssMain #feedTree .dijitTreeRow {
    color: rgba( 0, 0, 0, 0.53 );
    font-weight: bold;
    font-size: 13px;
    font-family: sans-serif;
    padding: 15px 0 0 2px;

body {
    background: #eee;

#feeds-holder {
    background: #eee;
    box-shadow: none;

div.cdm.expanded.active div.cdmHeader a.title,
div.cdm.expanded div.cdmHeader a.title {
    font-size: 23px;
    color: #919191;

div.cdmHeader {
    padding: 20px 0px;

div.cdm.expanded {
    border: 1px solid #D4D4D4;
    margin: 60px;

.claro .dijitSplitContainer-child,
.claro .dijitBorderContainer-child {
    border: none;

#dijit__TreeNode_1 {
    padding-bottom: 30px !important;

#feedTree .counterNode {
    background: #999;
    border: 1px solid #999;

.claro .dijitAccordionInnerContainerSelected,
.claro .dijitAccordionInnerContainerHover,
.claro .dijitDialogTitleBar {
    background-color: #BBB;
    border-color: #999;

.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode,
.claro .dijitSelectMenu .dijitMenuItemHover td,
.claro .dijitComboBoxMenu .dijitMenuItemHover,
.claro .dijitSelectHover,
.claro .dijitValidationTextBoxHover,
.claro .dijitComboButtonHover,
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover,
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
.claro .dijitSelectHover .dijitArrowButton,
.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
.claro .dijitMenuItemSelected,
.claro .dijitSelectMenu .dijitMenuItemSelected td,
.claro .dijitSelectFocused .dijitArrowButton,
.claro .dijitSelectFocused,
.claro .dijitTreeRowSelected,
.claro .dijitTreeRowHover {
    background-color: #DDD;
    border-color: #CCC;

.claro .dijitTextBoxHover,
div.notice {
    background-color: #EEE;
    border-color: #DDD;

.claro .dijitButtonHover .dijitButtonNode,
.claro .dijitDropDownButtonHover .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNodeHover,
.claro .dijitComboButton .dijitDownArrowButtonHover,
.claro .dijitToggleButtonHover .dijitButtonNode,
.claro .dijitTabHover,
.claro .dijitTabChecked,
.claro .dijitTabActive,
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive,
.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
.claro .dijitAccordionInnerContainerActive {
    background-color: #BBB !important;
    border-color: #999 !important;

body#ttrssPrefs #footer, body#ttrssPrefs #header {
    background-color: #EEE;


As you can see there's not a lot to it, but it looks pretty good in my opinion

Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 2 guests