Forums

Hi

I'm styling my form with CSS, all is well apart from other page elements such as the login and search module are also sharing the same styling.
How can I style my form elements separately?

Thank you

Wendy

Hi Wendy,

All styles are under components/com_chronocontact/css/style1.css

OR you can wait for V3.1 which will have more CSS options and will be available in 2~3 days

Max

Many thanks for this.

Wendy.

Hi again

I've located the CSS file and have styled my form, only one problem now. I need to make the submit button shorter, its length changed when I set the Name and Email box lengths. How do I set the length of the Submit button separately? Please see attached TIFF file.

Thank you

Wendy
[attachment=0]form.jpg[/attachment]

Hi Wendy,

I think you canjust style it with 'width'

<input style='width:100px;' . . .

Many thanks Bob, I will try this

Wendy

Still can't style the Submit button separately, it's the same length as my Name and Email input boxes. Here's my CSS for the form:

/*-----------Form Styles--------------*/

.form_item {
/*border:1px #000 solid;*/
height:auto;
background-color: #aaccff;

}

.form_element {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
float: left;
margin-left:30px;
margin-top:8px;
margin-bottom:8px;

}

.form_element label {
width:150px;
display: block;
float: left;
line-height: 22px;
vertical-align: middle;

}
.form_element .check_label {
width:150px;
float:none;
display:inline;
line-height: 22px;
vertical-align: middle;

}
.form_element .radio_label {
width:150px;
float:none;
display:inline;
line-height: 22px;
vertical-align: middle;
}

.form_element select, .form_element input, .form_element textarea {
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
border: 1px solid #6699ff;

}

.delete_icon { float:right; /*border-left:1px #CCCCCC solid; padding:10px;*/}

.delete_icon1 { float:right; border-left:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; padding:10px;}

.form_element { text-align:length; border:none; margin-top:10px;}

.no_delete { border:none;}

.cf_button1 {
width:70px!important;
}



.radio { width:20px!important;}

.float_left { float:left;}
.clear { clear:both; font-size:0px; line-height:0px;}

.width1 { width:571px;}


Hope you can help.

Wendy.

Hi Wendy,

find the button code in the form and add some class:

<input type="button" class="buttonclass"

now at the CSS:

.buttonclass{
width:50px!important;
}

Cheers
Max

Thank you, it worked a treat

Wendy