[Theme][GitHub] clean-greader - Google Reader inspired

[ABkeeper]

Good afternoon.
How can I expand the column with the categories? How can I place a message in the middle?
Thank you.

the "width" part of the code is what controls the width of the feeds on the lhs. I changed mine to 300px so I could see more of the feed names.

Сolumn with the names of categories fixed. Thank you.

But the question: "how to set articles to the center?" is remained open. On the widescreen monitor is very uncomfortable ... All shifted to the left ...

[naeramarth7]

But the question: "how to set articles to the center?" is remained open. On the widescreen monitor is very uncomfortable ... All shifted to the left ...

Find the following part

Code: Select all

div.cdmContentInner {
  display: block;
  float: left;
  max-width: 600px;
}


and change it with to

Code: Select all

div.cdmContentInner {
  display: block;
  max-width: 600px;
  margin: 8px auto;
}


where max-width is you prefered width of the feeds content.

[ABkeeper]

But the question: "how to set articles to the center?" is remained open. On the widescreen monitor is very uncomfortable ... All shifted to the left ...

Find the following part

Code: Select all

div.cdmContentInner {
  display: block;
  float: left;
  max-width: 600px;
}


and change it with to

Code: Select all



div.cdmContentInner {
  display: block;
  max-width: 600px;
  margin: 8px auto;
}


where max-width is you prefered width of the feeds content.

Does not work!

[graymattr]

Previously, I had an edit to main.css to make the headline text slightly larger than the default (14px, IIRC). It looks like the structure of the main.css changed enough that it is not where it was. Would anyone mind pointing me the correct spot to make this edit?

It would be awesome if there was a setting in the web GUI for simple font size tweaks... I know that's probably more trouble than its worth, but I thought I'd throw it out there. Love the theme!!

[naeramarth7]

Previously, I had an edit to main.css to make the headline text slightly larger than the default (14px, IIRC). It looks like the structure of the main.css changed enough that it is not where it was. Would anyone mind pointing me the correct spot to make this edit?

