Page 1 of 1 (3 items)
This post has 2 Replies | 3 Followers

Posts 1
Ryan | Forum Activity | Posted: Mon, Mar 3 2014 9:50 AM

On desktop, this is fantastic. With mobile traffic becoming the majority web population, making reftagger responsive friendly would be a good move. I'm just thinking out loud here.

Currently, touch interaction can be confusing for users. When tapped, a link opens but can easily be accidentally tapped again or if the popup is closed and the user taps it again he is redirected. That's the biggest one really. Rather than using a focus affect with js, a visible close button would be helpful for responsive layouts. 

I'm not finding a responsive site to see a demo of the styling, but the popup would need to respect the max screen size so nothing appears off screen.

Posts 1
Mark Goldsmith | Forum Activity | Replied: Wed, Mar 5 2014 7:46 AM

I figured out a workaround on how to make Reftagger work better for mobile devices. Essentially the width of the tooltip is too wide, so I created a custom CSS file and loaded that. So here is what my Javascript looks like ( you need the cssOverride attribute set to true) :

<script>
var refTagger = {
settings: {
cssOverride:true,
bibleVersion: "NIV",
roundCorners: true,
socialSharing: [],
}
};
(function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = "//api.reftagger.com/v2/RefTagger.js";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>

Then I loaded my custom CSS and make sure that .rtToolTip had a width of 280px;

.rtTooltipHeader{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipBody{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipBody .ch-ref{font-weight:700}
.rtTooltipFooter{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipFooter a:link,.rtTooltipFooter a:visited{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;font-weight:400;text-decoration:none}
.rtTooltipDropShadow .rtContainer{-webkit-box-shadow:0 0 6px 0 #444;-moz-box-shadow:0 0 6px 0 #444;box-shadow:0 0 6px 0 #444}
.rtTooltipRoundedCorners .rtContainer{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden}
.rtLight .rtContainer{background:#fff}
.rtLight .rtTooltipHeader{background:#e7e7e7;color:#333}
.rtLight .rtTooltipBody{color:#666}
.rtLight .rtTooltipFooter a:link,.rtLight .rtTooltipFooter a:visited{font-size:12px;color:#ccc}
.rtLight .rtTooltipFooter a:hover{color:#666}
.rtDark .rtContainer{background:#555}
.rtDark .rtTooltipHeader{background:#888;color:#eee}
.rtDark .rtTooltipBody{color:#fff}
.rtDark .rtTooltipFooter a:link,.rtDark .rtTooltipFooter a:visited{color:#999}
.rtDark .rtTooltipFooter a:hover{color:#eee}
.rtTooltipSocialIcon{background:url(//bible.logos.com/v2/social-icons.png)}
.rtTooltip{text-align:left;text-indent:0;width:280px;min-height:140px;z-index:99}
.rtTooltip div{text-align:left}
.rtTooltipHeader{border:0;font-size:14px;font-weight:700;line-height:32px;height:32px;margin:0;padding:0 20px 0 15px}
.rtTooltipBody{border:0;line-height:1.4;font-size:14px;margin:0;min-height:40px;padding:19px 20px 0 15px}
.rtTooltipBody .ch-ref,.rtTooltipBody .verse-ref{font-size:85%;position:relative;top:-1px}
.rtTooltipFooter{border:0;font-size:14px;line-height:14px;letter-spacing:normal;padding:22px 32px 12px 15px;text-align:left}
.rtTooltipFooter div{text-align:right}.rtTooltipFooter .rtTooltipMoreLink{float:right}
.rtTooltipFooter .rtTooltipBrandLink{display:inline-block;margin-right:20px;font-size:12px}
.rtTooltipSocial{float:right}
.rtTooltip .rtTooltipSocialIcon{display:inline-block;margin-top:8px;height:19px;width:21px}
.rtTooltip,.rtTooltip a,.rtTooltipBody p,.rtTooltipBody span{letter-spacing:normal;margin:0;padding:0}
.rtLibronix img{float:none}.libronixLinkImage{border:0;float:none;margin:0 0 0 4px;padding:0}
Posts 2
David Roy Slentz | Forum Activity | Replied: Sun, Sep 14 2014 1:36 PM

RefTagger CSS and Responsive

The Responsive CSS file and set up works well. I am only having a problem where I cannot change the Scripture body font. Not matter what I change it to, it remains the same font which I have used in my website. The problem is that there is also "text-shadow" style to it and it makes the Scriptures difficult to read.

This was something that I could not change even BEFORE I added your responsive CSS file.

What is  it that I am doing wrong that I cannot remove the "text-shadow" and that I cannot change the font, etc. of the Scripture body text?

Page 1 of 1 (3 items) | RSS