Solved

Need assistance getting css and form to display properly in Wordpress

Posted on 2014-02-21
4
568 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 29

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 29

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Validating Date 4 28
Navigation Menu Does Not Show on iPad 4 30
Table style position to the left 8 24
aria difference 2 13
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
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…

740 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