close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Pixel Size of Images

Thread began 1/12/2011 3:51 am by photoeyes2u348674 | Last modified 2/23/2011 5:00 pm by photoeyes2u348674 | 2385 views | 19 replies


Hi photoeyes,

The grid_lightbox CSS modifications are below. There is probably more there than you need, as I like to get rid of the little 'Arrow' boxes below the thumbs, and reduce border size etc. I have included all my own modifications in case any one else may find them useful.

Most of the other galleries are a whole lot simpler to modify!

Just use which bits you like. An example of using exactly the same gallery on different backgrounds is Here

To modify/remove Grid Lightbox Gallery Background colors:

1. Comment out or remove the theme ccs line from my grid_lightbox/index.php page (about line 30) - as I don't need it:

@import url("<?php echo $pg_config['html_prefix']; ?>css/<?php echo $pg_theme; ?>.css");
2. Comment out or remove the background-color from these lines in common.css:

Line 4 {
/* background-color: #212121; */
Line 11
.pg-gl {
width: 720px;
font-family: Arial, Helvetica, sans-serif;
/* background-color: #1e1e1e;*/
padding: 8px 0 8px 8px;
On Line 21, you can change or remove the background-color of the Title that appears above the gallery, and change the text color and padding etc. as required:
.pg-gl .title {
color: #7b7b7b; /* change as required */
background-color: #323232; /* change or remove as required */
padding: 4px 12px;
font-size: 15px;
line-height: 26px;
or remove it entirely by commenting out the line in your grid_lightbox.php page:

<span class="title"><?php echo $gallery['title']; ?></span>

If you want to change the background color of the small arrow area below the thumbs, you can do this at Line 35:
.pg-gl .thumbs a {
background-color: #373737; /* change as required */
background-image: url("../images/thumb_arrow.png");
background-position: 50% 95%;
background-repeat: no-repeat;
float: left;
margin: 3px 3px 0 0;
If you want to remove the small arrow area altogether, - I usually do - then at the same rule (Line 35) you can remove most of the styles:
.pg-gl .thumbs a {
float: left;
margin: 3px 3px 0 0;
and at about line 43, remove the bottom margin:
.pg-gl .thumbs img {
border: 4px solid #2A2A2A;
margin-bottom: 17px; /* Remove this line */
I aslo prefer a crisp 1px margin, so I would change it in that same rule to:
.pg-gl .thumbs img {
border: 1px solid #000000; /* Change border color to suit page/container background */
margin-bottom: 17px;
As your thumbs now have no background, they can be placed in any container and inherit the background color of that container. As such, you might want to give the tool-tip a border color accordingly and add a white background:

Line 63:
.pg-gl-tip {
width: 250px;
background-image: url(../images/dark_tip_top.png);
background-repeat: no-repeat;
background-position: 50% 0;
border: solid 1px #666666; /* Add a border if appropriate */
Hope this helps,

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





Ease of use


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...