Custom CSS overwritten by default.css

Hey Christian!

I do have the exact same problem as discussed here, though I believe that it's actually still not resolved. Let me first describe my situation before asking the specific question I have:

- Like probably everybody I embed the used citation list using <script src="https://bibbase.org/show?MY-BIB-FILE&jsonp=1&theme=SOME-THEME"></scrip>
- I am not aiming at using a specific self-defined css since your default themes already look awesome!
- But the webpage that embeds the bib (i.e., that includes the above-mentioned line) does include various css files. Note that I do not have control over the css files loaded by the webpage because I use a Content Management System (CMS) that includes all these css files by itself. I do not have control over this part of the code, so those css files are definitely loaded, I cannot prevent this. (Also, this does make sense as they define the style of all the rest like the navigation and so on.) However, these css files mess up the appearance of your otherwise great-looking bib list!

Thus finally my (first) question:
(1) How to tell your bibbase list that it shall *not* be screwed up by all the other css definitions? I would assume that this is "outside the power" of your plugin since the included content will *automatically* be formatted by the css files of the page -- you couldn't even possibly change that, is that correct?

But *if* I am right and you can indeed not change this behavior,do you still know how to fix it? E.g., can one put a certain environment *around* the "script" line in which the other css definitions are ignored? Otherwise I really don't know how to include it, as it's really messed up.^^

To be precise: the titles of all entries are huge (whereas the authors use a reasonable font side), and also the links placed below it (like doi or the entries starting with url) use this (too large) font size.

I was also experimenting with loading a bibbase-specific css file to compensate for these other unintended changes. However, in your only css example file (here: https://bibbase.org/css/styles/default.css) I wasn't even able to find the definition of the font size of the paper titles and links, so I also couldn't set it to a reasonable size.

Thus,
(2) where in this example css is the font size of title and links defined?

Could you point me to your site? Then I can have a look. I definitely think you are on the right track though, of adding more CSS that defined font-sizes for the currently unstyled items. The reason you can't find any mentioning of font-size for the titles is because our theme specifically doesn't want to overwrite the style suggested by the surrounding web page. This is so that it is consistent with the rest of the page. Usually this is a benefit, but it sounds like your page defined certain styles that don't make much sense. I've be curious to take a look and see why, but in the end the solution will almost certainly look something like:

.bibbase_paper {
    font-size: 14px;
}

Or something like that.

By the way, if you are interested in more examples: all our themes have their own CSS file, e.g., https://bibbase.org/css/styles/dividers.css, and there is also a shared one that is common to all unless explicitly disabled: https://bibbase.org/css/styles/common.css .

Thank you for your super-quick response!

I've just finished testing everything:

- When only calling bibbase with my bibtex file and the css as argument (i.e., directly in a browser without being embedded in the webpage that uses other css files) then your code snippet (using ".bibbase_paper") does indeed work as hoped! I.e, the entire entry including title and links gets adjusted as intended.

- However when including the same into my website, then it only changes all after the title, i.e., proceedings title and so on, but the title itself as well as the links beneath each entry remain overly large (as defined by the website css files).

So I went looking through your example css files and found a title-specific option (i.e., .bibbase_paper_title). That however works nowhere (i.e., also when called directly in the browser), so I guess that doesn't mean what I think it does or it is simply overwritten by some other style. Any other ideas? Since the title remains the same whereas all the stuff afterwards use different sizes there *must* be something that's differentiating these two elements. Do you know what that is? (I.e., what's the property that's specific to the title and link size?)

I checked the HTML code of the generated website and it appears as if all website css files are loaded before/above the bibtex inclusion -- if that helps.

[Suggestion: By the way, and thus orthogonal to my actual question: What's your opinion about linking these two css files you just posted also in the table (https://bibbase.org/documentation) that mentions that such css files can also be used? I would highly expect that this is *very* useful for designers wanting to make their own adjustments. Those files are public already anyway, so why not linking them there.]

Regarding you taking a look at said website: I'd be happy to, but it's not online yet. I'm testing it locally so far. I hope that I can publish it next week. But I can let you know that it's the grav CMS with theme Vela_v.1.2.3 (https://github.com/danzinger/grav-theme-vela). In case you don't know grav, you can find it here: https://getgrav.org/ -- a *really* great CMS that's based entirely on markdown files, thus very easy even for "normal people" without webdesign skills!