--Program Usage Guide--  Basic Box Settings:

Contents HTML Tips

Overview

 You are not limited to 'skinning' just plain text with your Curved Corner Boxes, you can also 'skin' HTML code.  You can 'skin' any HTML code you want including live web links, web images, web fill in FORMS, spans, divs, client side javascripts, and even server side programming code like php! (Server side code will not execute until you upload the Curved Corner Box copy/paste code to your web site).  This system creates the Coolest Web Photo Frames! for your web images.  You can even 'skin' html object tags including YOUTUBE.com video object tags!

 If you do not know html at all, the 'Contents SubSelection Functions' found on the application root page, can create the html for you for common items like web links, web image tags, and horizontal rules.  It can also be used to style subparts of your Contents Area with different font families, font colors and size, and even change the background color for part of the Contents Area!  Refer to the section of this manual titled 'Contents SubSelection Functions'.

 Below I will give examples of Curved Corner Boxes used with some of the types of html listed above.  I'll also explain a few simple HTML tags and tricks you can use in your contents including how to implement the way cool mouseover effects on the menu links for this documentation using just simple, basic css - no javascript required.  If you want to learn how to 'skin' your YOUTUBE.COM videos with Curved Corner Boxes, go to the section of this manual labeled: 'Skin' YOUTUBE Videos!

Documentation Navigational Menu - Creating the Mouseover Effects and the Curved Corners Box 'skin'

 As an example of how to make really cool CSS mouseover effects and how to 'skin' them with this system, I will explain how to make my navigational menu in the left column of this page.  If you haven't tried mousing over those links yet, try it now.  When you mouseover those links, the links turn black, the gray background of the link will change to a wood background, and the link 'panel' should now look slightly 3D recessed.  Believe it or not, that entire mouseover effect requires only a a very small amount of CSS code, a minimal amount of html code, and no javascript code!

First I will explain how to create the Curved Corners Box 'skin' for the menu, then I will explain the cool mouseover effects. To make the Curved Corner Box container for the menu, I set the 'Box Body Color' field to #eeeeee and erased any value from the 'Box Body graphic URL' field. That creates the light gray curved 'skin' you see. Next I erased any value from the 'Contents Area background graphic URL' field and set the 'Contents area background color' field to #cccccc to get the darker gray color you see in the 'inner' rectangular area of the menu.

To finish off the Curved Corners Box style, I set both the Horizontal and the Vertical 'Contents area padding' fields to zero, and set the 'Show contents area border' checkbox and set the border size to 2 pixels and it's color to black. That finishes the Curved Corner Box style for this navigational menu and the rest of the menu just consists of dumping web links with attached css styles into the 'Contents Area' of the box.

 When those navigation links are not moused over, they can be described as being blue, having a gray background, having a white border, and they all line up on the left and on the right.  I define them with this CSS code:
<style type="text/css">
    .doclinks { font-size:95%; color:blue; background-color:inherit; margin:0px 0px; padding:0px 8px; border:1px white solid;display:block; }
</style>

 The background-color:inherit; attribute is what gives the link it's light gray background.  It inherits it's background color from the bigger area it is in, namely the 'Contents Area' of the Curved Corner Box it is in.  I set that area, which is the big rectangle just inside the Curved Corner Box, to 'background-color:#cccccc;' which is the gray color you see.

 The border:1px white solid; attribute is what draws the white border around the links.   1px stands for 1 pixels, just replace that number with whatever pixel thickness you want your border to be.  white specifies the color of the border and you can find more information on the colors you can use at w3schools.com.

 The padding:0px 8px; attribute specifies the vertical and horizontal padding between the link and the white border around it.  The first attribute specifies the amount of top and bottom padding to use and the second attribute specifies the amount of padding to use before and following the links.  The second attribute, '8px', is what causes the links to be indented from the left a little.  Just replace those numbers with whatever vertical and horizontal padding you want.

 The display:block; attribute is sort of a magic attribute, it turns what is usually an inline item into a block level item like a div.  The useful upshot of this is that now the links will expand fully left and right into the area they are in, the 'Contents Area' of the Curved Corner Box.  That effectively makes the links all the same width when usually they would all be different widths and this technique would not work.  With this technique, coding your links could not be easier:
 
<a href="link1.htm" class="doclinks">linktext1</a>
<a href="link2.htm" class="doclinks">linktext2</a>
<a href="link3.htm" class="doclinks">linktext3</a>

 As shown, just list your links one after the other.  No <br>'s are necessary between the items because they are now block level items which will automatically insert a line break between the items.

 Now for the action!  Just how are my cool documentation menu mouseover effects created?  To the .doclinks class that I defined as part of the <style> tag I illustrated earlier in this tutorial, I add a .mylinks:hover class:
