Different Background Images on each form

Cl

Clueless 10 Oct, 2008

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):

<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!

Max_admin 10 Oct, 2008

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

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

Gr

GreyHead 10 Oct, 2008

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

sy

sysdoc01 20 Oct, 2009

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

Gr

GreyHead 21 Oct, 2009

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

<?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.

to

tomcat8118 09 May, 2011

i am attempting to do something similar to this without much luck. i am using the following code

<?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

Gr

GreyHead 09 May, 2011

Hi Tom,

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

to

tomcat8118 10 May, 2011

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?

Gr

GreyHead 10 May, 2011

Hi Tom,

Try

#rt-main-surround {
  background: none !important;
}

Bob

to

tomcat8118 10 May, 2011

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

Gr

GreyHead 11 May, 2011

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

to

tomcat8118 11 May, 2011

pm sent. thanks.

Gr

GreyHead 12 May, 2011

Hi Tom,

Fixed I hope - made the CSS changes from my earlier post.

Bob