Chalk Theme

Post plugins and custom CSS snippets here
asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Chalk Theme

Postby asyncopation » 26 Jun 2013, 00:04

This is a theme based off of the Feedly theme posted on these boards by levito.
It was the best starting point and has been modified to support new icons, colors, padding, fonts, and scrollbars.
It's the theme I use so thought I'd share it.

You must use a webkit browser like Chrome for the scrollbar styling.

https://github.com/asyncopation/ttrss-theme-chalk
theme-ss.png
theme-ss.png (218.86 KiB) Viewed 8471 times
Last edited by asyncopation on 29 Apr 2014, 21:02, edited 2 times in total.

Masiosare
Bear Rating Trainee
Bear Rating Trainee
Posts: 22
Joined: 23 May 2013, 01:08

Re: Chalk Theme

Postby Masiosare » 26 Jun 2013, 01:46

I love it. :D

Masiosare
Bear Rating Trainee
Bear Rating Trainee
Posts: 22
Joined: 23 May 2013, 01:08

Re: Chalk Theme

Postby Masiosare » 26 Jun 2013, 01:57

An small sugestion, maybe there should be an indicator of what is a folder and what is a feed? They all look the same (sans the favicon)

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 26 Jun 2013, 02:15

Masiosare wrote:An small sugestion, maybe there should be an indicator of what is a folder and what is a feed? They all look the same (sans the favicon)


Hmm... I would think the arrow icon next to the folders to expand/collapse was a good indicator. Adding a folder icon in addition to the arrow next to each category might be a little redundant, unless I'm missing a use case unique to your feeds/data setup.

Feel free to fork the theme on github and modify to your liking, but for me - since the theme aims for simplicity - I think the arrow is sufficient.

Edit: I now see that the arrows are missing. Fixing this now :D

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 26 Jun 2013, 02:36

Okay, that's fixed now and you should see the arrows I mentioned.

Thank you for mentioning that bug!

dtech
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 26 Jun 2013, 15:34

Re: Chalk Theme

Postby dtech » 26 Jun 2013, 15:36

Nice theme, although there is no angle-right.png in the chalk_images directory.

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 26 Jun 2013, 20:19

dtech wrote:Nice theme, although there is no angle-right.png in the chalk_images directory.


Thanks for letting me know. It's been added.

Larrypoppins
Bear Rating Trainee
Bear Rating Trainee
Posts: 26
Joined: 13 Apr 2013, 08:55

Re: Chalk Theme

Postby Larrypoppins » 27 Jun 2013, 02:10

The theme looks great.

I am reading in expanded mode, which causes the article headline to appear twice - once above the article and inside the article view. This is by design I assume, but is there an easy way to remove the outer headline/title in CSS?

Let me know if a screenshot would help. Thanks.

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 27 Jun 2013, 20:48

Larrypoppins wrote:The theme looks great.

I am reading in expanded mode, which causes the article headline to appear twice - once above the article and inside the article view. This is by design I assume, but is there an easy way to remove the outer headline/title in CSS?

Let me know if a screenshot would help. Thanks.


Yes, this is a feature to keep track of which article you're scrolling after you've passed the inner title (useful in long articles if you step away for a moment). However, it's a really easy change if you wanted to add this at the end of your own chalk.css file:

Code: Select all

#floatingTitle:not(:empty) {
  display: none !important;
}


Make sure that's at the end of the file and it'll overwrite the existing style for that element, and always hide the outer title.

banjaloupe
Bear Rating Trainee
Bear Rating Trainee
Posts: 4
Joined: 02 Jul 2013, 06:13

Re: Chalk Theme

Postby banjaloupe » 02 Jul 2013, 06:19

I'm having a bit of trouble-- it seems like one of the widths may be too small, since the text is squashed horizontally. Here's how it looks on Chrome v27 and on Safari v5

EDIT: Almost immediately after submitting this post I realized my error-- I wasn't running v1.8 of ttrss! Obviously updating that fixed the stylesheet. Sorry about the confusion.
Last edited by banjaloupe on 03 Jul 2013, 19:28, edited 1 time in total.

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: Chalk Theme

Postby levito » 02 Jul 2013, 23:28

#floatingTitle { display: none !important; } is enough :)

@asyncopation: Nice variation of the theme!
Which icons did you use? Maybe I could integrate them in the feedly theme? Would fit well.

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 05 Jul 2013, 23:18

levito wrote:#floatingTitle { display: none !important; } is enough :)

@asyncopation: Nice variation of the theme!
Which icons did you use? Maybe I could integrate them in the feedly theme? Would fit well.


Thanks levito! I used a couple of the icons from the "FontAwesome" collection (http://fortawesome.github.io/Font-Awesome/icons/) using a nifty python script to export them to png format (https://github.com/odyniec/font-awesome-to-png).

Feel free to copy the chalk_images folder and relevant css into your feedly theme and thanks for your work on the theme.

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: Chalk Theme

Postby levito » 06 Jul 2013, 00:26

Cool! This script is awesome! And the Font-Awesome icons fit so well I didn't recognize them as such.

And... sorry... you were right: to completely hide the floating title, you need

#floatingTitle:not(:empty) {
display: none !important;
}

... as you said. I needed to use this to not have a gray line when no floating title is active.

Larrypoppins
Bear Rating Trainee
Bear Rating Trainee
Posts: 26
Joined: 13 Apr 2013, 08:55

Re: Chalk Theme

Postby Larrypoppins » 06 Jul 2013, 07:53

Code: Select all

#floatingTitle:not(:empty) {
  display: none !important;
}


Thanks! It works fine, except I do have a thin line above the article. It's hardly noticeable, though.

Def my favorite theme so far.

asyncopation
Bear Rating Trainee
Bear Rating Trainee
Posts: 7
Joined: 25 Jun 2013, 23:51

Re: Chalk Theme

Postby asyncopation » 29 Apr 2014, 20:53

I've updated the theme to fix a few problems that came up with newer versions of ttrss.

More details on github:
https://github.com/asyncopation/ttrss-theme-chalk


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 1 guest