0
Answered

Custom CSS overwritten by default.css

David Harris 6 years ago updated by Christian Fritz 6 years ago 3
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.

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.