0
Answered

Custom CSS overwritten by default.css

David Harris 7 years ago updated by Prof Chaos 10 months ago 6
I would like to modify the the side theme and use my own custom css. I can load the bibbase into the page using javascript as follows:

src="http://bibbase.org/show?bib=davidtharris.net%2Fassets%2Fharris.bib&jsonp=1&token=746bbacec7fac946fbc13c4da7a53a3c&css=davidtharris.net%2Fassets%2Fcss%2Fbibbase.css"



However the output (viewable at http://davidtharris.net/publications.html) does not appear as expected (the custom css just contains the common.css and side.css files). When I inspect elements in Chrome I find the following styesheets in this order:

davidtharris.net/assets/css/bibbase.css" type="text/css" media="screen">

"http://bibbase.org/css/styles/default.css" type="text/css" media="screen">

"http://bibbase.org/css/styles/common.css" type="text/css" media="screen">

Is there a way to not have the theme css files load or to load the custom css file after the side.css. I would like to add pdf and link icons in place of the text "link" and "paper"

Answer

+1
Answer
Answered
Hi David,

Good catch. The order in which the css links are added to the header were indeed wrong. The one specified with the css parameter should indeed go last. This is fixed now. If you are extending the side theme then just make sure you use that as a theme, so that in your custom css you don't need to overwrite (respecify) too many things. Please let me know if that doesn't work for some reason.

+1
Answer
Answered
Hi David,

Good catch. The order in which the css links are added to the header were indeed wrong. The one specified with the css parameter should indeed go last. This is fixed now. If you are extending the side theme then just make sure you use that as a theme, so that in your custom css you don't need to overwrite (respecify) too many things. Please let me know if that doesn't work for some reason.

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?

+1

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!

Thanks Christian, I got everything working like I wanted. I set it up to load the side.css theme. The only change I would like to make is have the PDF and link icons like in the default.css. However I think the .bibbase_icon { display: none; } that is loaded in side.css prevents the icons from being loaded (when I toggle that off in chrome the icons show up with the size I want). To fix this I set bibbase_icon to display: inline-block; and now I get the side theme with the link and pdf icons like I wanted.