[Theme][GitHub] feedly theme built from scratch

[levito]

Thanks for pointing out, David! The labels were not styled at all, background/color was missing also. This is fixed now.

[Sidicas]

Seems to work pretty well.

Only issue I've run into is that some websites *cough* reddit *cough* have got HUGE feed icons. So on the left side there where the feeds are listed, I can only see 4 giant reddit aliens from top to bottom which leaves a whole lot of scrolling.

This only happens when I run this theme. I'm running the official 1.8 release.

[levito]

Really? The feed favicon in the feed tree? I have set them to 16x16 in lines 411-415. A quick test shows no bug there.

Which browser/version and which OS are you using? Have you got something like deeply nested categories? Some special configuration or plugins?

A screenshot may also help.

[Sidicas]

Really? The feed favicon in the feed tree? I have set them to 16x16 in lines 411-415. A quick test shows no bug there.

Which browser/version and which OS are you using? Have you got something like deeply nested categories? Some special configuration or plugins?

A screenshot may also help.

Yea, I got a case of "the stupid" and chmodded my themes folder so it wasn't readable by the web server any more, which pretty much broke the world..
Nothing wrong with the theme. Ignore. Sorry to waste your time.

[ftobin]

My and my co-worker have taken a liking to this theme. One thing we enable in addition to this is having the feed name on the left in the story list. However, as-is, the theme ends up putting the feed icon to the right of the feed title, which doesn't look quite right -- the feed icon normally precedes the title (like in the URL bar):

feedly-theme-orig.png (49.75 KiB) Viewed 8394 times

With the following diff applied to feedly.css:

Code: Select all

--- feedly.css.orig   2013-07-03 21:33:07.000000000 -0400
+++ feedly.css.mine   2013-07-03 21:55:41.000000000 -0400
@@ -961,7 +961,6 @@ a:hover {
 }
 .cdm.expandable:not(.active) .cdmHeader > * {
    /* old flexbox: */
-   display: block;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;


It looks like:

feedly-theme-mod.png (49.31 KiB) Viewed 8394 times

What do you think about including this change?

[levito]

@ftobin, thanks for the idea, I will think about it.

But... it looks like your change works because of a browser bug. Removing display: block reassigns display: table-cell to the items. Firefox for example can't position table-cell elements in a flexbox-manner (which browser are you using, btw?)

Reordering items is done by changing the number of *order/-ms-flex-order/*box-ordinal-group.

[levito]

I updated the theme with new icons and many small and big improvements all over the place.
Time to have the OP updated with new screenshots!

[mikkelnl]

This might be a noob question, but what view is this?

/edit
Never mind, had 'Combined feed' enabled so widescreen mode didn't work...

[Bierfreund]

Feedly theme is great! I#m actually using it, because imo it's the best theme available, while many themes look similar.
I really would love to have the option to see a little preview picture in the collapsed view, e.g. how in my Mr. Reader:

I found no theme that offers a preview picture. Does tt-rss core not offer this possibilty?
I write this in the feedly theme thread because the magazine view in feedly is closest to the way i like it from my Mr. Reader app that i found in the web

[levito]

@Bierfreund: There's a very, very hacky way to do this. Since the article content is already there, only hidden, we can grab the first image and put it into the preview. Maybe there's a better way to do this via a plugin.

Code: Select all

/* allocate some space for the preview image */
.cdm.expandable:not(.active) .cdmHeader {
   min-height: 100px;
   padding-right: 100px;
}
/* hide content without using display: none */
.cdm.expandable:not(.active) .cdmContent {
   display: block !important;
   height: 0;
   overflow: visible;
}
.cdm.expandable:not(.active) .cdmContent > * {
   position: absolute;
   right: 9999px;
   overflow: visible;
}
/* get the first image and position it in the preview */
.cdm.expandable:not(.active) .cdmContent .cdmContentInner img:first-of-type {
   position: absolute;
   top: -100px;
   right: -9999px;
   max-width: 100px;
   max-height: 100px;
   margin: 0;
   pointer-events: none;
}


[Bierfreund]

wohoo, thanks for the quick help, even if it's only a hacky way. I just pasted your code in the customize stylesheet section in the preferences (Theme: feedly.css).
On some feeds it works great, e.g. Engadget RSS Feed, but on most feeds (i guess feeds with more than one picture) it tries to display more pictures and it looks like a mess.
Is it also possible to display the picture on the left?
Of course a plugin would be nice, if we find someone that can do it

[levito]

Yes, it's a hack. img:first-of-type selects the first image in any wrapper element. Many wrappers => many images. This is the closest thing I can do with CSS only.

However, here's the code for images on the left side:

Code: Select all

/* allocate some space for the preview image */
.cdm.expandable:not(.active) .cdmHeader {
   min-height: 100px;
   padding-left: 100px;
}
/* hide content without using display: none */
.cdm.expandable:not(.active) .cdmContent {
   display: block !important;
   height: 0;
   overflow: visible;
}
.cdm.expandable:not(.active) .cdmContent > * {
   position: absolute;
   left: -9999px;
   overflow: visible;
}
/* get the first image and position it in the preview */
.cdm.expandable:not(.active) .cdmContent .cdmContentInner img:first-of-type {
   position: absolute;
   top: -100px;
   left: 9999px;
   max-width: 100px;
   max-height: 100px;
   margin: 0;
   pointer-events: none;
}


PS: Was ist dein Bier? Ich gönn mir grad ein schönes Jever

[davidm]

Bug? The checkbox to display a preview in the headline list is not working anymore in combined mode (displays preview when unchecked).

[levito]

@davidm: Yes, a bug. But not in the theme, but in Tiny Tiny RSS itself. The default theme also doesn't hide the content preview.

[fox]

https://github.com/gothfox/Tiny-Tiny-RS ... 345464d8cd

maybe this will help