Forums

Hi I'm totally new to this. I have created some forms and apart form the heading where you can select H1-H6 for the text size, how can I do this with the other fields? (ie, Text, Text box etc..) There are no size selection for the other elements?

Hi, no way to do this with the other fields except with changing the CSS file under components/com_chronocontact/css/

the view at the admin will be different than the view at the real website frontend because your website template plays a role here so you must use CSS

Regards

Max

Hi Max, so are you saying that I can edit the css file that you mentioned directly and change the fonts to any size and any style?

Yes, I think they are at 3 CSS files for different browsers, style1.css and another 2 with the same name but extra _ie6 or 7

Cheers

Max

Sorry to be a pain Max but any ideas which parameter I should change say if I want Arial 10pt (or equivalent)? Below is a copy of the style1-ie7.css file. I have changed the ones highlighted in underlined italics (under #Properties and div.item span) from the default 12 to 10 but didn't make any difference..?

@charset "utf-8";
/* CSS Document */

/*body, ul, form, div, input, select { margin:0px; padding:0px;}*/

#container
{
width: 800px;
margin:0px auto;

}

#top_column {
width:549px;
float:left;
border:1px #000000 solid;
padding:10px;
background-color: #fff;

}

#left_column {
width:539px;
min-height:150px;
height:auto!important;
float:left;
border:1px #000000 solid;
padding:15px;
background-color: #fff;



}

#right_column { width:227px; float:left; border:1px #000000 solid; background-color:#eeeeee; }

.box_header {
background-image:url(images/panel1.gif);
background-repeat:no-repeat;
overflow:hidden;
height:17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 17px;
padding-left: 10px;
}

.box_text {
padding:10px 15px;


}
.items {
padding:10px 15px;


}

div.item span {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
padding-left: 20px;
background-position: left;
background-repeat: no-repeat;
cursor:move;
}



#cf_text {
background-image: url(images/text.png);

}

#cf_heading {background-image:url(images/heading.png);}

#cf_textbox { background-image:url(images/textbox.png);}

#cf_textarea { background-image:url(images/textarea.png);}

#cf_dropdown { background-image:url(images/dropdown.png);}

#cf_checkbox { background-image:url(images/checkbox.png);}

#cf_radiobutton { background-image:url(images/radiobutton.png);}

#cf_datatimepicker { background-image:url(images/datatimepicker.png);}

#cf_fileupload { background-image:url(images/fileupload.png);}

#cf_button { background-image:url(images/button.png);}



.border-top { border-top:1px #000000 solid!important;}

#Properties {font-family:Arial, Helvetica, sans-serif;
font-size:10px;}

.Propertiesitem span {
font-size:12px;
line-height:20px;
display: block; width:100px;
float:left;
}

.Propertiesitem input, .Propertiesitem select {font-family:Arial, Helvetica, sans-serif;
font-size:12px; height:16px; float:left; /*background:none;*/ border:none; }

.Propertiesitem .select1 {
height:20px;
}

.Propertiesitem hr {
clear:both;
border:1px #111111 solid;
border-bottom: none;
border-left: none;
border-right: none;
}

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

.form_item {
/*border:1px #CCCCCC solid;*/
height:auto;
padding:0px!important;

}

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


}

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

.form_element select, .form_element input {
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}

.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;}

.button { text-align:center; border:none; margin-top:10px; }

.no_delete { border:none;}

.cf_button1 {
width:70px!important;
height:20px!important;
}



.radio { width:20px!important;}

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

I finally sussed it out in the end, its the '.form_element }' is the one to change. Hope this help others future reference!😀

Great, that's CSS!🙂

What line in the CSS can I set the line spacing of the forms? I've decreased the font but also want to descrease the spacing between each line so it looks nicer 😀

Any help greatly appreciated. Thanks.

Hi sophy978,

Looking at the earlier post I think it's this css, specifically the height:auto item

.form_item {
/*border:1px #CCCCCC solid;*/
height:auto;
padding:0px!important;

}

Bob

Thanks for the reply Bob.
I'm afraid to say I need just a little more help as I'm still learning CSS.
I couldn't figure out what the item height:auto means. Can I set this to a value? I tried setting it to '1' instead of 'auto' it didn't make a difference. Could you help please?

I've basically decreased my font size to 10 and now need to decrease the line spacing so it looks closer.

Hi sophy978,

Best I cna do is to refer you to the W3Schools CSS tutorials here's the one that talks about height.

Bob

I finally sussed it out in the end, its the '.form_element }' is the one to change. Hope this help others future reference!😀

Hello, I've changed the font color in all 3 CSS files but still no affect. I just want the input text fields to be darker. Can someone help?

These are my code changes, the one's that I've added are bolded:

.form_element {
	font-family:Verdana,Arial, Helvetica, sans-serif;
	font-size:11px;
	float: left;
	margin-left:30px;
	margin-top:8px;
	margin-bottom:8px;
         color: #424242;}

.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 {
	width:150px;
	font-family:Verdana,Arial, Helvetica, sans-serif;
	font-size:11px;
         color: #424242;	
}

Hi sophy,

maybe your template override them, you will need to add !important beside the new rules! Firebug will tell you the definite answer about why they are not applied!

Regards
Max

Hi Max,

That did it 😀 , I had to add the !important to the line as you said. It works perfectly now, thanks again!

color: #424242 !important;

-Sophy978