How can I change size and alignment of lightbox title?

  • Profile Image
    Twitterthons
    Asked on November 15, 2011 at 01:40 PM

    My Lightbox title is presently center aligned and a much smaller font than I'd like. How do I change it to left aligned and make the font bigger and possible even change the font itself.

  • Profile Image
    fxr
    Answered on November 15, 2011 at 07:53 PM

    Hello Twitterthons,

    Which form are looking to customise? 

  • Profile Image
    Twitterthons
    Answered on November 15, 2011 at 10:21 PM

    I want to change Title Line size and possibly the font of all my forms (one standard for all of them).

  • Profile Image
    abajan
    Answered on November 15, 2011 at 10:51 PM

    Please insert this code into the page that contains the lightbox and let us know if it helps.

  • Profile Image
    Twitterthons
    Answered on November 16, 2011 at 12:01 AM

    Thanks so much for the quick turnaround - the code made it larger and left aligned as requested. Can you tell me what is the font and font size used for the title bars on this site. I especially like the way it looks.

  • Profile Image
    abajan
    Answered on November 16, 2011 at 04:08 AM

    Do you mean the the font for "Support Forum" at the top of this page? Firebug states that it's Verdana displayed at a size of 24 pixels with a gray (#666666) shadow offset 1 pixel both to the left and top. If the page is viewed via a device that doesn't have Verdana installed, Geneva will be used. If Geneva isn't available either, Arial will be used. If Arial isn't available, Helvetica will be used. Finally, if none of those fonts are installed (unlikely), the title will be rendered using some other sans-serif font: a font without serifs.

    (See screenshot)

  • Profile Image
    Twitterthons
    Answered on November 16, 2011 at 11:16 AM

    Thanks, the font didn't look the same so I tried to add the grey shadow to the code you suggested before. But I only lost the font I had and it was replaced with the default that I changed from before. What do I have wrong below since the only thing I added was the text-shadow line.

    <style type="text/css"> div div div table tbody tr td { text-align:left; font-family: Verdana, Arial ,sans-serif; font-size: 15px;
    text-shadow: -1px -1px #666666 !important; } </style>
  • Profile Image
    abajan
    Answered on November 16, 2011 at 02:55 PM

    In the source of the web page that has the lighbox, paste this CSS in the body, just before the lightbox. The !important keyword should override any other CSS rules that may have been influencing the appearance of the title.

    The title should now resemble that in the image below: