{gdata title=|Missing screencast| app=|none|}

Contact Enhanced (CE) tries to inherit most of your template's style. However if it does not fit your needs you can add a class to your css file; Follow these simple steps:

Instead of editing your template's CSS file you can add to Contact Enhanced's css file, which is located at

Joomla 1.5[Path to Joomla 1.5]/components/com_contact_enhanced/assets/css/validate.css

Joomla 1.6[Path to Joomla 1.6]/components/com_contactenhanced/assets/css/ce.css


Edit the component container:

/*This will increase the font size in 10%*/

Edit the custom fields:

/*This will add a bigger margin (distance) between the field container 
and the other HTML elements */
.ce-cf-container{margin:5px; padding-left:10px}
/* This will make the text in the fields bold */
.ce-cf-container .inputbox{font-weight:bolder}
/* This will make the text in the fields take the full width */
/* You can change the percentage until you get the desired result */
.ce-cf-container .inputbox{width:99%}
/* This will add a spacing to letters  of the field labels  */
.ce-cf-container label{letter-spacing:0.1em}
/* To remove the red triangle from required fields remove this:  */
background-image: url(../images/required_bg.gif) !important;
background-repeat: no-repeat !important;
background-position: top right !important;}

Change Map styling:

When you open the CSS file you will see much more styling options, but these are the ones most users like to change:

By default it is 300px hight and get's the full with of the container (sidebar or top container):

#ce_map_canvas {height:300px;width:100%}

There is also a border around, which you can change or add more styling to:

#ce_map_container{border:6px solid #CCC;background-color:#CCC}


Advanced Styling

You can add a different styling to each custom field. Every Custom Field has this structure:

<div id="ce-cf-container-fieldId" class="ce-cf-container cf-type-fieldType ce-fltwidth-100" >
<label class="cf-label requiredField " for="fieldName">fieldName</label>
<input id="fieldName"
class="inputbox cf-input-fieldType required"
value="" />

For example you can add a specific styling like these examples:

/* For this specific field id, using the container as the reference */
#ce-cf-container-fieldId input{/* You styling goes here */}

/* For this specific field id, using the input fieldId as the reference */
input#fieldName{/* You styling goes here */}

FireBug might help you to inspect the code and change/debug the CSS.

Related Article:

HTML Field Attributes