RefTagger’s Got Style

When we first launched it back in February, RefTagger simply turned Bible references into hyperlinks to BibleGateway. Then in May we added the ability to have the text pop up when you hover over references, making the web a little more like your favorite Bible software.

Now RefTagger’s got style!

We used to control the look of the tooltip windows. We intentionally made them plain and neutral colored so they would load quickly and work well with the broadest number of websites possible.

Here’s the default look for John 3:16:

We realize, though, that the default style may not be the best fit for every site.

Recently a major ministry that was planning to add RefTagger to their site contacted us and asked if they could override the default styling of the tooltip windows to make them match their site. We thought it was a great idea, so we decided to add it as a new feature.

Now you can have full control over the styling of the tooltips and change the font, font size, font color, background color, padding, line spacing, etc.

Here are some examples of how you can style your tooltips:

You can see customized tooltips in action at the resources section of the Grace to You website and at Desiring God’s Resource Library.

To override the default styling, just follow these three simple steps.

We hope this makes RefTagger an even more useful tool for your website. Thanks for providing great feedback. Please send any problems or further feature requests to


  1. Dan DeVilder says

    Sounds cool! But I think I may have misunderstood how it is used. At first I thought it was a nifty way to read ANY web or computer content, having the ability to “read” a Bible scripture by hovering over the reference. (there is something called Instaverse, I think, that does that, but when I tried it, it worked at first, and then later evolved into InstaBility . . . .). So, I think Reftag is purely for those who do blogs or websites, so that THEIR website/blog will be tagged. Is that correct? If so, will you think of making an application so that non blogger like me can have the Bible text pop up no matter where i read on the web? :)

  2. Hi, Dan,
    Great suggestion. You’re right that RefTagger is a web-based tool and doesn’t work on desktop applications. You’re also right that it gets set up on the server side and not on the client side, so the reader is at the mercy of the website owner to add it. However, we’re looking into client side solutions as well. So stay tuned!

  3. I use the RefTagger WordPress plugin on my blog and it works quite fine, except for two problems: 1) Even though I can choose my preferred version (NIV) in the setup options, the popups always display the ESV; and, 2) While I have previously opted for the Libronix symbol to be included on my pages, these did not always format well, so I’ve taken them off. Otherwise, this plugin works really well for my site. Can you fix problem #1? I can live without problem #2, although I would like to promote the Logos software.

  4. Sorry, I forgot to add to my previous comment my thanks for instructing us on how to customise the RefTagger popups. I will use this feature!

  5. Alan Cassady says

    My blog is hosted on the WordPress site. Is there a way to use it there?

  6. Alan, I don’t think there is a way to add RefTagger to a blog. Since they don’t allow you to add plugins or edit the HTML, there’s no way to add RefTagger at this point. It works very nicely with the self-hosted version of WordPress though (i.e.,

  7. Hi, Ian,
    Right now the NIV is not available as a tooltip version. We’re hoping to add it. The available versions are NLT, ESV, KJV, and NKJV. The ESV is the default tooltip version and will be used if your online Bible choice is not yet available for tooltips.
    On the L icons, we’ve made some fixes that should cause them to render better in more browsers now. Have you tried them recently? What browser are you using?
    Thanks for the feedback!

  8. Thank you so much for this great tool!
    God Bless!

  9. Scott Smith says

    I tried overriding the stylesheets, but my custom styles do not work in IE7. Anyone else running into this and if so how did you fix it?

  10. Thank you for the clear directions and for making this available.
    With appreciation!

  11. I installed RefTagger on my site since it is the only one I know that really works. However, it lacks in my opinion a major feature: it should be able to display ALL of the text of the bible reference, that is if the text is too large for the textbox, a scrollbar should appear to scroll down the text instead of clicking on More>> to go on the site of the Logos web site. Hope this feature will be available in the future.
    Many thanks anyway for this great script

  12. Hi, I installed RefTagger on my Joomla website and I am trying to follow the “three simple steps” to use my own css style sheet, but I cannot figure out what file to place the Logos.ReferenceTagging.lbsCssOverride = true; code into.
    Any suggestions?

  13. Alright, well I figured it out so if you have a Joomla site and were wondering the same thing about how to override their CSS and use your own file, I have instructions below. This should be done after you have RefTagger installed and working on your Joomla site. Hope this helps someone… have a blessed day!
    1. Open helper.php (if you have already installed the module it will be located within the modules > mod_reftagger folder.
    2. Locate line 45, which should have a refcode with a javascript opening tag.
    3. Paste the following code after line 45:
    $refcode .= “Logos.ReferenceTagging.lbsCssOverride = true;”;
    4. Save and upload
    5. Upload your version of ReferenceTagger.css to your website, in my case I put it in a css folder that is within my template folder.
    6. Open up the Joomla admin and go to Extension > Template Manager. Go into your template by selecting and going to edit. Then select the button to Edit HTML.
    7. Somewhere at the top with all the other css includes write the code to link to your new ReferenceTagger.css
    8. Save and close it out. Pray that it works. :)
    I would have pasted more of my exact code but this comment box wasn’t showing it correctly so I did my best.

  14. Several questions:
    1. We pasted the html code into the html page of our website’s html view in FP. The one scripture on our homepage works. What do I do to get the other scriptures we’re putting up on different pages to work also? (use Make an Impact link to link called minister to these. The scripture ref’s on Minister to These page do not work with reftagger)
    2. We copied the language to “customize” fonts etc. but don’t know where to paste into our “style sheets”. Where does that language go?
    3. Can the color of the actual links reftagger generates be anything other than the “royal blue” we see on our homepage?
    Thank you in advance fr your help!

  15. 1. Since your site is just a collection of HTML pages and not a template-based site with a single footer, you’ll need to put the code on every single HTML page that you want RefTagger to work on.
    2. The customized styles can go anywhere in your site’s stylesheet. If you don’t use a stylesheet, you can paste the styles between and like this:
    [paste your styles here]
    3. Yes. These can also be changed by creating custom styles.

  16. Phil,
    Thanks for the quick reply recently to our questions. We’ve tried unsuccessfully to add the additional code to allow us to change font, etc. If you or someone at logos has the time and could view our source code on our homepage and let us know exactly between which lines of existing code to place the new language, it would be greatly appreciated. If time constraints do allow, we understand completely. Thank you in advance!

  17. I LOVE RefTagger! But I agree with Ulrich’s comment:
    “However, it lacks in my opinion a major feature: it should be able to display ALL of the text of the bible reference, that is if the text is too large for the textbox, a scrollbar should appear to scroll down the text instead of clicking on More>> to go on the site of the Logos web site. Hope this feature will be available in the future.”
    Is there a way to change the CSS code to make this happen? Or maybe the size of the textbox could vary with the amount of text? I’m obviously not a technical person, but this would be really appreciated.
    I hate to have to click through when I’m in the middle of reading something.
    Other than that, this is the best thing since sliced bread!

  18. I have the same request as Ulrich and akaGaGa. Is there any chance that this feature will be included in the future?