<style type="text/css">
 
.doclinks { font-size:95%; color:blue; background-color:inherit; margin:0px 0px; padding:0px 8px; border:1px white solid;display:block; }
 
.doclinks:hover { color:black; background-image: url ( http://curved-corner-boxes.com/curved/pubimages/background/a-wood-3.jpg); border:1px black solid; }
 
</style>

 The :hover part of the .doclinks:hover is clearly what tells the browser to use this CSS attributes definition when someone does a mouseover on a link that has the class="doclinks" as part of the link definition.  The first part of the definition 'color:black;', tells it to change the link color to black on mouseover.  Try doing a mouse over on my menu now to verify that that happens.  The background-image: url( http://curved-corner-boxes.com/curved/pubimages/background/a-wood-3.jpg); attribute there tells the browser to use the specified URL for the background of the link on mouseover.  (IE caches the graphic better if you specify the entire url instead of a relative url.)

 If a background-image: attribute is set like that, it overrides any setting you might have for the background-color: attribute, which I had specified as 'inherit' earlier in the .doclinks class definition.  So therefore the background of the link changes from a gray color to a wood pattern graphic on mouseover!

 The final part of the doclinks:hover definition to explain is the border:1px black solid;.  In the .doclinks class definition, I had specified border:1px white solid;.  In the doclinks:hover class, the border attribute setting is nearly identical except that the border color is now changed from 'white' to 'black'.  This has the effect of creating a recessed button look on mouseover.  Very simple, very cool, and that's all the code it takes!

 This technique is highly cross browser compatable and will work on Internet Explorer 4+, Firefox, Opera, and even Safari!

Creating Web Links:

 A basic web link looks like this:
<a href="http://yourdomain.com/directory/file.htm">link text</a>  Just replace that href= attribute with your domain name and file of choice and replace the link text with your link text.  If you want the link to load in a new browser window add target="_blank" to the link, like:
<a href="http://yourdomain.com/directory/file.htm" target="_blank">link text</a>

Using CSS:

 You can use the span tag with the CSS inline style= attribute to create a drop cap effect like:
<span style="font-size:160%">A</span>PACHE <span style="font-size:160%">S</span>ERVER
Those HTML contents were used to create this box:

APACHE SERVER

 Just use that drop cap template above and replace the % number with your choice.  If you want the drop caps to be colored as well, use this template:
<span style="font-size:160%;color:lime">A</span>PACHE <span style="font-size:160%;color:lime">S</span>ERVER
That will create this box:

APACHE SERVER

 A number of different color names are allowed including red, silver, green, etc.  You can also use RGB hex codes instead like #ffcc00.  You can find more information on the colors you can use at w3schools.com.

More CSS:

 Instead of using the inline CSS style="" attribute, you can use the CSS class="" instead.  The idea with the class="" is that you define a set of CSS attributes together in the <HEAD> section of your HTML page and then assign that set of attributes a name.  You then just use that 'name' in the class="" attribute.  Doing it that way saves on typing and can save on document size, but more importantly, you need to do it that way to do the really cool CSS mouseover effects.  Which is going to be explained below.

 Let's start with a simple link with a CSS class attribute:
<a href="http://somedomain.com/page.htm" class="mylinks">link text</a>

 You would define that class named 'mylinks' in the <HEAD> section of your HTML page like this:
<style type="text/css">
.mylinks { }
</style>

 That definition doesn't contain any actual attributes yet, the attributes would go between the { } s.  Different attributes would be separated by ';'s and an attribute value would be separated from the attribute name by a ':'.

Using Graphics in Your Contents Area

 You can also use the HTML <img src="http://youdomain.com/graphic.gif"> image tag as part of the Contents of your Curved Corner Boxes.  You can use small graphics to dress up the contents just a little.  I created the following box using this for my box Contents:
Who will win the race<img src="http://curved-corner-boxes.com/curved/graphics/question.gif" border="0">

Who will win the race

 In that case I used a question mark graphic I use as my context sensitive help button.  You could also use a Curved Corner Box as a fancy picture frame, like this:

 I created that box with these Contents:
<img src="http://curved-corner-boxes.com/curved/graphics/einstein.jpg">
I could add a title to that picture, like this:

Albert Einstein

 In the case above, I used these Contents:
<img src="http://curved-corner-boxes.com/curved/graphics/einstein.jpg"> <br>Albert Einstein
 Notice that the image tag is just followed by a break tag and then simple text!  For more info refer to the section of this manual titled: Coolest Web Photo Frames!

 Close Window