Load Curved Box Above in WebApp
Load the WebApp      

How it Works

You use this system like this:

Enter Your HTML or Text in the 'Your Box Contents' Textbox

You enter your 'contents' in the large textbox labeled 'Your Box Contents' on the main application page. 'Contents' refers to whatever HTML or text you want to have a Curved Corners 'skin'. For instance if you wanted to create a navigational menu then you would enter a list of links. If you wanted to 'skin' a YouTube.com video then you would copy the 'object' tag from the field labeled 'embed' on the YouTube.com page to your clipboard and then paste it into the 'Your Box Contents' field. Other kinds of HTML allowed as your 'contents' are whole web forms, image tags, span tags, div tags, and even web widgets and javascript code like Google Gadgets. Or mix and match any of the above with any other HTML. Or just enter text to just create a cool Curved Corners Graphic like at the top of this column.

Interactively Develop the Style of Your Curved Corners Box

--box body style --box width --text styles --Contents area background styles --colors --graphics --SubSelection functions

Get Copy/Paste Code or use Screen Capture Program

Save/Recall Custom Styles

  1. Interactively set the style for your box by clicking on colors, graphics, and font attributes, and by entering numbers for things like font size, box size, and border size.
  2. Enter what you want for your box contents in the large text box provided. You can enter text or any HTML you want including links, image tags, HTML Forms, and even javascript!
     
    Alternately, if you don't know HTML, you can use this programs Contents Area SubSelection functions to create links, image tags, and different subselection font stylings for you.
  3. Choose the 'Show COPY/PASTE Code' function and copy the code provided to your clipboard. You can then just paste it into your web page, web 2.0 service like MySpace.com, template web site, or Blog!
  4. Save the Curved Corner Box you created in your Custom Styles account and then you can recall it at any time and change it's Contents to use it as a web site wide template style.

Curved Corner Boxes works great for making coordinated web site navigation boxes, content heading graphics, message boxes to contain informative text, advertisement boxes with multiple 'live' affiliate links, 'picture frames' for your graphics, and even for 'skinning' web widgets.

     The diagram seen below shows the different areas in which you are able to set styles for your box.  A short summary of each area then follows.

CCB diagram

1.  These settings allow you to set either a BOX BODY graphic or a BOX BODY color for the body of your box.  In the diagrammed example above, a tiling wood graphic selected using my graphic picker was chosen. A solid color instead of a graphic could have been chosen. If a color and a graphic are both chosen, then the graphic overrides the color. If you want, you can use a graphic from your web site instead by entering the full URL of the graphic into the field provided. That way Curved Corner Boxes CAN BE MADE IN UNLIMITED STYLES!

2.  These settings allow you to set either a background graphic or a background color for the Contents Area. The Contents area is the rectangular area in the center of the box. These settings work similar to the settings in 1. above with the background graphic field overriding the background color field if both are set. In the diagrammed box above, I used a background color of white and left the background graphic field blank.

       If you leave both the Contents Area background graphic field and the background color field blank, then whatever settings you have set for the Box Body Graphic field and the Box Body Color field will flow into the Contents Area.  In the case of the example box above, if I had left both the Contents Area Graphic field blank and the color field blank as well, but left all of the other settings of the box the same, it would look something like this:

cc
b   DEPARTMENT OF THE INTERIOR
Commissioner     Deputy Commissioner
Secretary
  b
cc

3.  You can set whether to have a Contents Area Border or not and what color to make it and also what thickness to make it.  The Curved Corner Box above with just the Contents Area Border removed would be:

cc
b   DEPARTMENT OF THE INTERIOR
Commissioner    Deputy Commissioner
Secretary
  b
cc

4.  The Contents Area Text Style settings will be applied to any text entered into your Contents Area. As of this writing, you can choose 1 of 12 different fonts, the font color, the font size, the line size, and choose bold, italics, or no wrap. Using the SubSelection functions of the Contents Area, you can set different font attributes for a subpart of your content. I did that in the box above with the 'Commissioner' etc.

5.  The application gives you a large text box in which to enter your contents. You can just enter text into the Contents Area if you wish, maybe to create a content heading graphic or an informative message box.

Or you can enter in HTML as your contents, including <img src=""> tags, and link tags, and spans or divs if you want. You can even enter HTML Forms or script tags or server side code! The server code will not execute until you paste the Curved Corner Box into your own page, but the javascript will execute right in this application! I do not limit what you can put in your Contents Area in any way.

If you do not know HTML, this program has powerful point and click functions for inserting graphic tags and link tags and for doing substylings of the text in your Contents Area.

6.  The Target Web Page Settings allow you to adjust the Curved Corner Box for the area in the web page or blog in which you will PASTE it.  For instance, you might want to put a Curved Corner Advertisement Box with an affiliate link partway down the common left column of your web page.  As is common, your left column is lightly colored to give the page a little structure.  In that case you would use a eyedropper sampler or some other method to get the RGB code being used in that area in your web page and then enter that into the Target Web Page Background Color field.  If you don't do this, then the corners will not look right after you COPY/PASTE into your web page.  There are several other Target Web Page settings which are explained in the program manual which can be accessed by clicking one of the many context sensitive help buttons found on the application.

Run the Curved Corner Boxes Application!

Application Tips

     
 
 
 
 

This web page Validates!
Valid HTML 4.01 Transitional    Valid CSS!