How to style VerseClick pop-ups with CSS

By default, VerseClick uses a neutral set of colors and very legible font for the popup. Also, the linked verse text in the document gets the same styling as other links on the page.

If you want to change the styles, there are three classes you can add to your site's CSS. Below is some example code that could be added to a style sheet to give the popup and verse links a different look. Most CSS rules would be valid.

The three classes are:

  • vcVerseLink
    Styling of the verse link link itself in the web page.
  • vcPopupVerseText
    Styling of the verse text in the popup (background color, font, etc).
  • vcPopupHeaderText
    Styling of the header in the popup.

Here's an example of a styled VerseClick link and popup.

  • Psa 12:6-7; Mt 24:35.
  • Psalm 138.2
  • 2nd Timothy 3:16-17
  • Luke 7:12; 8:42; 9:38; John 1:14; 3:16, 18; Hebrews 11:17; 1 John 4:9

These are the CSS rules applied:

<style>
.vcVerseLink {
color:#F00;
border-bottom:1px dotted #F00;
text-decoration:none;
}
.vcVerseLink:hover {
color:#00F;
border-bottom:1px dotted #00F;
}
.vcPopupVerseText {
background-color:#FFF2CB;
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
}
.vcPopupHeaderText {
background-color:#d7c08b;
color:#000;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.2em;
}
</style>