If you want to customize your badges to suit your website’s specific design, you can alter the following attributes:
- Background colour
- Highlight colour
- Font colour
- Font family
You can customize your badge’s colours by following these steps:
Determine the hex colour codes that you would like for your badge’s background, highlight and font colours. Check your website’s CSS or HTML source code to determine which colour codes it already uses.
Determine which CSS font family you would like to use. Again, check your website’s CSS or HTML source code to determine which fonts it already uses.
Add your hex colours and font family to the appropriate code snippet below:
For user profile badges:
<buzzdata:user username="username" bgcolor="#background hex code" highlightcolor="#highlight hex code” fontcolor="#Font hex code" font="CSS font family name"></buzzdata:user>
For dataset badges:
<buzzdata:dataset dataset="dataset-owner-username/dataset-name" bgcolor="#background hex code" highlightcolor="#highlight hex code" fontcolor="#Font hex code" font="CSS font family name" ></buzzdata:dataset>
Insert these code snippets to the HTML of your web page in the location where you want the badge to appear (somewhere within the <body> and </body> tags).
- Put the following piece of JavaScript in your web page HTML (the bottom is a good place). Be sure the JavaScript snippet is within
<body>and</body>tags of the HTML and that it does not disrupt existing code blocks. If you are placing multiple badges on your page, paste this only once:
<script type="text/javascript">
(function() {
var bd = document.createElement('script'); bd.type = 'text/javascript'; bd.async = true;
bd.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'badger.buzzdata.com/badges.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bd, s);
})();
</script>
If you still need help, contact us at support@buzzdata.com.
You can go back to Add a BuzzData badge to your website or back to the main FAQ.