New Theme

Post plugins and custom CSS snippets here
enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

New Theme

Postby enzipher » 24 Mar 2013, 11:53

As many others I moved on from Google Reader (which I actually find quite bad) along with a bunch of other readers. TT-RSS however simply kicks butt with everything else. Didn't really like the default layout though, so I made one which I find to be easier on the eyes. It's not a huge change as it mostly affects the article layout.

Main changes:
* Bigger headlines
* Bigger article copy
* Bluish color scheme
* Removed article footer
* Fixed width (780 px)
* Opacity changes for read items
* Distinct but non-intrusive highlights for selected article
* Hover effect for article (same as selected)
* Feed list: Smaller text (to fit more feeds)
* Feed list: Removed indent for feed names (allows for longer feed names)

I made this theme for the "Automatically expand articles in combined mode" + "Combined feed display" settings. It does work in "Headlines" mode as well, but it gets a little too cluttered for my taste. I also made it from scratch, so I can't guarantee it looks okay for all settings.

Code: Select all

/**
 * Custom theme for Tiny Tiny RSS.
 * Author enzipher
 * Version 1.3 (ttrss >= 1.7.4) @ 2013-03-27
 *
 * Changes:
 * v.1.3 - Removed outline from titles.
 * v.1.2 - No item header border without "Automatically expand articles in combined mode".
 *       - Padding fix for attachment button.
 * v.1.1 - max-width override for article content.
 */

/* Item rows */
#headlines-frame > div {
  border: 1px solid #ccc;
  border-width: 1px 4px;
  border-radius: 7px;
  background-color: #fff;
  margin: 5px 2px;
  overflow: hidden;
  position: relative;
}

#headlines-frame > div.Selected,
#headlines-frame > div:hover {
  border-color: #4A88AE;
  background-color: #FFFFFF !important;
}

/* begin alternative row style - limited width */
#headlines-frame > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
}
/* end alternative row style - limited width */

/* Item header */
.cdmHeader {
  background-color: transparent !important;
}
.cdmHeader .titleWrap .title {
  color: #4A88AE;
  font: bold 16px Arial !important;
  outline: none;
}

/* Item feed name */
.cdmHeader .hlFeed {
  /*background-color: #7FC2FF;*/
  /*border-radius: 3px;*/
  line-height: 1;
  margin-top: 4px;
  padding: 2px 3px;
}
.cdmHeader .hlFeed a {
  color: #4A88AE !important;
  font-size: 11px;
}
.cdmHeader .titleWrap .hlFeed a:hover {
  text-decoration: underline !important;
}

/* Item content */
.cdmContent {
  border-top: 1px dashed #ccc;
}
div.cdmContent a {
  color: #4A88AE;
  text-decoration: none;
}
div.cdmContent a:hover {
  color: #4A88AE;
  text-decoration: underline;
}

.cdmContent .cdmContentInner {
  color: #333333;
  font-size: 14px;
  margin: 10px;
  line-height: 1.35em;
}
.cdmContent .cdmContentInner p {
  max-width: none;
}

/* Remove border from spacer */
#headlines-spacer {
  border: 0 none !important;
}

/* feed list */
.dijitTreeRow {
  font-size: 11px;
  padding-left: 0 !important; /* < 1.7.5 */
}
.dijitTreeContainer .dijitInline {
  padding-left: 0 !important; /* >= 1.7.5 */
}


/* Change opacity for read items */
#headlines-frame > div {
  opacity: .5;
}
#headlines-frame > div.Unread,
#headlines-frame > div.Selected,
#headlines-frame > div:hover {
  opacity: 1;
}


/* Remove clutter */
div.cdmHeader span.author,
.cdmContent .cdmFooter {
  display: none;
}

/* Item content corrections */
.Selected .cdmContentInner td,
.cdmContentInner td {
  border: inherit !important;
  background: transparent !important;
  font-weight: normal !important;
}


Tip of the day:
To switch themes easier, put your custom css files in a /themes directory and add this in the "Customize stylesheet" box:

Code: Select all

@import url('themes/enzipher.css');


Hope you like it!

Lastly I would like to give a big Thanks to the author of TT-RSS! Great work!

Cheers,

EDIT: I can now edit this post so I will try to keep it up-to-date with the latest changes.
Last edited by enzipher on 27 Mar 2013, 22:10, edited 1 time in total.

User avatar
MadAdmin
Bear Rating Trainee
Bear Rating Trainee
Posts: 8
Joined: 19 Mar 2013, 13:00
Location: Russia
Contact:

Re: New Theme

Postby MadAdmin » 24 Mar 2013, 13:35

You can see Screenshots?

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 24 Mar 2013, 13:56

