We are Seventh Day Baptists, therefore we keep the holy Sabbath (Saturday). Read more.

Articles

Changing the Style (look and Feel)

Missing screencast
Help us improve the documentation page and Win a free copy of BB Flashback PRO*

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%*/
#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

Newsletter

captcha

Connect with us

We're on Social Networks. Follow us & get in touch.
You are here: Start page