Custom css does not apply

Tiny Tiny RSS Themes and Plugins
1

Installed tt-rss yesterday on the server of my hostingprovider. Very happy with it until now.
Using the default theme, I would like to change the font type and size. Cut a script from this community (see below) and pasted it in Preferences/General/Customize theme.
Afther that I saved the configuration and reloaded, but nothing changed in font and size. Also other scripts (emulating Google Reader) do not work in the Custom CSS Section.
What am I doing wrong?

div.postContent {
font-size : 21px ! important;
line-height : 1.5em ! important;
color : #000000 ! important;
font-family : georgia, serif ! important;
max-width : 850px ! important;
}

2

November 2018.

I rather suspect that postContent is not longer a class used.

3

Had a quick look and I couldn’t find postContent either. It’s content or content-inner. Still, though, I also wanted to increase the font-size but .content-inner { font-size: 120% !important; } did not work. According to Firefox’ Inspector the custom CSS is applied before the default CSS, and since the latter uses !important the custom CSS never applies. For the time being I worked around it using .content-inner p { font-size: 120% !important; }. But that’s just a bloody workaround.

e: My installation is at commit 2558fcbe21 (from 2 days ago).

4

''the custom CSS never applies", you wrote. You think that’s a bug in the default CSS?

5

I am new to tt-rss, too. I think it would be great if someone with a better understanding could have a look at how/when the custom CSS is applied.

6

ITT: people with no understanding of specificity (nor CSS in general) try to apply rules to nonexistent selectors because of baby-duck syndrome.

give me one reason to not gas this and probate everyone involved into next month.

default theme doesn’t use important for any font sizes. additionally, that’s not how any of this works.

if you don’t understand something, don’t mislead people by giving bad advice.

7

Sorry, I thought I was doing the opposite of giving an advice. But English is not my native language.

Anyway, you are of course right that I missed the fact that the default theme and the compact themes which I used are different in regard of the use of !important.

8

yes, compact is the only exception. in order for your important selector to override another, you need to use higher specificity. this isn’t a hack or anything of the sort, that’s how CSS works.

10

technically yes but you would be always better off with specificity, rather than trying to rely on rule order.

e: it just feels, you know, more reliable to me. :slight_smile:

e2: within tt-rss i guess it could go both ways with rule order: if user has specific theme selected, then theme_css is placed above user stylesheet rules, otherwise (in case of default night/day autoswitching theme or an invalid user theme) CSS link element is appended to <head> so it’s going to be placed below user rules.

i suppose this inconsistency may be considered a bug but personally i would suggest (again) to use specificity and forget rule order exists.

e: (i just can’t stop posting, can i?) if we want to make this :100:% kosher we need to move user css rules below plugin rules and use insertBefore(.. firstChild ..) for the autogenerated rule. if someone wants to file a PR for this, i’ll merge it.

11

This is what works for me to give me Segoe UI on Windows and Ubuntu everywhere else (or failing that, something else):

.cdm .content-inner {
  font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}

Hopefully this will work for you, as well.

12

Yes, AngryChris, that works! Thanks a lot.
May I ask you to tell me which code I have to paste in Custom CSS to adjust the fontsize of the left (feed)bar and the height of the vertical space between these items?
I looked for a list with the names and explanation of all the elements, but can not find it…

image