How can I add the word Close next to the X, in the title bar, for the c

  • Profile Image
    mikevila
    Asked 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/Lightbox Title?

  • Profile Image
    jeanettebmz
    Answered 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

  • Profile Image
    pinoytech
    Answered 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!

  • Profile Image
    mikevila
    Answered 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.

  • Profile Image
    jeanettebmz
    Answered 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!



  • Profile Image
    pinoytech
    Answered on July 09, 2012 at 10:25 AM

    Hi,

    Sorry for the late response. Regarding on my reponse above, I just added lots of &nbsp tag to create space from the first text as what you've see here.

    Sample &nbsp;&nbsp;&nbsp;&nbsp; Close

    Hope you find this helpful and if you need further assistance, feel free to contact us again anytime.

    Thank you!

  • Profile Image
    mikevila
    Answered 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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Close'

    Thanks again, both of you :-)


  • Profile Image
    pinoytech
    Answered 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!

  • Profile Image
    NeilVicente
    Answered 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".