--Program Usage Guide--  General Info:

Coolest Web Photo Frames!

Albert Einstein

To style the Curved Corners Box around the picture of Albert Einstein above, I used a wooden graphic for the 'Box Body Graphic URL' field, I set the 'Background color' of the 'Contents Area' to white, I set a 2 pixel black border on that, and I set a small amount of horizontal and vertical padding inside the 'Contents Area'. For the actual contents of the box I used this:

 Notice that the image tag is just followed by a break tag and then simple text!

'Skinned' photo + text + links (that change Einsteins picture using javascript)

Albert Einstein 1)   2)   3)

Below are the actual contents used in the box above. As you can see, I put an image tag in there plus some text plus 3 links that each contain some javascript. When you click on the links the picture in the box changes without reloading the page.

For the style of Einsteins Curved Corners Box picture frame above, I choose a pine wood graphic using my 'Graphic Picker' and erased any settings from the 'Contents area background graphic URL' field and the 'Contents area background color' field and turned off the 'Contents area border'. This allows the outer pine wood 'skin' to 'flow' into the inner 'Contents Area'. Pretty sweet looking if you ask me!

Make the Photo Itself have Curved Corners!

Albert Einstein

Using this system, you can also make your photos themselves have Curved Corners! The picture of Einstein above uses the exact same picture of Einstein as the picture at the top of this column. In the one above, however, instead of entering an actual '<img' tag with Einsteins picture as the 'src=' attribute into the 'Contents Area', I entered the URL to Einsteins picture into the 'Box body graphic URL' field on the main application page. So in this one, I am using Einsteins picture as my Curved Corners Box body!

To complete the 'Curved Corners Photo' above, I erased any values in the 'Contents Area background graphic URL' field and the 'Contents area background color' field and I made sure that the 'Show contents area border' field was unchecked. These settings make sure that the value set for the 'Box body graphic URL' field (we used Einsteins url) 'flows' into the inner 'Contents Area'. These settings are essential to make a 'Curved Corners Photo'.

Next I set the 'Make box fixed width' field to 190 pixels so that it is actually a little thinner than Einsteins picture so that the picture does not 'tile'. I then set both the horizontal and vertical 'Contents area padding' settings to zero so I can make Einsteins name bigger without wrapping. I then entered this code into the 'Contents Area' of the main application page:

The first part of the code above, the
<div style="margin:70px 0px;">&nbsp;</div>
is designed to force the box taller so that it is tall enough to show the entirety of Einsteins picture. I find that using the 'margin:' like I do in that code is cross browser compatable. Right after that div, I entered Einsteins name with a non breaking space within it to prevent wrapping. In the 'Contents Area Global Text Styles' section of the main application page, I set the 'Font family' to 'Arial', I set the 'Text size' to '24 pixels', I checked the 'Bold?' checkbox, and I set the 'Font color' to the color your see in the box above.

That's all it took to create the 'Curved Corners Photo' of Einstein above. I then just pasted the Copy/Paste code provided by this system into this page at the point you see it above! I then tested the 'Curved Corners Photo' of Einstein above on all these browsers:

Using with Server Runtime Determined Graphic URLs

If you are running a server language like php on your system, the actual images displayed in a web page might be determined by php at run time by retrieving a url value from a db or by some other means. You can use code like that with Curved Corner Boxes to frame a picture randomly set at run time. Just put an image tag like this in the Curved Corners Box 'Contents Area':
<img src="<?php echo $theURL; ?>">

That php will not execute in this development system, it will just show an unfound picture. Once you Copy/Paste the Curved Corners Box code into your web page, however, it will execute and whatever value that is set for $theURL will be painted into the img tag and the picture will show with the 'skin'. As before, you can put other things in the 'Contents Area' with the image tag including text, links, other image tags, and even whole HTML FORMS.

 Close Window