I knew there was something I forgot... ;) Doesn't seem like I can update my original post, but here's a screen shot.

enzipher.png
enzipher.png (20.42 KiB) Viewed 8094 times

(don't mind the black scrollbar, it's just my Firefox theme)

EDIT: Here is an article with some copy.
article.png
article.png (15.96 KiB) Viewed 8087 times

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 24 Mar 2013, 14:16

Noticed a bug in the second screenshot... This update removes the default max-width setting that makes the text break.

Code: Select all

see initial post
Last edited by enzipher on 28 Mar 2013, 01:36, edited 1 time in total.

Usul
Bear Rating Trainee
Bear Rating Trainee
Posts: 38
Joined: 23 Jul 2008, 10:36

Re: New Theme

Postby Usul » 24 Mar 2013, 14:26

enzipher wrote:Tip of the day:
To switch themes easier, put your custom css files in a /themes directory and add this in the "Customize stylesheet" box:

Code: Select all

@import url('themes/enzipher.css');


Simple idea, but very usefull. Thanks!

User avatar
HeikoAdams
Bear Rating Master
Bear Rating Master
Posts: 101
Joined: 19 Mar 2013, 00:17

Re: New Theme

Postby HeikoAdams » 24 Mar 2013, 14:41

There is still a max-width which should be removed from

Code: Select all

#headlines-frame > div

Aldursil
Bear Rating Master
Bear Rating Master
Posts: 106
Joined: 18 Mar 2013, 03:11

Re: New Theme

Postby Aldursil » 24 Mar 2013, 20:33

I've installed this according to the directions and the theme is not being displayed for me. Is there anything else I need to do to get it working?

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 25 Mar 2013, 04:25

@HeikoAdams The max-width in the item wrapper div I added by purpose to my preference. You can change or remove it if you'd like. Just change, comment out, or delete rows 27 - 33.

@Aldursil You could just copy the code and paste the css into the "Customize stylesheet" box if you wish. The alternative solution is to easily switch css files and keep the old ones.

Aldursil
Bear Rating Master
Bear Rating Master
Posts: 106
Joined: 18 Mar 2013, 03:11

Re: New Theme

Postby Aldursil » 25 Mar 2013, 04:47

Thanks

That worked. I was curious how you enable the theme if you put in "@import url('themes/enzipher.css');" into the Customize dialog.

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 25 Mar 2013, 05:07

1) Make a directory named "themes" in the install directory of ttrss.
2) Open a new notepad and copy the CSS into it.
3) Save the notepad in the new "themes" directory as "enzipher.css" (of course you can name it whatever you want, just make sure the extension is ".css")
4) Add

Code: Select all

@import url('themes/enzipher.css');
in the "Customize stylesheet" box and save.

That should do it.

Inspector_Winship
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 25 Mar 2013, 17:49

Re: New Theme

Postby Inspector_Winship » 26 Mar 2013, 05:50

Fantastic theme, enzipher. One question - I'd like to add the source after the article title. I looked through the CSS but it wasn't obvious how to do that - any help? Thanks again for sharing.

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 26 Mar 2013, 10:28

I believe that the source only shows up in the grouped views, i.e. when clicking a folder, not when viewing a single feed. At least there shouldn't be anything in the css that affects that. Hope that helps.

And while am here.. Made some corrections.

Code: Select all

see initial post
Last edited by enzipher on 28 Mar 2013, 01:35, edited 1 time in total.

scottjl
Bear Rating Trainee
Bear Rating Trainee
Posts: 8
Joined: 17 Mar 2013, 21:51

Re: New Theme

Postby scottjl » 27 Mar 2013, 18:11

nice theme and great implementation. thanks!

enzipher
Bear Rating Trainee
Bear Rating Trainee
Posts: 10
Joined: 24 Mar 2013, 10:52

Re: New Theme

Postby enzipher » 27 Mar 2013, 22:04

Inspector_Winship wrote:Fantastic theme, enzipher.

scottjl wrote:nice theme and great implementation. thanks!

Thanks. You are welcome!

To anyone who use it.. Let me know if you run into any issues and I will see if I can correct things.

User avatar
unlogy
Bear Rating Trainee
Bear Rating Trainee
Posts: 15
Joined: 27 Mar 2013, 01:21
Location: Montreal
Contact:

Re: New Theme

Postby unlogy » 27 Mar 2013, 23:57

Cool stuff enzipher

I'm fairly new to TT-RSS and I'm really having fun with some of the customizations.

I'm a computer support tech so I don't mind poking around, but CSS messes with my brain (can't fix them with a hammer) I'd like to change the font or font-family, is there something I can add or change to your CSS to change the font?

Thanks again!


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 3 guests