Flat & Clean GUI style

  • 18
  • Idea
  • Updated 3 years ago
I'm new to NewsBlur, and really like its features but I just can't used to its design. There are good parts, but still it needs some polishing.

I've found this userstyle: https://userstyles.org/styles/103856/... - and while there are some minor bugs in it, with my experience I say it is awesome. I suggest you make it as an option so more users can use it - because while it works with example Greasemonkey, I can say it is too well done, for letting it stay at a third party site.

Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
  • quite happy now with this style

Posted 5 years ago

  • 18
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
Ok, I might consider a theme feature, but I don't think positively of that flat design. I would want to change it. If I do, it'll suffer the same fate as the default NewsBlur interface.

I'm sure there are plenty of edge cases that just aren't taken into consideration, but I'd still have to support it. It's a ton of work every time I make an interface change, as I'd have to constantly be checking yet another mode that I don't use all the time. I have that issue now with the pane positions and story modes, and I'd like to avoid that. Not sure how to square that.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
I read before on another topic that you considering adding a user CSS field. What if you won't implement complete themes, just saved user styles. That way the author can still continue to work on it, other users can use it as a base, the requested dark theme can be born, for average users it would be clear that they are user created themes, and you don't have to deal with them.

Also if you make some major change on the site, the original author, or someone else can update them. If there is a bug, someone can fix it. Imagine it as open sourced themes - you just give an easy, one click platform for using them.

Edit: just for the record, this theme made me consider going to premium.
Photo of Utility Tool

Utility Tool

  • 1 Post
  • 1 Reply Like
I would just like a dark/night theme and the ability to quickly switch to it and back.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
I have made some changes on the userstyle, here is an updated version: https://userstyles.org/styles/104488/...

2014-08-19:
- more cleaner style
- Share dialog displays correctly
- Save dialog displays correctly
- Changed the font to Segoe UI because of the foreign characters
- made the article list items multilined to avoid loading more than 60 article contents at once in split view
- enhanced article titles in the article list
- the read/unread difference is more clear at the article list and at the stories
- styled the buttons
- styled the footer

Please give a star to the idea, if you like it.

Photo of Hampus

Hampus

  • 212 Posts
  • 31 Reply Likes
Great work. You should go all the way and make it a userscript or addon so it can be configurable as well. There are a few things I'm not quite happy (new icons, dotted lines between panes, some fonts) with and if I'm not mistaken Stylish won't do update for a style if I change it.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
It is a work in progress, and I plan to update it further, but the best thing would be that if it would be implemented directly into NewsBlur, so not only it would update as soon as it is changed, but more people could use it without any knowledge of third party extensions and sites.
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
I'm liking the latest changes a bit better. Can you fix some of the spacing and centering on those share/train buttons?
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
I updated the userstyle - still here: https://userstyles.org/styles/104488/... ;)

2014-08-19 more:
- splitters/resizers restyled
- vertical cursor indicator is visible again in articles
- "Shared by" part polished
- made the icons a little less "loud"
- realigned the share/train button contents
- fixed some colors in the footer
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
Don't forget to always post a new screenshot on an updated style.
Photo of Darren Kay

Darren Kay

  • 68 Posts
  • 19 Reply Likes
I think the upload/paste a custom CSS file might be a good solution. Maybe create the current theme as a template to use and customise.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
Here is a new update to the userstyle: https://userstyles.org/styles/104488/...

2014-08-25:
- fixed tagging buttons at contents
- styled comment section headers
- fixed collapse, unread, text, icons allignments in the tree
- fixed resizer splitters for top and down view
- increased compatibility with custom text sizes

Photo of Sviataslau Lohinau

Sviataslau Lohinau

  • 2 Posts
  • 0 Reply Likes
Story didn't open in LIST view with TEXT fetching selected. It just becomes read and nothing else happend. Tested on Firefox under Ubuntu 14.04 and WinServer 2012 R2 Standart.
Top story selected (yellow) but not opened.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
New update here: https://userstyles.org/styles/104488/...

Unfortunately I don't have a premium account, but I tried my best to figure out River Of News and Text mode.

- removed Open Sans (not used anymore)
- many fixes for List view for Feed and Text mode (hopefully)
- date is only hidden in split view
- tweaked River of News view

Photo of Sviataslau Lohinau

Sviataslau Lohinau

  • 2 Posts
  • 0 Reply Likes
Text mode works!
Thx and best of luck.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
New update: https://userstyles.org/styles/104488/...

I was thinking about how I could highlight trained articles a little more, and finally I came up with a solution, tweaked it a little bit, and I really like the result?

What do you think?

- trained articles are now highlighted with color in the articles list

Photo of J.Quintanilla

J.Quintanilla

  • 8 Posts
  • 0 Reply Likes
Good job on this. Looks great. Thanks for all the hard work.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
100 downloads! Thank you! Let's celebrate it with an update:

2014-09-15:
- more difference between read and unread articles
- more highlight for the selected article
- green highlight won't show up at saved articles

Photo of J.Quintanilla

J.Quintanilla

  • 8 Posts
  • 0 Reply Likes
Love the theme. But i was wondering, if you had any plans for the following:

- The color loading bar at the top of the list feed, when items are loading.
- The ability to use the selected font (such as whitney or helvetica) on the stories, rather than Arial as you've chosen for the overall theme. Arial is nice for all the other elements, but would be nice to keep your choice of font for the stories feed.
- Dark theme?

