Custom CSS for a module

Fr

Fritz 27 Oct, 2009

How do I set a custom CSS for a module? There a wizard or some tutorials? I searched in your website but I cannot find something like that ....
I would to lower the spacing between the lines but I cannot.

Max_admin 02 Nov, 2009

Hi Fritz,

Just add the CSS code in the form CSS code box and it will be included in the module, your code will override the Chronoforms core CSS for the form!

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

Fr

Fritz 03 Nov, 2009

Thanks for your reply. But his suggestion does not work. 😢
The line height DIV that is used by the module remains unchanged.
http://joomla.danielilacastellana.it/index.php?option=com_chronocontact&Itemid=172&lang=it
It seems that the CSS from the website template in joomla has prevalence.
The problem is that I cannot to eliminate this setting even from the CSS from this template. I think I must groped with the inclusion of a table.

ka

kairey 03 Nov, 2009

I have just done as Max suggested above to a form I created with the wizard.

First I changed it to Theme 1 and then amended .cf_title .cf_inputtext .cf_textarea and .cf_item to give me the spacing I wanted...

Now I just need to get the submit button spaced correctly!

Fr

Fritz 04 Nov, 2009

I have searched the styles that you've reported in the template css without finding them. I inserted the CSS code with these styles in the form but nothing has changed.

Here the css that i have input in the "CSS Styles (May override Chronoforms CSS)":

Cf_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 80%;
}
Cf_inputtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 80%;
}
Cf_textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 80%;
}
Cf_item {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 80%;
}

Gr

GreyHead 04 Nov, 2009

Hi Fritz,

I think that the prefix is cf_ - not Cf_

Bob

Fr

Fritz 04 Nov, 2009

Thank you Bob. Unfortunately nothing has changed. I also set the character size at px (also in pt!) but it seems not to have any importance. 😢

cf_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_inputtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_item {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}

Gr

GreyHead 04 Nov, 2009

Hi Fritz,

I'm not a CSS expert - if you look in FireBug what CSS is at the top of the list?

Bob

Fr

Fritz 04 Nov, 2009

>look in FireBug what CSS is at the top of the list?

There is a set of shadowbox_* variables and I cannot find values concerning the height of rows. But I have not yet attempted to change these entries. Now I would try this route - though I have fear of jeopardizing the template.

Fr

Fritz 11 Nov, 2009

I changed the layout of the template, I inserted the CSS settings in your wizard, but this ugly style does not change. I even created a table to force the order of rows, but even this solution did not work.

see here...
http://joomla.danielilacastellana.it/index.php?option=com_chronocontact&chronoformname=BOOKING_TABLE

seems that changes depending on what browser you use ...

Gr

GreyHead 11 Nov, 2009

Hi Fritz,

ChronoForms does nothing 'clever' with the CSS. If it isn't changing the look of the page then you haven't found the right CSS to change.

If you post a link to the page that might help a little. I just checked the site you linked to but don't see any forms in modules.

Bob

wo

woomaa 25 Mar, 2010

For proper override custom code shoulb be generated AFTER import css stylesheet file, now it is done BEFORE:

Should be like that:

<link href="http://www.arthurandsimon.co.uk/components/com_chronocontact/themes/default/css/style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.cf_label{
font-size: 12px:
font-face: verdana, helvetica, arial;
}

.cf_inputbox{
font-size: 12px:
font-face: verdana, helvetica, arial;
}
</style>

Fr

Fritz 25 Mar, 2010

thanks for the hint, woomaa! I think that this is not the problem. Analyzing the different styles that are active on this page, I sought the responsible for that (double row height) but I have it not found. I used various tools that FF and IE.The display changes also on different browsers.
I finally left this setting because the client was fine. I noticed that the same version of chronoforms installed in other joomla sites does not make this mistake. I think the problem could be due to a setting in the css of the main template.

jm

jmccuneprCE 14 Oct, 2010

I've read over this thread and others related to override of CSS and found it baffling. I understand now where the Chronoforms CSS is located, how to create and change CSS themes, and how to use the transform form button.