First of all, thanks for your feedback!
The built-from-scratch update was completely re-written using scss to make it easier to maintain - for me at least (;

There are two possibilities to change the headline font-size:

1. If you run tt-rss on a linux server and have the sass-module installed, add font-size to the "css/partials/_articles.scss" file (line 137++) and run the "css/watch-main.scss.sh" shell script to apply the changes from the scss file to the css file itself. (Note, that you can abort the script Ctrl+C after it logged that the changes were applied).

Code: Select all

.titleWrap > a {
  color: $clr-fnt-main;
  font-weight: bold;
  font-size: 14px;
}


2. If you're not on a linux machine or not into changing the scss files, just append the font-size to the selector on line 1451++ of the "css/main.css" file:

Code: Select all

.claro #headlines-frame .hl .titleWrap > a,
.claro #headlines-frame .hl .titleWrap > .hlContent > a,
.claro #headlines-frame .hl .hlTitle > a,
(...) {
  text-decoration: none;
  color: #333333;
  font-size: 14px;
}


It would be awesome if there was a setting in the web GUI for simple font size tweaks... I know that's probably more trouble than its worth, but I thought I'd throw it out there. Love the theme!!

Unfortunately that's not possible for pure theming. CSS theming just changes the look and feel of tt-rss but we're not able to change the behaviour, remove or even add features. Well, we can remove them by hiding the option itself (; Using scss I could implement an additional scss file with different setting - like container width font-size or styles, etc. - but in that case you have to be able to "compile" the scss files.

[graymattr]

Awesome, thanks for the tips! I'll give that a shot!

[Gizmoh]

The Theme is really great, thank you.

I have some small problems with the icons not showing:


I've installed the newest tt-rss version on a windows server running microsoft IIS and a MySQL Database. Any idea why the icons don't show?

Thanks.

[naeramarth7]

The Theme is really great, thank you.

I have some small problems with the icons not showing:


I've installed the newest tt-rss version on a windows server running microsoft IIS and a MySQL Database. Any idea why the icons don't show?

Thanks.

Currently only Chrome and Firefox are supported. Since I'm on Linux only at home, I cannot support Internet Explorer (as mentioned in the description on GitHub). The problem is caused by pseudo elements not working correctly on Internet Explorer - and as far as I can see you are using IE9.

Sorry for now.

Sent from my C6603 using Tapatalk [url='http://tapatalk.com/m?id=10']now Free[/url]

[Gizmoh]

Hmm, sorry, that's not IE9, i've tried it on Firefox and Chrome and it doesn't work.

[eulergui]

Dear friends, this theme is very very nice!

The only problem to me was the image size on posts. I have a lot of feeds only with images (nsfw, art, paints in general) and the images in this theme are aways in 128px of width. I've changed the following lines from:

Code: Select all

  .claro .cdm.active .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.active .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.active .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child,
  .claro .cdm.expanded .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.expanded .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.expanded .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child {
    float: left;
    margin: 0 32px 16px 0 !important;
    max-height: 128px;
    max-width: 128px;
    width: auto;
    height: auto; }


to

Code: Select all

  .claro .cdm.active .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.active .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.active .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child,
  .claro .cdm.expanded .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.expanded .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.expanded .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child {
    float: left;
    margin: 0 32px 16px 0 !important;
    max-height: auto;
    max-width: 100%;
    width: auto;
    height: auto; }


And now my images shows very nice!

Theese lines of code are the numbers 1576 to 1587 and I've changed only the lines 1584 and 1585 (max-width and max-height).

For now, thank you very much for the theme and sorry if my english is confuse... I speak only Brazilian Portuguese.

[esheesle]

In unread only view as I scroll through 1 article is always left showing at the top of the screen, causing auto mark as read to fail to mark that article. Other than that, love the theme.

Oh, and occassionally high count numbers bleed outside their boxes.

[naeramarth7]

In unread only view as I scroll through 1 article is always left showing at the top of the screen, causing auto mark as read to fail to mark that article. Other than that, love the theme.

Sorry, the theme was not designed using "auto expand mode". Nevertheless, you can fix this behaviour by adding the follwing either to

• the main.css
• or the partials/_treeview.scss (and compile using the ./watch.main.scss.sh script)

Code: Select all

#headlines-spacer { height: 100% }

I will not implement this into the theme yet, since I prefer not having all the whitespace below the last post.

Oh, and occassionally high count numbers bleed outside their boxes.

This one's fixed in the latest commit - thanks for reporting! (:

[tcaulfld]

Love the theme, I just have one request. Is there any way to reduce the number of new articles shown in the 3 panel view.

Something like this:


EDIT: It also appears that the headlines do not scroll correctly. They do not move until you are almost 20 articles past what is showing in the articles list.

[naeramarth7]

Love the theme, I just have one request. Is there any way to reduce the number of new articles shown in the 3 panel view.

Correct me, if i'm wrong, but aren't you just looking for the spacer panel between the article list and the preview? (; The resizing changes you make are saved by ttrss itself.

EDIT: It also appears that the headlines do not scroll correctly. They do not move until you are almost 20 articles past what is showing in the articles list.

Right, thanks for the hint. Noticed, that there's a bug in the "normal" feed display - didn't realize that since I use the "combined" one.
This was just fixed in the latest commit.

[mjb]

I follow photo blogs, so the 128px first image is a real dealbreaker. For now, I am using the max-width: 100% workaround suggested by eulergui. I saw the new FAQ entry suggesting how to add overrides on a per-domain basis, but I don't follow any blogs where a hard 128px limit would be better than 100% max-width.

The other main change I make is supporting wider screens; since the rewrite, the theme seems to be made for 1200px maximum screen width, whereas I think 1680px screen widths are pretty common, at least in my household. It still collapses nicely.

Of course we don't have to actually edit the .css; I use the Customize Stylesheet button on the Preferences page, and just paste in all my overrides (after temporarily disabling the LastPass browser extension, which interferes with some of Chrome's form submissions, as noted in another discussion):

Code: Select all

/* use a wider view for 1680px width screens, rather than 1200px (see also 1180px setting below) */
#main { max-width: 1620px; }

/* preferences help text should be formatted like tt-rss.css says, and make it smaller & italic */
div.prefHelp {
    color : #555;
    padding : 5px;
    font-size: 80%;
    font-style: italic;
}

/* tidy up feed title bar, especially to handle feed icons, which come in wacky sizes */
img.tinyFeedIcon { height: 16px; }
div.cdmFeedTitle {
background-color: #eee;
padding-left: 2px;
height: 16px; }
a.catchup {
  padding-left: 1em;
  color: #cdd;
  font-size: 75%;
  font-style: italic;
}

/* Narrower left margin (44px instead of 71px), greater width (see also #main above) */
.claro .cdm.active .cdmContent .cdmContentInner,
.claro .cdm.expanded .cdmContent .cdmContentInner {
  padding: 0 8px 0 50px;
  max-width: 1180px;
}

/* main feed image is often real content, e.g. on photo blogs, so don't shrink it */
  .claro .cdm.active .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.active .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.active .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child,
  .claro .cdm.expanded .cdmContent .cdmContentInner div[xmlns="http://www.w3.org/1999/xhtml"]:first-child a img,
  .claro .cdm.expanded .cdmContent .cdmContentInner p:first-of-type img,
  .claro .cdm.expanded .cdmContent .cdmContentInner > span:first-child > span:first-child > img:first-child {
  float: none;
  margin: 0 0 16px 0 !important;
  max-height: none;
  max-width: 100%;
}

/* scroll bars are too hard to see by default */
::-webkit-scrollbar-track {
  background-color: #ccc;
}
::-webkit-scrollbar-thumb {
  background-color: #ddd;
}