-
Posts
-
Hi,
I’m trying to embed my Typeform quiz into this page: http://www.moneyprodigy.com/financial-assessment/
As you can see, the header and footer are shrinking the quiz substantially. I already opted for no header, a blank template, don’t display the footer or socket, etc. And it’s still showing up like this.
Please help.
Here’s the code for the quiz (I displayed in a code box):
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″><!–Add the title of your typeform below–>
<title>MP Financial Assessment II</title><!–CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)–>
<style type=”text/css”>
html{
margin: 0;
height: 100%;
overflow: hidden;
}
iframe{
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
border:0;
}
</style>
</head>
<body>
<iframe id=”typeform-full” width=”100%” height=”100%” frameborder=”0″ src=”https://algkent.typeform.com/to/jia9wN”></iframe>
<script type=”text/javascript” src=”https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js”></script>
</body>
</html>Hey algkent,
Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardHi,
try to use this code inside Quick CSS field:
main.template-page.content.av-content-full.alpha.units { height: 600px; }and adjust as needed.
Best regards,
AndyThat made all my headers a little weird.
I can also launch it as a popup. The only issue is I don’t like the color of the button and font on it, but I couldn’t figure out where to change those colors at.
Can you tell me where I can alter these colors? Here’s the code:
Launch me!
<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>Hi,
button background color:
.button.nav { background-color: red; }Font for your questions:
.question { font-family: 'Georgia'; }Best regards,
AndyHey!
Please go to Dashboard -> Enfold -> THeme Options and there is an area there to place any custom CSS.
Thanks a lot
Regards,
BasilisHi Basilis,
I placed the codes where you said, but it didn’t change the look of the button at all (you can see the look on this page: http://www.moneyprodigy.com/financial-assessment/).
Hi,
try to add an !important:
.button.nav { background-color: red !important; }If it still does not work, then please provide us admin access, so we can have a deeper look into it.
Best regards,
AndyWould I add that in addition to the code you gave me before? I’m not a coder, so I’m literally just copying and pasting off of your directions.
While waiting, I added that code to the other codes in the CSS, and it didn’t change anything with the button.
Admin access is in the private content area.Hi,
it’s weird, but the code does not get applied, so I think wether it’s a cache issue or the plugin you’re using is not applying it correctly. Please make sure you and your host are not using any caching on your server. Ask plugin’s author on how to change button’s color.
Best regards,
AndyHere’s their response:
*****************************
The default button included in the “Launch as a popup” embed code is a standard HTML link / anchor tag (), and it’s possible to customise the style of the button however you like, by applying CSS rules which target this element.Please note that while I’d love to help you with this in detail, I’m afraid we can’t troubleshoot custom code for you or give development instructions. But, basically, there are three things you should know:
The default CSS styles included in the embed code are applied to the button with the specificity “.typeform-share.button” { … }
You can remove these default styles by removing the “button” class from the anchor element. (Just don’t remove the “typeform-share” class — that class is required for the popup code to function!)
This will return the link to a standard inline text link.
You could add an id to the anchor element, and target that in your CSS rules, in order to override any other styles which are being applied.Putting both of the above things into practice, your modified anchor tag might look something like this:
Launch me!And then you would target that button in your CSS like so:#typeform_launch_button {
display: inline-block;
width: 200px;
line-height: 50px;
font-family: “Helvetica Nueue”;
text-transform: uppercase;
border: none;
/* + anything you like etc. */
}The “Launch Me” above should be:
Launch me!Hi,
I tried this:
.typeform-share.button { background-color: red; }as they’ve written, but it’s only working outside the lightbox: http://i.imgur.com/OB6PAbM.png and not inside as seen here: http://imgur.com/a/0RDou, where button color does not get changed to red or any other color. So something is still missing. Can you ask them about this please?
Best regards,
AndyHappy New Year, Andy!
Here’s what they replied:
As you’ve now changed the design of your typeform this means that your embed code changes slightly, too :) So, to change the colour of the button that launches your typeform you, or your Developer, would just need to make the changes as outlined by Agnes previously:
1) The default CSS styles included in the embed code are applied to the button with the specificity “.typeform-share.button” { … }
2) You can remove the default styles included in the embed code by removing the “button” class from the anchor element. (Just don’t remove the “typeform-share” class — that class is required for the popup code to function!)
3) You could add an id to the anchor element, and target that in your CSS rules, in order to override any other styles which are being applied.
Your modified anchor tag would then look something like this:
And then you would target that button in your CSS like so:
#typeform_launch_button { display: inline-block; width: 200px; line-height: 50px; font-family: “Helvetica Nueue”; text-transform: uppercase; border: none; // etc. }
I hope this helps Amanda but let me know if you need anything else!
SeanTeam Typeform|
typeform.com | twitter.com/typeform | facebook.com/typeformHi,
I think it’s best to hire a freelance developer for this job. You could find one here: http://kriesi.at/contact/customization
We can’t help you anymore, as it’s outside of our support scope to deal with 3rd party plugins, as written in our support policy. I suggest to try it by yourself or as said hire someone who can do this job for you.
Let us know in a new ticket if you have some questions directly related to our theme and we’re happy to help you out :)
Best regards,
Andy
- You must be logged in to reply to this topic.