Still baffling is how override CSS when editing a form, on the formcode tab, in the View Code area titled "CSS Styles (May override Chronoforms CSS). Is CSS code placed in this box expected to sometimes or always override the ChronoForm template's CSS, assuming Load Chronoforms CSS/JS Files is set to 'yes'?

When I place some CSS code in that box and save the result (with Load Chronoforms CSS/JS Files set to 'yes'), there is no change at all in the form's appearance, no override takes place. I tried these examples and others, to no avail:

body {background-color:#C6C6C6;}

<style="text/css> body {background-color:#C6C6C6;}</style>

.form_element {font-size:10px;}

Thanks for any help!

Fr

Fritz 15 Oct, 2010

In the meantime I solved the problem of the space between the lines. I worked only on the html code and drop out the chronoform css. I then deleted in the Form HTML any reference to the css and removed all the DIV tags. In this way, by modifying the css of the template I can control the display module chronoforms. I enclose the code used on the site.

<table cellpadding="0" cellspacing="0" style="width: 100%;">
	<tr>
		<td> </td>
		<td> </td>
	</tr>
	<tr>
		<td>Nome </td>
		<td>
		<input id="text_2" class="cf_inputbox required" maxlength="150" name="nome" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Cognome </td>
		<td>
		<input id="text_3" class="cf_inputbox required" maxlength="150" name="cognome" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Indirizzo </td>
		<td>
		<input id="text_3" class="cf_inputbox required" maxlength="150" name="indirizzo" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>CAP </td>
		<td>
		<input id="text_5" class="cf_inputbox required" maxlength="20" name="CAP" size="10" title="" type="text" /></td>
	</tr>
	<tr>
		<td>città </td>
		<td>
		<input id="text_6" class="cf_inputbox required" maxlength="150" name="citta" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Stato </td>
		<td>
		<input id="text_7" class="cf_inputbox required" maxlength="150" name="nazione" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Tel. / Fax  </td>
		<td>
		<input id="text_7" class="cf_inputbox required" maxlength="150" name="telefono" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>E-Mail  </td>
		<td>
		<input id="text_9" class="cf_inputbox validate-email" maxlength="150" name="E-Mail" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Arrivo (tt/mm/jahr) </td>
		<td>
		<input id="text_9" class="cf_inputbox required validate-date-au" maxlength="150" name="arrivo" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Partenza (tt/mm/jahr) </td>
		<td>
		<input id="text_10" class="cf_inputbox required validate-date-au" maxlength="150" name="partenza" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>N. Adulti </td>
		<td>
		<input id="text_11" class="cf_inputbox required validate-number" maxlength="150" name="adulti" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>N. Bambini </td>
		<td>
		<input id="text_12" class="cf_inputbox validate-number" maxlength="150" name="bambini" size="30" title="" type="text" /></td>
	</tr>
	<tr>
		<td>Animali domestici?</td>
		<td><input name="animali_domestici" type="checkbox"></td>
	</tr>
	<tr>
		<td>Trattamento di soggiorno </td>
		<td>
		<select id="select_13" class="cf_inputbox required validate-selection" name="trattamento" size="1" title="">
		<option></option>
		<option value="BB / ÜF / CC">Camera con Colazione</option>
		<option value="HB / HP / MP">Mezza Pensione</option>
		<option value="FB / VP / PC">Pensione Completa</option>
		</select></td>
	</tr>
	<tr>
		<td>Tipo di camera </td>
		<td>
		<select id="select_14" class="cf_inputbox required validate-selection" name="camera" size="1" title="">
		<option></option>
		<option value="single room">Camera Singola</option>
		<option value="double room">Camera Doppia</option>
		<option value="triple room">Camera Tripla</option>
		</select></td>
	</tr>
	<tr>
		<td>altre comunicazioni </td>
		<td>
		<textarea id="text_15" class="cf_inputbox" cols="30" name="commenti" rows="3" title=""></textarea></td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
	</tr>
	<tr>
		<td> Sicurezza Anti-Spam </td>
		<td> {imageverification}</td>
	</tr>
	<tr>
		<td> </td>
		<td>
		<div class="form_element cf_button">
 <input name="button_17" type="submit" value="Invio della vostra richiesta" />
		</div>
		</td>
	</tr>
	<tr>
		<td colspan="2">Protezione Dati (Privacy) </td>
	</tr>
	<tr>
		<td colspan="2" style="text-align: justify">In conformità alla legge 675/96 autorizzo il trasferimento 
		dei dati da me forniti a soggetti terzi, per la ricezione delle informazioni 
		da me richieste e di offerte commerciali. Informativa ai sensi dell'art. 
		10 della legge n. 675/1996 sul trattamento di dati personali: i dati qui 
		raccolti hanno la finalità di registrare l'utente, e attivare nei suoi confronti 
		un servizio informativo. Tali dati verranno trattati elettronicamente in 
		conformità con le leggi vigenti. I dati raccolti potranno essere trasmessi 
		a soggetti terzi per la fornitura del servizio completo. L'interessato gode 
		dei diritti di cui all'art. 13 legge 675/96; titolare e responsabile dei 
		dati raccolti è: Marco Torboli, Albergo Alle Porte, Via Disciplini 21-23, 
		38066 Riva del Garda (TN)</td>
	</tr>
</table>

Reference:
http://hoteldelgarda.com/index.php?option=com_chronocontact&Itemid=166

Gr

GreyHead 15 Oct, 2010

Hi jmccuneprCE,

To manage CSS you do need a good diagnostic tool - I use FireBug in FireFox. There are many places that styles can be added and they don't always work in the way that you expect.

The correct format for the ChronoForms Form CSS box is

body {background-color:#C6C6C6;}

and, on my test site at least, this does change the color of the page background.

AS Fritz has said, you can change the style of the HTML form divs to table, add different class or id names and add custom CSS either to your form or your template.

Bob

la

laustin 05 Nov, 2010

I think the problem below is that you need to put .cf_text {} for example. Each line is missing the "." in front of it.

Thank you Bob. Unfortunately nothing has changed. I also set the character size at px (also in pt!) but it seems not to have any importance. 😢

cf_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_inputtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
cf_item {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}

la

laustin 05 Nov, 2010

Referring to Bob's post below, it seems that you cannot put a .body {} statement in the CSS override box in forms management because chronoforms never has a body class it just puts it in the body tags.

However, it works if you put background-color:#XXXXXX; inside the .form_item spot either in the CSS Override Box in the user interface for the form management or in the css files here "../components/com_chronocontact/themes/default/css".

Here is what you need to put in your CSS override box if you want a white background (otherwise change the hex color code:

.form_item {
background-color:#FFFFFF;
}

Hi jmccuneprCE,

To manage CSS you do need a good diagnostic tool - I use FireBug in FireFox. There are many places that styles can be added and they don't always work in the way that you expect.

The correct format for the ChronoForms Form CSS box is

body {background-color:#C6C6C6;}

and, on my test site at least, this does change the color of the page background.

AS Fritz has said, you can change the style of the HTML form divs to table, add different class or id names and add custom CSS either to your form or your template.

Bob

Gr

GreyHead 06 Nov, 2010

Hi laustin,

Just a mini-comment. You are right that a .body {. . .} statement won't work -- a body {. . .} statement (no dot) will work fine though.

Bob

ma

mariovfx 07 Mar, 2012

Fields Text color is too light, how to change?
Where can I I change the color of the text that goes inside the fields?

I tried the CSS over ride, but that does not work. What code to change in the backend CSS file anyone?

Gr

GreyHead 07 Mar, 2012

Hi mariovfx,

ChronoForms doesn't set the text color as far as I know so it's probably being set by your template. You can usually over-ride the template settings from the Load CSS action provided that you use a specific selector, sometimes the !important attribute is needed as well.

Bob