I am fairly new to Joomla and just learning Chronoforms, so I apologize if this question seems silly. I have a total of four forms on my site and I would like to use separate background images for each form. I've tried to add code directly to the form html using different methods including:
Option 1 (added to form HTML code):
Option 2 (also added to the form HTML code):
So, how do I show unique background images on individual forms?
Help!
Option 1 (added to form HTML code):
<body background="/images/image_name.gif">
Option 2 (also added to the form HTML code):
<style type='text/css'>
div.myform {background-image url="myurl"; . . . more css . . .}
</style>
<div class='myform'>
. . . more html code . . .
</div>
In either case, the image code appears to be completely ignored and does not display.So, how do I show unique background images on individual forms?
Help!
Hi, your first code sure will not work, the 2nd one should logically work but I'm not good at CSS though, this depends on your page/template HTML structure, get Firefox 3 with Firebug extension and inspect the form code to see why the CSS image is not working, you can play with css classes for page elements very easily too to know which one works!
Cheers
Max
Cheers
Max
Hi Clueless,
As Max said, the first code won't work as you'd end up with two body tags. The second tag has dome bad syntax. Try this
Bob
As Max said, the first code won't work as you'd end up with two body tags. The second tag has dome bad syntax. Try this
<style type='text/css'>
div.myform {
background-image: url(myurl);
/*. . . more css . . .*/
}
</style>
Bob
Hi Clueless,
As Max said, the first code won't work as you'd end up with two body tags. The second tag has dome bad syntax. Try this
<style type='text/css'>
div.myform {
background-image: url(myurl);
/*. . . more css . . .*/
}
</style>
Bob
OK this is what I'm trying to do however adding this code to the Form Code>CSS Styles yet the instructions are to not use any <styles> tags when adding CSS code. So exactly how is this accomplished?I have tried with and without the style tags.
<style type='text/css'>
div.myform {
background-image: url(../templates/rt_refraction_j15/images/backgrounds/bgstyle2/bgimage.jpg);
/*. . . more css . . .*/
}
</style>
In addition I have the form loading in a lightbox where the CSS is supplied by the rokbox plugin.
The form is being tested here:http://pamchapdelaine.com/joomla/index.php?option=com_content&view=article&id=120&Itemid=97 the form is loading from the "YES! I want to lose weight NOW!" link.
Any help would be great!
thx
Hi sysdoc01,
To use the CSS box leave out the <style> tags - ChronoForms will add them and make the image URL absolute. The relative ../ syntax can't be relied on as you don't know what the path will be when the form is displayed.
Bob
PS personally I don't use the CSS bos but load the script from the Form HTML
To use the CSS box leave out the <style> tags - ChronoForms will add them and make the image URL absolute. The relative ../ syntax can't be relied on as you don't know what the path will be when the form is displayed.
Bob
PS personally I don't use the CSS bos but load the script from the Form HTML
<?php
$style="
// some css without <style> tags
";
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($style);
?>
This will load the css into the page header rather than inserting it into the middle of the body.
i am attempting to do something similar to this without much luck. i am using the following code
my form url is http://www.contractor-licensing.com/index2.php?option=com_chronoforms&chronoform=IDCheckMovie
my image url is http://www.contractor-licensing.com/web/idcheck/background.jpg
i am attempting to add this at actions and i added custom code On Load. However, the image will not appear.
Any thoughts?
Tom
<?php
$style="
div.myform {
background-image: url(http://www.contractor-licensing.com/web/idcheck/background.jpg);
}
";
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($style);
?>
my form url is http://www.contractor-licensing.com/index2.php?option=com_chronoforms&chronoform=IDCheckMovie
my image url is http://www.contractor-licensing.com/web/idcheck/background.jpg
i am attempting to add this at actions and i added custom code On Load. However, the image will not appear.
Any thoughts?
Tom
Hi Tom,
The page doesn't seem to have a div with the class 'myform'. Please try this in a load CSS action
Bob
The page doesn't seem to have a div with the class 'myform'. Please try this in a load CSS action
form.Chronoform {
background: url("http://www.contractor-licensing.com/web/idcheck/background.jpg") no-repeat scroll 0 0 transparent;
padding: 80px 40px;
}
Bob
great support! works perfect. I have sent a beer over.
i do not know if i should start a new topic or not so i apologize in advance.
http://www.contractor-licensing.com/component/option,com_chronoforms/chronoform,IDCheckMovie/lang,en?&tmpl=idcheck
on this page, there is a gray background that surrounds the main image. I have tried without luck to change this without luck. any thoughts?
i do not know if i should start a new topic or not so i apologize in advance.
http://www.contractor-licensing.com/component/option,com_chronoforms/chronoform,IDCheckMovie/lang,en?&tmpl=idcheck
on this page, there is a gray background that surrounds the main image. I have tried without luck to change this without luck. any thoughts?
almost done. still having one more issue.
i am using chrono forms 4.0 RC1.8. The form appears correctly and functions correctly in most web browsers EXECPT IE7 OR IE9 compatibility. Unfortunately, this is critical. Please review the following link.
http://www.contractor-licensing.com/component/option,com_chronoforms/chronoform,IDCheckMovie/lang,en
There are two issues that are present in the browsers i mentioned.
1) The background image does not appear (it looks as though it is under the form)
2) The check box option does not appear when the label position is published to "Right". It does appear when published to "Left", but this will not work for me.
Regards and Thanks,
Tom
i am using chrono forms 4.0 RC1.8. The form appears correctly and functions correctly in most web browsers EXECPT IE7 OR IE9 compatibility. Unfortunately, this is critical. Please review the following link.
http://www.contractor-licensing.com/component/option,com_chronoforms/chronoform,IDCheckMovie/lang,en
There are two issues that are present in the browsers i mentioned.
1) The background image does not appear (it looks as though it is under the form)
2) The check box option does not appear when the label position is published to "Right". It does appear when published to "Left", but this will not work for me.
Regards and Thanks,
Tom
Hi Tom,
It looks as though you need to ad the CSS to set the background-color:white for the form and turn off the floats for the check-box and label.
By all means email or PM me the site URL and a SuperAdmin login and I'll take a quick look.
Bob
It looks as though you need to ad the CSS to set the background-color:white for the form and turn off the floats for the check-box and label.
By all means email or PM me the site URL and a SuperAdmin login and I'll take a quick look.
Bob
pm sent. thanks.
This topic is locked and no more replies can be posted.