MachForm Community Forums » MachForm 2

1. skyblue
   Member

   Hi,
   I would like to know if its possible to split up certain sections and style them differently?
   I've attached an image of what I'd like to achieve. I know I can achieve this through CSS but since I don't have access to the php or HTML file, I'm not sure how to target these areas differently?

   http://erindavidson.ca/images/screenshot.png

   Posted 13 years ago #
2. 

   yuniar

   I'm afraid it won't be possible to have it exactly like that. However, you can set the background color of each fields and then set a padding for each section break field.

   I think it would be pretty close.

   ---

   MachForm Founder

   Posted 13 years ago #

3. skyblue
   Member

   Thanks Yuniar!
   I found out how to make it look similar. There is an issue with padding, (i think?) with the section divider border. There is no space to the right of the section divider which is what I want, However on the left side of the white section divider there is a small space. How do I get rid of it?

   http://www.erindavidson.ca/newhgym/weightlossclinic.html

   Form: click here

   ALSO:

   Error message padding:

   When clicking submit button for the error messages, There is more space to the right of the big red bars than is on the left. How do I make it even, or is there way to make the red bar span the entire width of the container so there isn't padding to the left and right of it?

   E-mail error block padding:
   How do I remove the extra blank space that shows up to the right of the e-mail input when an error message occurs?

   Almost, done, I'm loving this software!!

   Posted 13 years ago #
4. 

   yuniar

   Try changing this:

   #main_body form li.section_break
   {
   	border-top:5px solid #FFFFFF;
   	margin-top:9px;
           margin-left:0px;
   	padding-bottom:0;
   	padding-left:9px;
   	padding-top:13px;
   	width:98% !important;
   }

   to become:

   #main_body form li.section_break
   {
   	border-top:5px solid #FFFFFF;
   	margin-top:9px;
           margin-left:-7px;
   	padding-bottom:0;
   	padding-left:9px;
   	padding-top:13px;
   	width:99% !important;
   }

   Error message padding:
   I'm not quite sure about this. It seems fine from here? the space seems even. can you send me a screenshot please?

   Email error padding:
   Try changing this:

   #li_2{
     float: left;
      width: 45%;
   
    }

   to become:

   #li_2{
     float: left;
      width: 50%;
   
    }

   ---

   MachForm Founder

   Posted 13 years ago #

5. skyblue
   Member

   I'll show you the error message: the red doesn't span completely to the right of the form in the e-mail field. like it does on all the other inputs. Also, there is still a small space to the left of the divider after I used your code suggestion.

   http://smg.photobucket.com/albums/v12/totheleftside/

   Posted 13 years ago #

6. skyblue
   Member

   Actually, this is the image: http://img.photobucket.com/albums/v12/totheleftside/Screenshot2010-12-10at120941PM.png

   Posted 13 years ago #
7. 

   yuniar

   Try to delete your browser cache. It seems your browser still loading the old CSS file from the cache.

   I tried your form and it looks good now.

   ---

   MachForm Founder

   Posted 13 years ago #

8. skyblue
   Member

   Yeah you're right! It must have been the cache. One more detail, there is still more padding on the right side of the form (when all error messages are on) then on the left. How can I make the padding even for the areas to the right and left of the red error blocks?

   Posted 13 years ago #
9. 

   yuniar

   Try to edit this code:

   #main_body  form ul
   {
   	font-size:100%;
   	list-style-type:none;
   	margin:0;
   	padding:0;
   	width:100%;
   }

   put a little padding on the left, like this:

   #main_body  form ul
   {
   	font-size:100%;
   	list-style-type:none;
   	margin:0;
   	padding:0;
   	width:100%;
           padding-left: 1px;
   }

   you can add more as needed.

   ---

   MachForm Founder

   Posted 13 years ago #

RSS feed for this topic

Reply

You must log in to post.