close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

changing the style of a popup

Thread began 8/07/2012 8:43 am by JamieEff | Last modified 8/13/2014 12:14 pm by Jason Byrnes | 3328 views | 16 replies |

JamieEff

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

Sign in to reply to this post

Jason ByrnesWebAssist

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; }

Sign in to reply to this post

JamieEff

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

Sign in to reply to this post

Jason ByrnesWebAssist

no, this is not supported in Power Gallery.

Sign in to reply to this post

JamieEff

Thanks Jason

Sign in to reply to this post

JamieEff

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

Sign in to reply to this post

Jason ByrnesWebAssist

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:


php:
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:

php:
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;
Sign in to reply to this post

JamieEff

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?

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

Smart-FX

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

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...