Solved

Need assistance getting css and form to display properly in Wordpress

Posted on 2014-02-21
4
562 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now