Details

Category: Customizing your forms

{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

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

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

 

Edit the component container:

/*This will increase the font size in 10%*/
#component-contact-enhanced{font-size:110%}

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:  */
.required{
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" 
		type="text" 
		class="inputbox cf-input-fieldType required" 
		name="fieldName" 
		value="" /> 
</div>

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