1

I've got a link to a typeform quiz on my site, using the code they provide given instructions here: http://helpcenter.typeform.com/hc/en-us/articles/200065866-Overview-of-embedding-options (I use the popup drawer style that slides out from the side)

I would like to use my css styles on the link to match the rest of my site, but changing the class seems to break things. When I change the class on the link to

How can I change the appearance of the button without losing the functionality?

Here's what it looks like when I use the typeform class, typeform + mine, and mine alone: https://i.stack.imgur.com/t4xmI.png

Here's the code:

<a 
    class="typeform-share"
    href="https://mysite.typeform.com/to/url"
    data-mode="2"
    target="_blank">
        Take quiz now!
</a>
<script>
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)}})()
</script>

edit: Added the image showing what happens when I play with the classes.

Bobby Battista
  • 1,985
  • 2
  • 17
  • 27
  • Your quiz is in a Iframe, and you can use a solution for this, [check this other answer](http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe). – Baro Jan 04 '16 at 20:24
  • Baro, I don't need to modify the appearance of the quiz that slides out, I just want to change how the button looks that opens the quiz. Is the button in an iframe? I don't think I have access to typeform's css, and I don't think the iframe is on the same domain as my page. I've added images showing what I mean – Bobby Battista Jan 04 '16 at 21:29
  • If you provide a link to a live example people will be able to inspect it and you'll get an answer quickly. Use the web inspector to see the values of the CSS properties for the button. – John Keyes Jan 04 '16 at 22:56

3 Answers3

2

You should be able to add your own class and then override the styles that gets set via the https://s3-eu-west-1.amazonaws.com/share.typeform.com/share-button.css stylesheet that is automatically included.

Or, you can change the script to not include the default stylesheet for the link, by removing (from the minified-and-impossible-to-read-script) if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)} so your embed code ends up like this instead:

(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()
Victor Bjelkholm
  • 2,177
  • 9
  • 28
  • 50
  • Thank you! When it comes to overriding classes, I've read that you can either 1) Use !important, or 2) Define the overriding class AFTER the first class in your css stylesheet. How can I be sure that my style is set AFTER the one that gets set in the script? – Bobby Battista Jan 05 '16 at 02:05
  • 1
    Hm, I don't think you can since this gets automatically set into your . But the simplest way is to remove the part that includes the stylesheet. Also, I've found out that in the "Distribute" panel of your typeform, where you found the code in the first place, you can switch between your link being a "button" or just a "link". Select link and you get the link without any styling and you can do the styling yourself. Checkout the screenshot here: http://i.imgur.com/KWvcowI.png – Victor Bjelkholm Jan 05 '16 at 10:48
  • I'd suggest using the second option i.e. removing the stylesheet as using !important is unnecessary clutter and will lead to confusion later down the road. – steviesh Aug 21 '16 at 18:29
1

An alternative is to use their link (not button) code and replace the text between the anchor tags with an image. Not elegant from a coding perspective, but it seems to work.

Andrew Horder
  • 11
  • 1
0

Do the following: Change the script to this

<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()</script>

And add a button class to your CSS keep the button's class as class="typeform-share button"

j08691
  • 204,283
  • 31
  • 260
  • 272
neft
  • 1