Web Services and Add-Ons
Experience the Ultimate in
Quality and Service
Ultimate

© 2014/5 - RichoSoft - All Rights Reserved | Terms of Use | Privacy Policy | About Cookies | Contact

More Light Box Tips and Tricks

Fixed Position Light Box No Scroll

Open LB relative to Browser with no scroll

WebPlus Light Boxes ...
WebPlus Light Box Tricks

Here are some Tips and Tricks for manipulating WebPlus Light Boxes, giving more flexibility and style  to your presentation.

Enhancing the Light Box Appearance

Enhancing the Light Box Appearance

Have a look at this Light Box, this uses the standard method of calling the light box and the content can be selected as usual, image, file, page, gallery etc.

So how do you create it?

First of all you need two images, one for the light box background and one for the close button.

  • The background image I used here was a rectangular shape coloured light grey, no border, and applied some transparency, size 1123 x 954 px and exported as a png.
  • The close button image was 17 x 17 px and again saved as a png.

Attach both images to your WPP in a folder called something like ‘images’.

Add your light box in WebPlus as usual to your page.

Then you need to add some code to the page style. The easiest way is to add the code here to the <head> of your page. That is to add an HTML fragment and paste this code to the <head>.

Modify the code to refer to your two image locations.

You may need to adjust the position of the Close Button in the section at the end of the code:

#wplightbox_closediv {

margin:30.0px 0.0px 0.0px 30.0px !Important;

}


The first figure for margin determines the top offset, and the fourth the right offset.

This example does not use a caption, any text you enter in the caption description will simply appear above or below the light box and you will need to adjust the position of the close button as detailed above.


If you want ALL light boxes on your site to have the same effect then add the code to the Masterpage <head> instead of the Page <head>.

You can of course experiment with different background images etc. to get your desired result.


I hope that this was useful to you.


Download the Two Images
used in this example FREE
(background and close images)
 Zip File 2Kb 
Works with WebPlus X5, X6,X7 and X8