Visual Form Builder Pro Update Incompatible with Traction Theme

Resolved jsimmonshospice
(@jsimmonshospice)

13 years, 3 months ago

Hi – I have used Visual Form Builder Pro for a year now, in conjunction with the theme Traction. I’ve built over 60 forms for my site: http://cchnet.net (Compassionate Care Hospice)

Just recently, I updated Visual Form Builder Pro to Version 2.0.1.

All the formatting of my forms is gone – http://cchnet.net/hospice/mid-atlantic/pennsylvania/allentown/volunteer-application-form/

For example:
– page breaks gone (all pages on one long page)
– all input fields are the same size (even though I’ve specified different sizes)
– all input fields are position to the left (even though I’ve specified different positions)
– Fieldset headers are not the right Font, Font Style, Font Size

I took Matthew’s advise and tested plugin conflicts by deactivating all other plugins; they weren’t the problem.

I continued with Matthew’s advise to switch themes; tried Ahimsa. All the forms were back to normal.

The problem is: after a year of using these two products together (Traction and Visual Form Builder Pro), my company bosses will not tolerate my changing the theme of our website.

Is there anyway that these products can be made to be compatible? I’ve asked the same question of The Theme Foundry (https://thethemefoundry.com/) which is the company that created Traction.

I’m under pressure to continue creating forms – I love Visual Form Builder Pro – and don’t want to drop it.

Anything you can do would be greatly appreciated!

Thanks,

Jean

http://wordpress.org/extend/plugins/visual-form-builder/

Viewing 4 replies - 1 through 4 (of 4 total)

tomontoast

(@tomontoast)

13 years, 3 months ago

Hi Jean,

Open up traction_pr_child/style.css

Find the line .visual-form-builder ul li {

Delete from this line to the bottom of the file and then paste in its place the following

form.visual-form-builder{
	font-family:inherit;
	margin:20px 0;
	list-style:none;
}

form.visual-form-builder li{
	width:auto !important;
	list-style:none;
}

.visual-form-builder ul{
	list-style:none;
	margin:0 14px;
	padding:0;
	font-size:12px;
}

	.visual-form-builder ul li{
		list-style: none;
	}

	.visual-form-builder li{
		list-style:none;
		clear:both;
		margin:0;
		padding:6px 1% 9px;
		width:64%;
	}

.visual-form-builder li div span,
span.vfb-full input,
span.vfb-full select{
	display:block;
	float:left;
	width:100%;
}

	.visual-form-builder span.vfb-left{
		float:left;
		width:48%;
	}

	.visual-form-builder span.vfb-right{
		float:right;
		width:48%;
	}

.visual-form-builder span.vfb-right input,
.visual-form-builder span.vfb-right select,
.visual-form-builder span.vfb-left input,
.visual-form-builder span.vfb-left select{
	width:100%;
}

.visual-form-builder span.vfb-time{
	float:left;
	margin:0 0.3em 0 0;
}

.visual-form-builder li div label,
.visual-form-builder li span label{
	font-size:90%;
}

.visual-form-builder fieldset{
	background-color:#eeeeee;
	border-radius:3px;
	border:1px solid #D3D3D3;
	margin:15px 0;
	clear:both;
}

.visual-form-builder .vfb-legend{
	margin:5px 14px;
	padding:0 6px;
	color:#990000;
	border-bottom:1px solid #CCCCCC;
	font-size:inherit;
}

	.visual-form-builder .vfb-legend h3{
		font-size:20px;
		line-height: 2.0em;
		margin:0;
		padding:0;
	}

.visual-form-builder label,
label.vfb-desc{
	display:block;
	margin:0;
	padding-bottom:3px;
	color:#000;
}

	.visual-form-builder.left-label .vfb-desc,
	.visual-form-builder.right-label .vfb-desc{
		float:left;
		margin:0 15px 0 0;
		width:20%;
	}

	.visual-form-builder.right-label .vfb-desc{
		padding-top:2px;
		text-align:right;
	}

label.vfb-desc{
	font-weight:bold;
}

.visual-form-builder label.vfb-choice{
	font-size:100%;
	line-height:150%;
	margin:-17px 0 0 23px;
	padding:0 0 5px;
	width:88%;
}

.visual-form-builder label span{
	color:#BC1212;
	vertical-align:middle;
}

input.vfb-text,
textarea.vfb-textarea,
select.vfb-select{
	font-size:100%;
	font-family:inherit;
	margin:0;
	padding:2px 0;
}

input.vfb-small,
select.vfb-small{
	width:25%;
}

input.vfb-medium,
select.vfb-medium{
	width:50%;
}

input.vfb-large,
select.vfb-large,
textarea.vfb-textarea{
	width:100%;
}

textarea.vfb-medium{
	height:5.5em;
}

textarea.vfb-medium{
	height:10em;
}

textarea.vfb-large{
	height:20em;
}

.vfb-submit{
	color:black;
	font-size:1.1em;
}

input.vfb-checkbox,
input.vfb-radio{
	font-size:1.1em;
	display:block;
	height:13px;
	width:13px;
	margin:4px 0 0;
}
.visual-form-builder li.vfb-two-column div span,
.visual-form-builder li.vfb-three-column div span,
.visual-form-builder li.vfb-auto-column div span{
	margin:0 5px 0 0;
	width:48%;
}

.visual-form-builder li.vfb-three-column div span{
	width:30%;
}

.visual-form-builder li.vfb-auto-column div span{
	width:auto;
}

.visual-form-builder li.vfb-left-half,
.visual-form-builder li.vfb-left-third,
.visual-form-builder li.vfb-left-two-thirds{
	clear:left;
	float:left;
}

.visual-form-builder li.vfb-right-half,
.visual-form-builder li.vfb-right-third,
.visual-form-builder li.vfb-right-two-thirds{
	clear:none;
	float:right;
}

.visual-form-builder li.vfb-middle-third{
	clear:none;
	float:left;
	margin-left:2%;
}

.visual-form-builder li.vfb-left-half,
.visual-form-builder li.vfb-right-half{
	width:47% !important;
}

.visual-form-builder li.vfb-left-third,
.visual-form-builder li.vfb-middle-third,
.visual-form-builder li.vfb-right-third{
	width:30% !important;
}

.visual-form-builder li.vfb-left-two-thirds,
.visual-form-builder li.vfb-right-two-thirds{
	width:64% !important;
}

li.vfb-left-half .vfb-small, li.vfb-left-half .vfb-medium, li.vfb-left-half .vfb-large,
li.vfb-right-half .vfb-small, li.vfb-right-half .vfb-medium, li.vfb-right-half .vfb-large,
li.vfb-left-third .vfb-small, li.vfb-left-third .vfb-medium, li.vfb-left-third .vfb-large,
li.vfb-middle-third .vfb-small, li.vfb-middle-third .vfb-medium, li.vfb-middle-third .vfb-large,
li.vfb-right-third .vfb-small, li.vfb-right-third .vfb-medium, li.vfb-right-third .vfb-large,
.visual-form-builder li.vfb-left-two-thirds .vfb-small, .visual-form-builder li.vfb-left-two-thirds .vfb-medium, .visual-form-builder li.vfb-left-two-thirds .vfb-large,
.visual-form-builder li.vfb-right-two-thirds .vfb-small, .visual-form-builder li.vfb-right-two-thirds .vfb-medium, .visual-form-builder li.vfb-right-two-thirds .vfb-large{
	width:100%;
}

label.error{
	color:red;
	font-weight:bold;
	font-size:90%;
}

input.error,
select.error,
textarea.error{
	border:1px solid red;
}

p#form_success{
	color:green;
	font-weight:bold;
}

#ui-datepicker-div {
	display: none;
	font-size:12px;
}
.ed_button{
	font-family:Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
	font-size:12px;
	background-image: -moz-linear-gradient(top, #fcfcfc 0%, #e9e8e8 100%);
	background-image: -o-linear-gradient(top, #fcfcfc 0%, #e9e8e8 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcfc), color-stop(1, #e9e8e8));
	background-image: linear-gradient(top, #fcfcfc 0%, #e9e8e8 100%);
	min-width:26px;
	margin:3px 1px 4px;
	padding:2px 4px;
	box-shadow:0 1px 0 #e3e3e3;
	border-radius:3px 3px 3px 3px;
	border:#C3C3C3 1px solid;
	text-transform:lowercase;
}
	.ed_button:hover{
		background:none repeat scroll 0 0 #dddddd;
		border-color:#aaaaaa;
		cursor:pointer;
	}
	.ed_button.ed_bold{
		font-weight:bold;
	}
	.ed_button.ed_italic{
		font-style:italic;
	}
	.ed_button.ed_link{
		color:#0000FF;
		text-decoration:underline;
	}
	.ed_button.ed_del{
		text-decoration:line-through;
	}

.item-instructions{
	background-color:#e3e3e3;
	border-radius:3px;
}

.vfb-section-div{
	 background-color:#D4D4D4;
	 border-radius:3px;
	 padding:10px;
	 margin:10px 0;
	 float:left;
	 width:97%;
}
	.vfb-section-div h4{
		font-size:16px;
		border-bottom:1px solid #BABABA;
		margin:0;
	}

.vfb-clear{
	clear:both;
	display:block;
	height:0;
	width:0;
	overflow:hidden;
	visibility:hidden;

Plugin Author

Matthew Muro

(@mmuro)

13 years, 3 months ago

It looks like you applied the filter to not display the built-in VFB CSS file. If you do this, you are on your own when it comes to keeping up with CSS changes to the plugin.

I’d recommend following this tutorial on customizing the CSS. You get the advantages of being able to override whatever rules are being used by VFB, but never having to worry about straight up copying the CSS file into your theme each and every time there’s an update.

Plus, you won’t be modifying the theme’s CSS. Just the CSS applied to VFB. Maybe that’s something your boss will accept.

Thread Starter

jsimmonshospice

(@jsimmonshospice)

13 years, 3 months ago

Tomontoast and Matthew –

Thank you! Thank you! Thank you!

I’m back in business 🙂

Best,

Jean

Pat Gerber

(@macsout)

12 years, 6 months ago

I’m also using your tool on this same exact theme and also having problems with field sizes. I when I tried to follow your directions above I don’t have the line “.visual-form-builder ul li {” in my theme’s “style.css” file.

My site is http://epicenteratedgewood.com and I’m currently working on page http://epicenteratedgewood.com/test-page

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Visual Form Builder Pro Update Incompatible with Traction Theme’ is closed to new replies.

Tags