How to style Zotero references in WordPress posts = Custom CSS

Have you been dragging references from Zotero to your WordPress blog post, only to find that your WordPress theme does not have style instructions for the divs Zotero uses?

Zotero’s div classes

Perhaps like me you have noted in html view that the reference dragged from Zotero is automatically styled with “<div class=”csl-bib-body“> and <div class=”csl-entry”>”?

Adding Custom CSS to WordPress Theme

Tonight I finally worked out  how to tell my blog what style it should apply to the div classes that come with citations dragged from Zotero. I took a snippet of bertobox‘s solution, and looked at my Theme Options, finding an option to add a custom css style.

Image depicts WordPress Dashboard, Appearance menu, Theme Options, CSS Styles, Custom CSS Styles box

Custom styling Zotero classes for APA

.csl-bib-body{padding-left:0;margin-left:0;}
.csl-entry{margin-left:2em;text-indent:-2em;margin-top:1em;margin-bottom:1em;}

Limitations

I use Cyberchimp’s free Responsive II theme. I do not know if the theme options available for it are common to any others.

Mind, this designates only one particular style (the style above is for APA). If I wanted to use different citation styles for different posts, I’d need a different solution.

Hat tip/demonstration:

bertobox. (2011). CSS-for-APA-Style-references. Retrieved 29 July 2015, from https://github.com/bertobox/CSS-for-APA-Style-references

Leave a Reply

Your email address will not be published. Required fields are marked *