MachForm Community Forums » MachForm 2

1. Tommi
   Member

   Hello-

   First - thank you so much for this awesome software! I love Mach Forms!!!

   I have a two questions which I think may be resolved via CSS editing... If you have any suggestions, I would be most appreciative!!

   Question #1:

   I'm attempting to put a background image on my form using CSS, and I followed the instructions listed here:

   http://www.appnitro.com/forums/topic/would-like-to-add-background-image-to-entire-form?replies=2

   but I'm having a display issue where the background image is appearing twice.

   Here's the formatting that I hope to achieve with my form:

   http://www.officefruitguard.com/images/form_design.gif

   And here's the background image I'm attempting to use:

   http://www.officefruitguard.com/images/background_form.gif

   When I view the form by itself, the background image is there, but overlapping:

   http://officefruitguard.com/machform/view.php?id=1

   But when the form is embedded (as an iframe) within a table cell, I see the form displayed twice:

   http://www.officefruitguard.com/form_test_2.html

   I've verified that the background image is 234 x 215 pixels, and that is the same dimensions of the table cell region...

   Is there a setting somewhere in the CSS that is attempting to add padding to the background image, which makes the image too large to display? Should I make my background image smaller than the actual dimensions of the form? Or should I remove the padding?

   Question #2:

   I'm curious if you have any suggestions for editing the CSS so that I can move the entire contents of the form to allow the background image content to fit below the Register button. I think I'm trying to move these elements:

   .form_description p
   li_1
   li_buttons

   I tried putting position:relative; top:20px; in various places, but so far I've been unsuccessful.

   Thanks so much!!

   Tommi

   Posted 15 years ago #
2. 

   redityo

   Hi Tommi,

   For your questions :

   1. For repeated "background-images" your need to define "no-repeat" in background properties, it should be like this :

   background:transparent url(http://officefruitguard.com/images/background_form.gif)
   no-repeat scroll center top;

   anyway I try simulate in my form, try to search and change these section ( I only mention the section name :) ) :

   #form_container
   
   #top
   
   #bottom
   
   form.appnitro
   
   #main_body h1
   
   #main_body h1 a
   
   #main_body .buttons

   with this one

   #form_container
   {
   	background-color:#FC9813 !important;/* change */
   	border:1px solid #ccc;
   	margin:0 auto;
   	text-align:left;
   	width:234px; /* change */
           background:url(http://officefruitguard.com/images/background_form.gif) no-repeat bottom center; /* change */
           height: 250px; /* change */
   }
   
   #top
   {
   	display:none;/* change */
   	height:10px;
   	margin:10px auto 0;
   	width:650px;
   }
   
   #bottom
   {
   	display:none; /* change */
   	height:10px;
   	margin:0 auto;
   	width:650px;
   }
   
   form.appnitro
   {
   	margin:15px 15px 0; /*change */
   	padding:0 0 20px;
   }
   
   /**** Logo Section  *****/
   #main_body h1
   {
   	background-color:#dedede;
   	margin:0;
   	min-height:0;
   	padding:0;
   	text-decoration:none;
   	text-indent:-8000px;
   	background-image: url('../../../images/machform.gif');
   	background-repeat: no-repeat;
          display:none;  /* change */
   }
   
   #main_body h1 a
   {
   
   	display:none;  /* change */
   	height:100%;
   	min-height:0px;  /* change */
   	overflow:hidden;
   }
   
   #main_body .buttons
   {
   	clear:both;
   	display:block;
   	margin-top:0px; /* change */
           text-align:center; /* change */
   }
   
   /**** Inputs and Labels ****/
   #main_body label.description
   {
   	border:none;
   	color:#222;
   	display:block;
   	font-size:95%;
   	font-weight:700;
   	line-height:150%;
   	padding:0 0 1px;
          width: 30%; /*change */
          float: left; /* change */
   
   }

   2. I think it should be solved in first answer

   ---

   MachForm Support

   Posted 15 years ago #

3. Tommi
   Member

   Wow! Thank you so much for your speedy reply!!

   I think I'm all set now!!

   Much appreciated!!!

   Posted 15 years ago #

RSS feed for this topic

Reply

You must log in to post.