Auto Watermark Setup

Setting up the gallery and slideshow automatic watermark

Support for Allwebco templates that include a built-in auto watermark in the image closeups and slideshow. If you click on a thumbnail in the gallery or view your slideshow pages you will see a layered copyright watermark image if your template includes this feature.


Important Note
Newer Allwebco templates will include the watermark HTML code in the "watermark.js" and not in the slideshow.htm or the pop-closeup.js. Location of the watermark layered over the image can be edited in your css file(s).

Watermark Image
You can use your own image for the layered watermark. It may be a gif, jpg or png file and will be located in either the "picts" or "lytebox" folder. If it's a gif or png image it may have a transparent background. If you have trouble editing this image, you can contact Allwebco and send us your text details and we'll create the watermark for you (See also opacity option below).

Editing the Options
Open your "watermark.js" in a plain text editor like Notepad (in older templates edit the "pop-closeup.js" and "slideshow.htm"). Click on the visual below to see what code to modify.

Visual for newer templates:

Note: In newer templates edit the watermark location in your css file.


Visual for older templates:



Watermark in Lytebox Templates
Lytebox templates include a "lytebox" folder. In templates that include Lytebox style gallery viewers, with a watermark, a "watermark.js" is not included. The watermark image file is located in the "lytebox" folder. You can edit the watermark location and opacity in the "lytebox.css" in the "lytebox" folder.

Edit the following code in the "lytebox.css" in the "lytebox" folder:

/* WATERMARK LOCATION AND OPACITY */

#lbWatermarkContainer {
	width: 100%;
	height: 50px;
	margin-bottom: -50px;
	position: relative;
	left: 0px;
	bottom: 145px;
	background: url(watermark.gif) no-repeat top center;
	filter: alpha(opacity=35);
	-moz-opacity:.35;
	opacity:.35;
	display: none; /* ADD THIS TO TURN OFF WATERMARK */
	}

Turn off the watermark: Edit the above code and add display: none; right after the line opacity:.35; (highlighted in red above).


Watermark Opacity
This determines how "see-through" your watermark is.

In newer templates: Opacity is set in your template CSS file(s) using the "#gallery-watermark" class, or may be in the "watermark.js".

For older templates: Edit the "watermark_opacity" in your "slideshow.htm" and "pop-closeup.js" using a plain text editor. In older website templates the opacity option may not work in all browsers.

Watermark Location
It's important to have your watermark in the right place in the image closeups and slideshow. Move it around until it looks good over all of your images. Check every image in the gallery and slideshow.

In newer templates: Location is set in your template CSS file(s) using the "#gallery-watermark" class, or may be in the "watermark.js".

For older templates: Edit the "slideshow.htm" and "pop-closeup.js" in a plain text editor. Click the visual above on this page to see what code to change.

Watermark Size
If you change the size of the watermark image you may need to adjust the height, width and margins in the css file or in the "watermark.js". Margins may be a negative value.

In responsive templates the "#gallery-watermark" class may use "calc" css to locate the watermark. top: calc(75% - 25px);. The 25px is half of the watermark height. You may need to adjust multiple css classes.

Watermark On/Off
In newer templates: on/off is set in the "watermark.js" using a yes or no (see visual above on this page). For Lytebox templates see above section.

For older templates: Edit your "slideshow.htm" and "pop-closeup.js" in a plain text editor. Click on the visual above on this page to see the code to change.

Extra Image Protection Using the Watermark
Images in the gallery can still be dragged by users and saved on their computers. Optionally, you can make the watermark the same size as your images and align it in the css files and/or "watermark.js" to completely cover your image. This allows for the watermark image to be dragged instead.

In this case make all your images the same size and make sure your watermark does not overlap any slideshow or other gallery buttons. Check all buttons and links on the gallery and slideshow pages.

Tip: Make backups of any files you plan to modify before you start editing.