UPDATE: 8-16 New icons for CB registration page

14 years 9 months ago #17130 by Raj
Updated 8-16-04. See Below for more icons and info on styling the registration form.

Icons for Appears on profile, does not appear on profile, required, and more information. The appear and do not appear icons actually use an icon of an eye.

Download, unzip, and upload to www.YourSite.com/components/com_comprofiler/plugin/templates/TheTemplateYouAreUsing

For use mainly with light colored backgrounds.

Roger

Attachment icons.zip not found



Post edited by: Raj, at: 2006/08/17 01:35
Attachments:

Please Log in to join the conversation.

14 years 9 months ago #17156 by nant

Please Log in to join the conversation.

14 years 9 months ago #17643 by ankahukuk
Replied by ankahukuk on topic Re:New set of icons for CB registration page
Good icons..
Thanks

Please Log in to join the conversation.

14 years 8 months ago #18974 by Raj
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

Please Log in to join the conversation.

14 years 6 months ago #22626 by raoult
here's a tooltip icon that I think looks pretty slick.

-raoult
Attachments:

Please Log in to join the conversation.

14 years 5 months ago #25505 by gorfores
Hello,
i created new icons with equal proportions (100x100) as your Icons get displayed wrong here with the default settings.
Also i made them *.png so u can use them whatever background ur theme has.

I changed all harcoded relevant links inside /www/components/com_comprofiler/comprofiler.html.php but still the register page want display the pngs. the image path is still pointing to *gif.To install thsi i changed the default them xml accordingly.

Where can i find the hardcoded image links from the CB register page?

Post edited by: gorfores, at: 2006/11/26 15:14
Attachments:

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.518 seconds

Facebook Twitter LinkedIn