How can I customize the look of a lightbox link?

  • Profile Image
    EarCare
    Asked on August 08, 2012 at 12:30 PM

    I was wondering if there was a way to customize the look of a lightbox link, I AM USING Muse so that might be handicapping me

    I like the look of the button when you export a form with a feedback button but I would like to be able to have the button in the page - not at the edges of the browser window.

    Any suggestions?

  • Profile Image
    NeilVicente
    Answered on August 08, 2012 at 07:53 PM

    To mimic the feedback button's appearance for your lightbox link:

    1.  Get your form's lightbox embed codes

    2.  Delete the style declaration (as highlighted below)

    <a class="lightbox-xxxxxxxxxxx" style="cursor:pointer;color:blue;text-decoration:underline;">

    3.  Replace it with the following codes:

    padding: 7px 15px; font-family: verdana; font-size: 15px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgb(245, 146, 2); z-index: 999; cursor: pointer; text-align: center; text-decoration: none; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); right: 35px; text-shadow: none;

    So it becomes:

    <a class="lightbox-xxxxxxxxxxx" style="padding: 7px 15px; font-family: verdana; font-size: 15px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgb(245, 146, 2); z-index: 999; cursor: pointer; text-align: center; text-decoration: none; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); right: 35px; text-shadow: none;">

    4.  Embed the finalized codes

    Note that I have modified the look a bit (added rounded corners to the bottom) to make it suitable for a normal, non-sticky button.

    Hope this helps.

  • Profile Image
    EarCare
    Answered on August 09, 2012 at 04:09 PM
    Awesome!
    I cant wait to try it
    -Alan