Custom CSS

The FAQ has this:

Where do I put my CSS classes?

In the Site Administrator go to Site > Template Manager > Site Templates > then choose your default template, click Edit CSS and you can add your form CSS classes definitions here.

You can also add css to the form html as an in-line style or an embedded style-sheet but if you want to re-use it on several forms then the above method is better.

But I'm looking for something a little better - is it possible? If I create custom CSS styles to use on my forms and put them in my template CSS file, I risk loosing them if I install a new release of the template using the Joomla 1.5 automated upgrade/installation way using extension manager.

So I'm looking for a way that I can use my own custom CSS style in the forms and not risk loosing them if I do an upgrade of Chronoforms or my template.

Hi georgealto,

You can put your own css files whereever is convenient and link to them from your form html.

The current release of ChronoForms has it's own css files that you could modify.

If you need a 'safe' location then create a new folder in the {site}/media folder - {site}/media/mymedia/css this won't be overwritten by normal Joomla upgrades.

Bob

Bob - thanks. It makes sense.

But how do I tell chronoforms about this file so it loads it automatically?

Hi georgealto,

Add this into your formhtml

<?php
$doc =& JFactory::getDocument();
$doc->addStylesheet('url path to css file');
?>

Bob

Later: corrected addStylesheet (see later posts)

Bob - I tried it and it didn't work.

I put in the HTML of the form code (Form Management->Form Code->Form HTML) as the first few lines. I then the page and it doesn't show. There are a bunch of javascript errors:
[attachment=0]formproblems.jpg[/attachment]

I've tried both $doc->addStyle and $doc->addStyleSheet and got the same error. If I comment out just that line the form works (without the stylesheet of course). And if I have it commented out and put in print statements, I do see the print statements.

