Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need assistance getting css and form to display properly in Wordpress

Posted on 2014-02-21
4
Medium Priority
?
574 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 2000 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

721 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