Webgem Placeholder Images

Test Index · CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Link Styles 3 · iFrame Tutorial - IFrames described in detail! · Form sample in iFrame · Arrowhead · Excel · Color Blind · Websafe Fonts and tests · Make an Alert Box · Webgem Placeholder Images · LINK HOVER TOOLTIP · OverLIB tooltip · Disguise Email · Quote of the Month · Map to your location! · Link Border Test · FORUM

Webgem Placeholder Images

Using a Trellix Webgem or CSB Insert > HTML, you can insert javascript and HTML code into your web page. Webgems (also known as gems, insert >HTML) let you add special menus, sound, video, animated images, flash, games, file downloads, etc to give your site personality and interactivity. It's what makes a web page interesting.

Everytime you insert a webgem, the program inserts a "placeholder" image to remind you where the code is and give you a way to access the code for editing. The following chart shows the default image used by the program for this function. The "placeholder" image is visible only while you're editing your web site. To see the effect of the HTML, you must preview or publish your web site. (Some webgems do not preview properly but show up fine when published.)

TRELLIX

(others used for form, download, etc)

CSB

(used for all types of inserted code)

There are times this placeholder image is far too large for the space it is put, pushing the design window out of wack. Other times, you may have several codes placed on the same page. It would be far more convenient to be able to replace the awkward placeholder that has been provided with an image that is more appropriate in size and meaning.

Here are some images I use instead of the default image shown above. They have meaning to me so when I look at my design window that has several codes, I know which is which!

Right click on image and choose Save Picture As

THE CODE INSIDE THIS GEM		GENERAL PLACEHOLDERS
	No right click script		My general default placeholder, replacing the ugly orange & black piece. It came from a Trellix screen capture.
	Sound or music script
	pop up window		These images are for very small areas. I use the white box in often in forms and tables.
	popunder window
or	subscript code <sub></sub>
or	superscript code <sup></sup>		These two images are made for 2 part codes so you know which inserted codes go together (blue set and gray set)
	robot meta tag
	"style" setting
	special link (special color, underline, something different...)

Want more placeholder choices?

Ian, a fellow CSB user, has made TONS of specialty placeholders to fit your html inserting needs: from Google ads, to guestbooks, clocks, buy now and even took my no right click and made another button from my image & more. Visit his page here.

OR...... MAKE YOUR OWN!

Another option for placeholder images, put your code into the webpage with the webgem/insert > HTML then preview or publish. Take a screen capture image and trim out the area that specifically fits the code that you are using.

The following images are screen captures that look like the finished product. This type of webgem placeholder helps to hold the spacing and look of the final product while in the working tlx file.

SCREEN CAPTURE: Consider Printkey. This little freeware piece (with no ads or spyware in it) allows you to to make simple edits to your image in several ways, including resizing, adding a frame, adjusting color, etc. Use it to adjust the BRIGHTNESS/CONTRAST on an image to create a watermark image for behind your text!

	code for a drop down list of choices
	form buttons (send/receive is 1 image because code is together)
	roll over style button
	roll over style menus These look like the final menu and takes up same amount of space as the real menu so the design window is easier to visualize.

The placeholder (shown on the left above) is a screen shot taken while the video was playing. That's how I see the video in my design window. Turn on the speakers for this one!!! LOL DO NOT LINK TO THIS VIDEO FILE! That is stealing my bandwidth. I can identify who has stolen from me! I received the video clip on the right in an email. It will load automatically (embedded - approx 1 mb, asf format). I don't know if this video is in the public domain or not. If asked to remove it from this sample, I will.

OK. By now you understand all kinds of images can be used as a placeholder.

But how do you change the placeholder? There are two ways to do it!

1) temporary one time change:

You want to use a different image than your default like those shown on this page. The change made is for this gem only.

CLICK WEBGEM (Trellix)

OR INSERT >HTML (CSB)

PLACE YOUR CODE IN THE UPPER SECTION

CLICK BROWSE BUTTON

(Note, my default image is the little webgem symbol as shown in this picture)

CHOOSE YOUR IMAGE

THEN CLICK OPEN

(For my convenience, I have put the webgem placeholders I use the most in one folder. The large images for menus, etc are stored elsewhere).

NOTICE THE IMAGE HAS NOW

CHANGED TO THE NO RIGHT CLICK PLACEHOLDER MAKING THE CODE EASILY IDENTIFIABLE.

(If you want to change a placeholder you already have on a page, you will have to make a new webgem. Once a placeholder is assigned you have to start over to give it a new image.

When you use a screen print, you insert the code, preview or publish, capture the screen and then make a new webgem with the new image as a placeholder. Delete the original.)

2) default image change:

You want to get rid of the big placeholder offered by the program and make another image be default.

MORE RESOURCES:

KW has a step by step tutorial for this process with images to demonstrate. He also has more images to offer from several users of Trellix and CSB. (A few of mine shown above are on that page too!)

Richard has more images on his site too!

Make sure your Trellix/CSB program is closed before you begin.

CSB: Using Windows explorer, locate this folder:

C:\Program Files\GlobalSCAPE\CuteSITE Builder\PagePlug-ins\BuildYourOwn

OR TRELLIX:

Use your Find/Search command to search for BuildYourOwn.gif

It will be with other Trellix files somewhere on your computer.

Go to the folder that contains that file using your Windows explorer.

Move an image file into that folder that you want to use as your default placeholder.

Rename the file: BuildYourOwn.gif to OLDBuildYourOwn.gif

Now rename your image file BuildYourOwn.gif

The next time you try to insert a new code into your webpage using Insert > HTML (or webgem in Trellix) it will show the new default image!