So there must be conflicts based on where chronoforms is adding the stylesheet in the final code it produces. I also tried to put it into Extra Form Code (Form Management->Extra Form Code->Extra Code 1) and nothing happens (it's not read in).

You have any other suggestions? This looks like it has to do with how chronoforms creates the final code to display the form.

Actually I got it to work now. I put the following in the beginning of the HTML of the form code (Form Management->Form Code->Form HTML)

<?php
$doc =& JFactory::getDocument();
$doc->addStylesheet('media/custom/css/forms.css');
?>

So the main issue was I had to use $doc->addStylesheet versus $doc->addStyle.

Hi georgealto,

Well done.

Apologies for my sloppy coding - I think I was thinking of addSCript.

I'll go back and correct my earlier post for future readers.

Bob

A couple of quick questions - What would this code be for Joomla 1.X version to pull in a custom style sheet- and I noted you mentioned that ChronoForms has it's own css file, but I'm not able to locate it. I want to add styling to the error codes on the validation. Where is that hiding. :wink:

Thanks in advance.
Ruth

Hi Ruth,

From memory I don't think that Joomla 1.0.x had an equivalent for this . . . at least there's nothing on my migration crib-sheet.

And the ChronoForms css was added with the wizard in ChronoForms v3.0 . . . sorry :-(

Maybe time to upgrade to Joomla 1.5.9

Bob

I added the code for attaching my custom CSS (feedback.css) as described, and it loads. However, it looks thatthe standard CSS loads too, and overrides custom styles. As the result, no change in output page.

The fragments of the resulting page's source code are:

<link rel="stylesheet" href="/media/custom_css/chronocontact/feedback.css" type="text/css" />

...

<!--[if gte IE 6]><link href="http://mywebsite.com/components/com_chronocontact/css/style1-ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if gte IE 7]><link href="http://mywebsite.com/components/com_chronocontact/css/style1-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if !IE]> <--><link href="http://mywebsite.com/components/com_chronocontact/css/style1.css" rel="stylesheet"


Please comment

Hi VMZ,

YOu can turn off all the ChronoForms CSS & JS in the form General tab (it's all or nothing though). Or you can jst edit the ChronoForms files to remove the css and leave empty files in place to avoid error messages. Or you cna edit the ChronoForms files to remove the inconsitencies.

Bob

Hi Bob,

Turning off the CSS/JS in General tab results in the following code of the resulting page:

<form name="ChronoContact_feedback" id="ChronoContact_feedback" method="post" action="http://mywebsite.com/index.php?option=com_chronocontact&task=send&chronoformname=feedback" >

<link href="/administrator/components/com_chronocontact/css/cc.css" rel="stylesheet" type="text/css">
<link href="/administrator/components/com_chronocontact/css/style1.css" rel="stylesheet" type="text/css">

this code seem to redefine custom styles again😟

Hacking ChronoContact code does not seem to be a good solution, any other idea?

Regards

Vladimir

Hi Vlad,

those 2 lines :

<link href="/administrator/components/com_chronocontact/css/cc.css" rel="stylesheet" type="text/css">
<link href="/administrator/components/com_chronocontact/css/style1.css" rel="stylesheet" type="text/css">

where do you get them ? they should not appear except in the backend!

Max

Please find the page generated by Joomla / Chronoforms attached.

I checked it, something is wrong, how did you create this form ? using the wizard only ? didn't you try to edit the code in anyway ?

Hi VMZ,

The form code looks pretty normal (IE + wizard) apart from those two css links. Here's a version of the Form HTML with indents.

<link href="/administrator/components/com_chronocontact/css/cc.css" rel="stylesheet" type="text/css">
<link href="/administrator/components/com_chronocontact/css/style1.css" rel="stylesheet" type="text/css">
<DIV class="form_item" >
	<DIV class="form_element cf_textbox">
		<LABEL class="cf_label">Ваш адрес E-mail*</LABEL>
		<INPUT name="text_0" type="text" id="text_0" size="30" maxlength="50" class="cf_inputbox required validate-email">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_textbox">
		<LABEL class="cf_label">Имя, фамилия*</LABEL>
		<INPUT name="text_1" type="text" id="text_1" size="30" maxlength="50" class="cf_inputbox required">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_textbox">
		<LABEL class="cf_label">Организация</LABEL>
		<INPUT name="text_2" type="text" id="text_2" size="50" maxlength="80" class="cf_inputbox">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_textbox">
		<LABEL class="cf_label">Отдел, лаборатория</LABEL>
		<INPUT name="text_3" type="text" id="text_3" size="50" maxlength="80" class="cf_inputbox">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_textbox">
		<LABEL class="cf_label">Телефон  (с кодом города)</LABEL>
		<INPUT name="text_4" type="text" id="text_4" size="20" maxlength="20" class="cf_inputbox">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_dropdown">
		<LABEL class="cf_label">Тема сообщения*</LABEL>
		<SELECT name="select_5" size="1" id="select_5" class="cf_inputbox">
			<OPTION value="Общие вопросы">Общие вопросы</OPTION>
			<OPTION value="Запрос цен">Запрос цен</OPTION>
			<OPTION value="Заказ">Заказ</OPTION>
			<OPTION value="Технические вопросы">Технические вопросы</OPTION>
		</SELECT>
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_textarea">
		<LABEL class="cf_label">Текст сообщения*</LABEL>
		<TEXTAREA name="text_6" cols="60" id="text_6" rows="10" class="cf_inputbox required"></TEXTAREA>
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item" >
	<DIV class="form_element cf_text">
		<SPAN class="cf_text">* обязательные поля</SPAN>
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>
<DIV class="form_item">
	<DIV align="center" class="form_element cf_button">
		<INPUT name="undefined" type="submit" value="Отправить">
	</DIV>
	<DIV class="clear"> </DIV>
</DIV>

Bob

Bob,

That's fine but how to get rid of those two lines?

I did not change the code generated by wizard with the except for your two lines for custom CSS. The resulting code is:

<?php
$doc =& JFactory::getDocument();
$doc->addStylesheet('media/custom_css/chronocontact/feedback.css');
?>
<link href="/administrator/components/com_chronocontact/css/cc.css" rel="stylesheet" type="text/css">
<link href="/administrator/components/com_chronocontact/css/style1.css" rel="stylesheet" type="text/css">
<DIV class="form_item" ><DIV class="form_element cf_textbox"><LABEL class="cf_label">Ваш адрес E-mail*</LABEL><INPUT name="text_0" type="text" id="text_0" size="30" maxlength="50" class="cf_inputbox required validate-email"></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_textbox"><LABEL class="cf_label">Имя, фамилия*</LABEL><INPUT name="text_1" type="text" id="text_1" size="30" maxlength="50" class="cf_inputbox required"></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_textbox"><LABEL class="cf_label">Организация</LABEL><INPUT name="text_2" type="text" id="text_2" size="50" maxlength="80" class="cf_inputbox"></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_textbox"><LABEL class="cf_label">Отдел, лаборатория</LABEL><INPUT name="text_3" type="text" id="text_3" size="50" maxlength="80" class="cf_inputbox"></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_textbox"><LABEL class="cf_label">Телефон  (с кодом города)</LABEL><INPUT name="text_4" type="text" id="text_4" size="20" maxlength="20" class="cf_inputbox"></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_dropdown"><LABEL class="cf_label">Тема сообщения*</LABEL><SELECT name="select_5" size="1" id="select_5" class="cf_inputbox"><OPTION value="Общие вопросы">Общие вопросы</OPTION><OPTION value="Запрос цен">Запрос цен</OPTION><OPTION value="Заказ">Заказ</OPTION><OPTION value="Технические вопросы">Технические вопросы</OPTION></SELECT></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_textarea"><LABEL class="cf_label">Текст сообщения*</LABEL><TEXTAREA name="text_6" cols="60" id="text_6" rows="10" class="cf_inputbox required"></TEXTAREA></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item" ><DIV class="form_element cf_text"><SPAN class="cf_text">* обязательные поля</SPAN></DIV><DIV class="clear"> </DIV></DIV><DIV class="form_item"><DIV align="center" class="form_element cf_button"><INPUT name="undefined" type="submit" value="Отправить"></DIV><DIV class="clear"> </DIV></DIV>

Regards

Vladimir

Holy s*it... I pasted the code and watched the ywo bloody lines there... have no idea how they could get there.

Thanks for excellent support!

Vladimir

It's all right now with the style sheet, but switching off standard style sheets I also switch off Javascript so all verification does not work... is there a way to load Javascript without switching on internal style sheets?

Hi vmz,

I'm not sure, doesn't it load if you set Validation to 'On' in the Validation tab?

Bob

Great! Sometimes the answers are so easy...

Thanks a lot

Vladimir

Please find attached a version of mooValidation.js with Russian messaging, maybe it helps one day

Vlad