nextgen thickbox captions

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

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

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…

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

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!