{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;}
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}
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:
Recommend to a friend
Copyright © 2018 IdealExtensions.com. All Rights Reserved.