Solved

Need assistance getting css and form to display properly in Wordpress

Posted on 2014-02-21
4
565 Views
Last Modified: 2014-02-21
I am helping a friend with a Wordpress project. He is using the tempest theme, which has an advertising block for code. We were having difficulty getting a marketing form integrated, so asked someone to create a CSS and code for the form. It didn't work completely, but I was able to fix it by commenting out one area.

Currently, the form displays and works correctly from a local html page, using the exact paths as used in Wordpress. However, Wordpress must be interpreting the code differently than my local browser and for some reason is not displaying all the graphics and honoring the CSS attributes.

Here is what we have:

Form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gina La Morte</title>
<link rel="stylesheet" href="http://ginalamorte.raymondnorton.com/wp-content/themes/tempest/signupbar.css" type="text/css" media="all" />
</head>
<body>

<form accept-charset="UTF-8" action="https://ex168.infusionsoft.com/app/form/process/6d64954beaead7c599b222d9e8391408" class="infusion-form" method="post" id="optin_area">
    <input name="inf_form_xid" type="hidden" value="6d64954beaead7c599b222d9e8391408" />
    <input name="inf_form_name" type="hidden" value="webform" />
    <input name="infusionsoft_version" type="hidden" value="1.29.10.21" />
     
    <img src="http://ginalamorte.raymondnorton.com/wp-content/uploads/2014/02/tag-line.png" width="416" height="30" alt="Get free tips." id="imgTagline" />
    
    <div class="infusion-field" id="field_FirstName">
		
		<input name="inf_field_FirstName" id="inf_field_FirstName"
		value="First Name"
		size="20" 
		onblur="if (this.value == '') {this.value = 'First Name';}" 
		onfocus="if (this.value == 'First Name') {this.value = '';}" 
		type="text" />
       
    </div>
    
    <div class="infusion-field" id="field_Email">   

        <input name="inf_field_Email" id="inf_field_Email"
        value="E-Mail" 
        size="20" 
        onblur="if (this.value == '') {this.value = 'E-Mail';}" 
        onfocus="if (this.value == 'E-Mail') {this.value = '';}" 
        type="text" />
  
    </div>
    
    <div class="infusion-submit">
        <input class="submitbutton" type="submit" value="Submit" />
    </div>
</form>

</body>
</html>

Open in new window




--------------------------------------------------------------------------------------------------------------------------------
CSS


#optin_area { background: #6d6e71 url(http://ginalamorte.raymondnorton.com/wp-content/uploads/2014/02/optin_area.png) repeat-x top; padding: 20px 0 11px; _height: 1% }
	#optin_area:after { clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden }
	#optin_area .page { margin: 0 auto; position: relative; width: 847px }
	#optin_area h3 {
		background: url(http://ginalamorte.raymondnorton.com/wp-content/uploads/2014/02/tag-line.png);
		float: left;
		height: 30px;
		margin: 10px 10px 0 0; 
		text-indent: -9999px;
		width: 416px
	}

/* #imgTagline {
	position: absolute; z-index:10;
	top: 40px; left: 20px;
	}
*/

#field_FirstName {
	position: absolute; z-index:20;
	top: 40px; left: 410px;
	}

#field_Email {
	position: absolute; z-index:20;
	top: 40px; left: 560px;
	}

.submitbutton {
	background: transparent url(http://ginalamorte.raymondnorton.com/wp-content/uploads/2014/02/sign-up2.png) center 0px no-repeat;
	border: 0px solid #FFFFFF;
	display: block;
	text-indent: -9999px;
	height: 73px; width: 74px;
	padding: 0;
	position: absolute; z-index:30;
	top: 20px; left: 725px;
	}
		
.submitbutton:hover { background-position: 0px -73px; }

Open in new window

Local.jpg
Web.jpg
0
Comment
Question by:tamray_tech
  • 2
  • 2
4 Comments
 
LVL 28

Expert Comment

by:chilternPC
ID: 39878446
the theme is a 'responsive' design so depending on the size of the browser window it will choose a different style definitions.
the style sheet is overriding your additions.

maybe when you try it locally you don't all the wordpress style sheets so the additions do not get over written.

Using the Chrome browser and right clicking on the submit button and select "view element" you can see you new addition in a file called signupbarr.css line 29, but this gets supercedded by the definition for the submit button in the style.css file ( I think line 1867 but as I said it is a responsive design so you will need to think about this.
0
 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
ID: 39878449
if that's the only time you use a submit button then edit the style css directly. and either remove the definitions that you have put into a file or comment them out.
oh - I mean "inspect element" when you right click.
0
 

Author Comment

by:tamray_tech
ID: 39878482
OK... got that.. Thank you!

Now I need to vertically center the email fields  and extend the bar the width of the site. Any ideas?
0
 

Author Closing Comment

by:tamray_tech
ID: 39878518
Everything works correctly after disabling the overriding css class
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question