changing the style of a popup

Hey guys

Just wondering which css file I should be editing to change the background color and title/description text of the resulting popup when using grid_lightbox as the gallery?

I had a look through the grid_lightbox as well as the milkbox and slimbox css files but any changes I made werent reflected in the pop up.

Slimbox looked the most likely (I cross referenced the images used in the lightbox against the ones in the slimbox folder) but any changes I made and uploaded werent reflected on the live site...

Also, is it possible to hide the 'Image 1 of 4' bit?

Thanks

Jamie

Firebug is an indispensable tool for finding CSS Changes like this. for details on using Fire Bug, see the following road Map article:
roadmap_10.php


to change the caption look, edit the
css/slimbox/slimbox.css file, change the #lbCaption selector.

to hide the image count, add a new selector:
#lbNumber { display: none; }

thanks Jason. For some reason when I edited slimbox.css prior to me posting, werent reflected on the live site.. now they are. Musty have been a cache issue.

Thanks re the hide image acount.

One further question on this, is there anyway to overlay text with a background over each thumbnail in the lightbox where the text could be different from thumbnail to thumbnail?

Cheers

Jamie

no, this is not supported in Power Gallery.

Thanks Jason

Hi Jason

In grid lightbox, is it possible to make the description drop to the next line (using clear:) and to make it a smaller font that the title?

I looked through the slimbox.css and lbcaption seems to be all one for both the title and description....

Thanks

yes, the title and discription are both in the lbcaption div.

you would need to edit the code that genrates the thumbnails on the page to add a <br /> tag, the font size for the description cant be changed though without effecting the title as well.


to add the <br> tag:
in the galleries/grid_lightbox/index.php file, change the following line:

echo '<a href="' . $fullsizeImgSrc . '" rel="lightbox-pg' . $random . '" name="<strong>' . str_replace('"', '\"', $row_images['title']) . (strlen($row_images['title']) > 0 ? ':' : '') . '</strong> ' . str_replace('"', '\"', $row_images['description']) . '"><img  src="' . $imagePath . '" alt="" title="' . $i . '##' . str_replace('"', '\"', $row_images['title']) . '##' . str_replace('"', '\"', $row_images['description']) . '" alt="" width="' . $thumbnailInfo['width'] . '" height="' . $thumbnailInfo['height'] . '" /></a>'.PHP_EOL;

to:

echo '<a href="' . $fullsizeImgSrc . '" rel="lightbox-pg' . $random . '" name="<strong>' . str_replace('"', '\"', $row_images['title']) . (strlen($row_images['title']) > 0 ? ':' : '') . '</strong> <br>' . str_replace('"', '\"', $row_images['description']) . '"><img  src="' . $imagePath . '" alt="" title="' . $i . '##' . str_replace('"', '\"', $row_images['title']) . '##' . str_replace('"', '\"', $row_images['description']) . '" alt="" width="' . $thumbnailInfo['width'] . '" height="' . $thumbnailInfo['height'] . '" /></a>'.PHP_EOL;

thanks Jason..thats brilliant.

I have tried to make the text after the <br> tag a smaller font, but cant seem to get the right configuration to make that happen...is it possible?

like i said in my previous reply:
the font size for the description cant be changed though without effecting the title as well.


to change the font size, you would need to edit the lbcaption style.

Hi, there I have a slightly different request. How do I change the size of the text for the popup description. Im using the Grid + Lightbox