How can I add the word Close next to the X, in the title bar, for the c
-
mikevilaAsked on July 08, 2012 at 12:47 PM
How can I add the word Close next to the X, in the title bar, for the computer challenged customers please?
This is a re-post of a comment on How to Stylize Feedback or Lightbox Title?
-
jeanettebmzAnswered on July 08, 2012 at 02:50 PM
You would need to insert these codes in your webpage's source preferably above </body>
<style type="text/css">
div div div table tbody tr td {
text-align: right;
}
</style>You can see the guide to add more styles to the fonts
Then , on your lightbox code, add the word "Close", as shown below:
So the code should look like this:
<script src="//jotform.co/min/g=feedback2" type="text/javascript">
new JotformFeedback({
formId:'21316182084851',
base:'http://jotform.co/',
windowTitle:'close',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700
});
</script>
<a class="lightbox-21316182084851" style="cursor:pointer;color:blue;text-decoration:underline;">CONTACT US</a>Best regards
Jeanette
-
pinoytechAnswered on July 08, 2012 at 04:36 PM
Hi,
Can you please take a look at here if this is what you want to achieved in your lighbox. If yes, let me know so I can provide you further details.
Thank you!
-
mikevilaAnswered on July 08, 2012 at 05:43 PM
Thank you both for responding, and YES pinoytech that's exactly what I want to create.
And jeanettebmz, by looking at your code I'm curious if this is also going to make complete form title go to the right as well? I need the form title to the left, and 'Close' to the right like the picture that pinoytech uploaded.
-
jeanettebmzAnswered on July 08, 2012 at 06:02 PM
The code is an example of one of my test forms, but yes, if you add text-align property into the CSS code and set it to the right, it should go to the right.
Then all you need to do is change the windows title.
Let's wait for my colleague Pinoytech, to see if he can share his code with you
Cheers!
-
pinoytechAnswered on July 09, 2012 at 10:25 AM
Hi,
Sorry for the late response. Regarding on my reponse above, I just added lots of   tag to create space from the first text as what you've see here.
Sample Close
Hope you find this helpful and if you need further assistance, feel free to contact us again anytime.
Thank you!
-
mikevilaAnswered on July 09, 2012 at 01:34 PM
Yes, pinoytech, it worked! The code is long, but it works. You would think there would be an easier way, I had to enter: Close'
Thanks again, both of you :-)
-
pinoytechAnswered on July 09, 2012 at 01:40 PM
Good to hear that! If you need further assistance, feel free to contact us again anytime.
Thank you for using Jotform!
-
NeilVicenteAnswered on July 09, 2012 at 04:12 PM
@mikevila
Alternatively, you may insert this css code to the page where the form is embedded to add the word "CLOSE" below the X button:
<style type="text/css">
div div div table tbody tr td + td:after
{
content: "CLOSE";
}
div div div table tbody tr td + td
{
font-size: 10px;
color: #fff !important;
text-shadow: black 0.1em 0.1em 0.2em;
font-weight:bold;
}
</style>Note:
To have it displayed above the X button, simply change "after" with "before".