I've been playing around with more icons and some ways of styling the CB registration form. This is tested on IE and Firefox.
Here's a picture that shows what I did:
www.VisionSimulations.com/registration.jpg
I don't know if it will work "out of box" for you, because some of your form elements might inherit from the template. So expect to have to tweak it.
Notice that the icons are much bigger than the usual CB icons. Fortunately, the size of those icons is under CSS control. The new icons are 48 x 36 pixels. Here are the icons:
www.VisionSimulations.com/CB_Icons.zip
Unzip and upload to
www.YourSite.com/components/com_comprofiler/plugin/templates/TheTemplateYouAreUsing
Now for the CSS. Paste this into your template. Note that because the icons are larger, they don't tend to fit on a single line at the top of the CB registration form anymore. So...you can either tolerate that pipe | character at the end of the description, or edit the code of comprofiler.class.php to remove it.
Note that one of the keys to making the page look pretty is to use the Field Delimiter thingy the right way. When you want a nice header for some set of fields, put <p class="descriptioncontents">Whatever_text_you_want</p> into the description of the delimiter. Then use a single space for the title.
The CSS begins below the --- line
/*
At the end of the description of some of the icons at the top of the registrion form is an extraneous pipe | character.
To remove that character, Line 1709 of comprofiler.class.php of CB 1.01 should be:
if ($showLabels) $oReturn .= " ".cbFieldTip($ui, _UE_FIELDDESCRIPTION, "?")." "._UE_FIELDDESCRIPTION;
Line 1711 should be:
if ($showLabels) $oReturn .= " "._UE_FIELDREQUIRED;
Line 1713 should be:
if( $showLabels) $oReturn .= " "._UE_FIELDONPROFILE;
This allows the CSS for #cbIconsTop img to be set to display:block, to achieve a vertical alignment of the larger icons.
With larger icons, they don't want to fit on one line across the top.
*/
/* Controls the appearance of the icons on the registration form */
.cbFieldIcons img{
width:48px;
height:36px;
float: top right;
}
/* Controls the appearance of the first column of the registration form */
#registrationTable .titleCell {
font-family:Arial;
font-size:12px;
width:200px;
padding:10px;
color:#3670A7;
}
/* Controls the appearance of the delimiter cell */
#registrationTable .descriptionCell {
font-size:14px !important;
font-family:Arial;
}
/* Controls the appearance of the font for the icons that appears above the registration form */
#cbIconsTop {
font-family:Arial;
font-size:12px;
width:300px;
padding:20px;
color:#3670A7;
}
/* Controls the appearance of the icons that appears above the registration form */
#cbIconsTop img {
display:block;
padding:5px;
width:48px;
height:36px;
}
/* Controls the appearance of the icons that appears above the registration form */
.descriptioncontents {
padding:5px;
margin:5px;
text-align:center;
border:3px solid #6567cb;
color: #102132;
background:#e2e2ee;
}
/* Controls the appearance of the table that contains the registration form */
#registrationTable {
background-color: #F9FBFD;
color: #000000;
width: 700px;
border: 1px solid #D7E5F2;
border-collapse: collapse;
}
/* Controls the font for the registration form heading */
#registrationTable .componentheading {
padding:5px;
margin:5px;
text-align:center;
border:3px solid #6567cb;
color: #102132;
background:#e2e2ee;
font-family:Arial;
font-size:14px;
font-weight:normal;
}
#registrationTable td {
border: 1px solid #D7E5F2;
padding-left: 4px;
}
/* Controls the appearance of the the inputbox, textarea, and selectbox. */
#registrationTable input, #registrationTable textarea, #registrationTable select, #registrationTable .inputbox {
padding:4px;
margin:4px;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
}
Post edited by: Raj, at: 2006/08/18 15:43
nant
