Contact Enhanced Documentation

{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

Recommend to a friend

Copyright © 2018 All Rights Reserved.

This site is not affiliated with or endorsed by the Joomla!™ Project. It is not supported or warranted by the Joomla!™ Project or Open Source Matters™. The Joomla!™ logo is used under a limited license granted by Open Source Matters™, the trademark holder in the United States and other countries.
We may collect your IP address and your browser's User Agent string while using our site for security reasons and deriving aggregate information (analytics). This information is retained for a minimum of 1 and a maximum of 24 months.