The above text can be directly copied and pasted to create a box with all of the different components, however, some additional padding elements (described below) must also be used to smooth text layout. The pieces that look like
<div class="gr-box"><i class="gr1"></i><i class="gr2"><i></i></i><i class="gr3"><i></i></i><div class="gr-top"><i class="tri"></i><div class="gr"><i class="icon i#"></i><!-- TOP --><br /></div></div><div class="gr-midbody"><div class="gr"><!-- MIDBODY --></div></div><div class="gr-body"><div class="gr"><!-- BODY --></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i></div>
<!-- -->are known as HTML comments, they won't render on the page. Replace these with the internal content you would like to put in each component.
This is the foundation of the box structure, it contains all other elements of the box. While it doesn't have any physical appearance itself (it is transparent, and only serves to position internal and external tags), it is a necessary parent to some of the other classes used in the box.
<div class="gr-box"></div>These tags must be included, containing ALL of the other components to ensure correct behavior.There are additional classes that can be added to this containing element to give different behavior, try including
Some classes may be used outside of the
.gr-boxclass but will likely have different appearances and physical behavior.
.gr-headlessbox(each type of widget also has a
.gr-[...]class assigned to it, experiment with those for different effects.) There will soon be more on alternate box types in another tutorial.
The rounded edges of the box are created by a series of classes applied to three spanning
<i></i>tags. They are numbered 1 - 2 - 3 to make an upward curve, and 3 - 2 - 1 to make a downward curve.
<i class="gr1"></i>The top bar of the round edge, this appears as a horizontal bar, slightly shorter than the width of the box, with transparent sides.
<i class="gr2"><i></i></i>This is the next element of the rounded edge, it appears as a short bar (the outline) with transparent outside. The internal <i></i> tag creates a light colored bar (giving the rounding an antialiased effect). If this internal tag is omitted, the background color will be the same as that of the BODY section of the box (to allow a smooth transition from that component).
<i class="gr3"><i></i></i>This is the last piece of the rounded edge, it is similar to
.gr2but with a vertical bar instead of a horizontal one. The internal tag creates two small light boxes (for the smoothing). Again, removing the internal tag, will leave the background color the same as that of the BODY component.
As of yet, the
.gb1currently have no physical appearance, they are used so that user created style-sheets (as used in Premium Journals) can control the lower rounded edge separate from the upper one.
The top of the box is used to hold the title of the box as well as an icon and a triangle transition glyph. It is lighter in color than the body elements of the box.The two line breaks are very important to ensure that the icon does not collapse into the next element (shifting its border to the right). Also be aware of the fact that the text in the top area is lighter colored. This is due to the fact that normally the text is included within an <h2></h2> tag set, a feature which is disabled from user-made boxes. There are alternate ways to create darker text in the title though (?).
<div class="gr-top"></div>This is the containing element of the top of the box. It has a darker border (that matches the outline of the rounded edge) on the left, right, and bottom edges. It sets the internal
.grclass to use the same light background as the rest of the TOP component.
<i class="tri"></i>This creates the small triangle that descends into the next component. The triangle is absolute positioned relative to the bottom of the component element, it cannot be moved arbitrarily (unless placed within another element). The triangle itself is an image file (quadraforce.gif) assigned to the background of the tag.
<div class="gr"></div>When used inside of the
.gr-topclass this element has a light background and lighter borders on the left and right edges. This class, appearing in all of the components of the box, is the the primary internal structure. It is here that content (such as text and images), is placed.
<i class="icon i#"></i>This creates an icon from the standard iconset (icons-small-modules.gif) that assigned to the background of the tag. Whatever is used to replace
#determines the icon that is used, the number mapping does not match the order of the icons in the file.
For more information on icons, please see `LostKitten's 1-50 Custom Box Icon Legend and 51-100 Custom Box Icon Legend guides.
Note how the top component has a border on the bottom edge, but not the top. This allows for the rounded edge to transition smoothly with the upper rounded edge. As an experiment, try replacing the entire upper rounded component with an empty
div.gr-toptag, to create a sharp edge with a border.
This component is not often seen in widgets (most notably, it is located in the donation widget). It has a darker background than the BODY component, but functions in very much the same way.
<div class="gr-midbody"></div>The containing element of the MIDBODY component, this has a dark border (though lighter than the other components) on the left, right, and bottom edges. It has a relatively dark background (that is seen through the transparent internal
<div class="gr"></div>When located within a
.gr-midbodyelement, this has a light colored border on the left, right, and bottom edges. It has a transparent background.
This is intended to be the final element of the box (it transitions into the lower rounded edge). It is also the primary location for content in the box
<div class="gr-body"></div>The containing element of the BODY component, this has a dark border (though lighter than the other components) on the left and right edges (but not the bottom). It has a mid-tone background (that is seen through the transparent internal
<div class="gr"></div>When located within a
.grelement, this has a light colored border on the top edge. It has a transparent background.
<div class="pp"></div>This transparent structure creates text padding within an element. Use the
.pppclasses for different amounts of padding.