I played around with your code to make my preferred changes, such as displaying time stamps, tighter paragraph spacing, and smaller font size for the feed list. But I'm no code expert, so thanks for this theme. You've made some great design choices.

Thanks for the hard work.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
I'm glad you like it, and sorry for the late answer.

- Till now I have never seen a loading bar, things are fast here - could you give me a screenshot? Maybe I saw it, but didn't realized that it is a loading bar.

- I tried changing the style to respect the selected font, but I think this is something which can't be handled on my side: it seems I have only two options, change everything or nothing.

- Dark theme is already made by another user - https://userstyles.org/styles/86275/n... - which I suppose can be used the same way as mine until Samuel feels that it is time for adding custom made themes for NewsBlur.
Photo of J.Quintanilla

J.Quintanilla

  • 8 Posts
  • 0 Reply Likes
Photo of J.Quintanilla

J.Quintanilla

  • 8 Posts
  • 0 Reply Likes
The blue bar is the loading bar. It turns different colors when its loading; it is usually at the top of the feed list, but sometimes halfway like shown above, when it's loading more stories to the feed. Only see the loading bar during internet slow times.

Thanks for the reply. I do hope that Samuel will one day updated the look of Newsblur, or allow custom themes to run natively.

Thanks for trying and experimenting to see if you could change the font.

Last time I checked, the dark theme you mentioned was broken; lack of updates. I'll have a look once again.

Thanks for all the hard work. Your theme was one of the big factors why i left Feedly for Newsblur.
Photo of Gareth Coles

Gareth Coles

  • 13 Posts
  • 0 Reply Likes
The latest version of this appears to hide the summary in the item list for most feeds, which causes my browser to lag horribly as it desperately tries to fill the list up.

Photo of Gareth Coles

Gareth Coles

  • 13 Posts
  • 0 Reply Likes
I just ran through all my extensions and disabled them in groups to check; still the same problem. I also disabled my Steam link-filter tampermonkey script (which is also where I have the theme installed), and I still have the same problem. \o/
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
And if you do nothing else just disable the theme - Stylish allows that - the text will appear? What if it is disabled and you reload? If that way it appears, then I'm out of ideas.

Anybody else noticed this?
Photo of Gareth Coles

Gareth Coles

  • 13 Posts
  • 0 Reply Likes
I'm not using Stylish, I'm using Tampermonkey. I'll try again with Stylish.
Photo of Gareth Coles

Gareth Coles

  • 13 Posts
  • 0 Reply Likes
Using Stylish fixed it. How odd..
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
Strange, but at least it works! Happy to hear that! :)
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
Strange... same feed, same article, working here perfectly.

Could you check it in Firefox?

Photo of Gareth Coles

Gareth Coles

  • 13 Posts
  • 0 Reply Likes
Same issue in Firefox (Waterfox 31.0)
Photo of geoffwood

geoffwood

  • 48 Posts
  • 3 Reply Likes
I just found this and I'm already a fan, it looks great, thanks for all your hard work
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
You are welcome! You are now one of the 300 users, who installed this :)
Photo of geoffwood

geoffwood

  • 48 Posts
  • 3 Reply Likes
The only quibble I have, and it is only a quibble, is the distinction between read/unread articles. Hopefully I can verbalize it correctly. In the standard theme, as soon as I click on a story in the story list, the text turns to grey and stays grey whether that is the highlighted story or not. In your style, the text for read stories is grey, but if I click on the story, so that it is highlighted in yellow, the text switches from grey to the black text used on an unread article.

Long story short (probably too late for that) in the std style as soon as i click on a story, it is clear that it is marked read, with the flat style, the change is not as distinct, and changes depending on whether the story is highlighted or not.

As I said, just a quibble, and there may be a good reason for the difference, just thought I'd mention it.
Photo of Brian Urso

Brian Urso

  • 1 Post
  • 0 Reply Likes
OMG - I love this theme, wouldn't even look back now.
Thank you for all the hard work up to this point and into the future!
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
@geoffwood you are right, I updated the theme.

https://userstyles.org/styles/104488/...

2014-10-18:
- changed the selected article look

Photo of geoffwood

geoffwood

  • 48 Posts
  • 3 Reply Likes
Wow, Thank you!!!!
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
wzol, if I change the markup and you change the style, do users get notified that you've updated the style or do they need to manually check?
Photo of Hampus

Hampus

  • 212 Posts
  • 31 Reply Likes
That would probably depend on whatever addon one use to apply the style. I know Stylish for Firefox can auto update styles, as long as the user doesn't do any tweaks of their own to it anyway.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
As I know they don't need to manual check, Stylish - as Hampus said - auto updates the changes. That said, I've seen before a case, that my changed style wasn't auto updated on an another computer, I had to do it manually - no idea why.
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
500 installs! I'm glad you like it! :)
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
600 installs! I hope everyone likes it. ;)
Photo of Jens K. Loewe

Jens K. Loewe

  • 18 Posts
  • 0 Reply Likes
Would you permit me to take this user style as a base for a feedly-like style?
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
Yes, of course, but please mention the original author in the style - who made this style before I started to work on it.
Photo of Jens K. Loewe

Jens K. Loewe

  • 18 Posts
  • 0 Reply Likes
Great, thank you. :-)
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
Just to add to this, if you fork it and the fork gets popular, I'll add native support so users can just select from the theme garden.
(Edited)
Photo of wzol

wzol

  • 40 Posts
  • 11 Reply Likes
Native support for custom user CSS would be great. The authors could maintain it, more users could use it (more easily), and you Samuel, won't need to test it or work on it.