Taking suggestions and sample CSS for re-styling the story titles in the Feed view

idea
1

Take a look at the story titles pictured here:

See that some are read and some are unread? Help me fix that up. Post some sample CSS here and I’ll be glad to pick the best one, or integrate some of the ideas.

My goal is to make the distinction between read and unread a bit more obvious, while preserving readability. I’m talking about the background gradient difference between the two, making it a bit more obvious when a story goes from unread to read, etc.

3 Likes
2

No CSS but my input would be to significantly fade the orange bar and title/date text for read items.

I’d honestly ditch the orange bar as I think it grabs way to much attention for a divider. I think the gray bar is good enough.

3

That orange bar (which changes color depending on the Feed’s favicon) is here to stay. Not only does it demo well, but I love how it divides stories. I meant more of the gray story title and better distinguishing between read and unread stories.

4 
#story\_pane .read .NB-feed-story-title { 
 opacity: .7; 
 -webkit-mask-image: -webkit-gradient( 
linear, right top, left bottom, 
from(rgba(0,0,0,0)), to(rgba(0,0,0,1)) 
 ); 
 }

Although I would like this to not apply to the article I’m currently reading. Couldn’t you add a .focus/.reading class in there?

I realise this will cut browser compatibility, I bet that could be solved with some rethinking or maybe some pseudo-elements. Will have to think about it a bit.

5

Hi.

Here is how I like it.

That’s just :

#story\_pane a.NB-feed-story-title {   
color: #2b2b2b;   
}   
 
#story\_pane .read a.NB-feed-story-title {   
color: #aaaaaa;   
}   
 
#story\_pane .NB-feed-story-header .NB-feed-story-date {   
color: #808080;   
}

Not sure if that helps.

1 Like
6

Doh. The color changing is so fluid that I never realized it was doing it. It looks great! Nevermind my ignorant comment above.

7

This is exactly what I was picturing. The fading is perfect IMO.

8

This looks good, but the reason I didn’t fade out read stories is that it then becomes hard to read them. I think a fuller color change would work better. It just needs contrast, more contrast than it has now.

9

I see your point.

In my opinion the problem is that a non-neutral coloured title would compete with the coloured band.

10

You see why I haven’t found an optimal solution yet. My abilities + my constraints = what we’ve got.

11

This looks good to me. I would like it this way.

12

I can’t come up with something more colored :confused:
It’s quite the same than before but it’s more readable ; but there is less contrast :

#story\_pane .read a.NB-feed-story-title {   
color: #6D707F;   
}   
#story\_pane .read .NB-feed-story-header .NB-feed-story-date {   
color: #6D707F;   
}