Solved

Need assistance getting css and form to display properly in Wordpress

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. 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 : Go t…

760 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

20 Experts available now in Live!

Get 1:1 Help Now