WordPress.org

Ready to get started?Download WordPress

Forums

nextgen thickbox captions (6 posts)

  1. mattybrown1
    Member
    Posted 3 years ago #

    Could anyone advise on how to change the style and colour of the font for Nextgen's thickbox image gallery (the caption that appears at the bottom of the enlargement when you click on a thumbnail). I presume it is a CSS issue. Thank you

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. mattybrown1
    Member
    Posted 3 years ago #

    Have tried that, and using Chrom inspector, but still can't work out which style sheet affects the thickbox captions.

  4. jol2011
    Member
    Posted 3 years ago #

    The file that affects the thickbox styles is the following:

    ../wp-includes/js/thickbox/thickbox.css

    The only problem is that it is a core file which will get overwritten in any updates. I did add the modified styles to my theme style.css file after I had worked out what I needed to change but it didn't take affect :(. So I'm still working out how to make this change safe...

  5. mattybrown1
    Member
    Posted 3 years ago #

    Thank you. If you work it out, please post. Good luck.

  6. BeeGirl3
    Member
    Posted 2 years ago #

    There is a way to do this. Let me try to see if I can put it into words. Look at the stylesheet mentioned above (../wp-includes/js/thickbox/thickbox.css) and use it for reference as to which class you need to update.

    Then in your custom theme css style copy and paste or retype the class you want to tweak (this way your customization won't get overwritten on an update). Now to get the class in your theme stylesheet to take hierarchy, you need to make the classes super specific.

    Example1: The thickbox window has a default background of white (#FFFFFF), I want to change it to grey (#CCCCCC). So, I find the class name from thickbox.css which is

    `#TB_window {
    background:#FFFFFF;
    ...
    }`

    In my theme stylesheet, I add

    `div#TB_window {
    background-color:#CCCCCC;
    }</blockquote>`

    This kind of "tricks" the CSS, the more specific style reference takes trump.

    Example2: Up the caption size to 20px, make it orange and italic
    thickbox.css:

    `#TB_caption{
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
    }`

    My custom stylesheet.css:

    `#TB_window #TB_caption {
    font-size:20px;
    color:#f95000;
    font-style:italic;
    }`

    I hope this makes sense!

Topic Closed

This topic has been closed to new replies.

About this Topic