WordPress.org

1. ioannicut
   Member
   Posted 2 years ago #

   Hi Guys,

   Thank you for your attention.

   I have some cool button codes that I want to paste in WP to make my squeeze page work better. If you are interested how it looks just check http://inspiredachievement.ro

   if I paste the code below into the WP page it does not look like in plain HTML.

   <table border="0" cellspacing="4" cellpadding="10">
   <tbody>
   <tr>
   <td colspan="2"></td>
   </tr>
   <tr>
   <td style="text-align: center;">I enter my <strong>Name</strong> Now:</td>
   </tr>
   <tr>
   <td style="text-align: center;"><input name="name" size="20" type="text" /></td>
   </tr>
   <tr>
   <td style="text-align: center;">I enter my <strong>Primary Email</strong> now:</td>
   </tr>
   <tr>
   <td style="text-align: center;"><input name="from" size="20" type="text" /></td>
   </tr>
   <tr>
   <td colspan="2"></td>
   </tr>
   <tr>
   <td>
   <div>
   <table border="0" cellspacing="10" cellpadding="20" width="100%">
   <tbody>
   <tr style="text-align: center;">
   <td style="background:red" onmousedown="this.style.backgroundColor='#FF0000'" onmouseover="this.style.backgroundColor='#009900'" onmouseout="this.style.backgroundColor='#FF0000'"><input style="color: #000000; cursor: pointer; font-family: Verdana,Arial,Helvetica,sans-serif; letter-spacing: -1px; font-size: 19px; font-weight: bold; width: 360px; height: 40px;" name="submit" type="submit" value="Give Me My FREE KIT Right Now »" /></td>
   </tr>
   </tbody></table>
   </div>
   <span style="font-family: Arial; color: #000000; font-size: x-small;"> </span></td>
   </tr>
   </tbody></table>

   Please, can someone help me?

   Thank you in advance,

   Ioan

2. S.K
   Member
   Posted 2 years ago #

   Did you use the HTML editor (not the visual one)?

   S.K

3. Mark / t31os
   Moderator
   Posted 2 years ago #

   Why use a table for creating what is essentially 3 or 4 blocks...

   You could just as easily use 3 DIV elements one after the other...

   You'd have a 150%+ reduction in the amount of code required.

   Put simply, use tables only for tabular data, ie. when you have several columns and rows of data...

   For anything else, paragraphs and divs will be sufficient...

   I can give you an example if you like..

4. ioannicut
   Member
   Posted 2 years ago #

   kichu, yes Sir... I have used the html editor along with the visual editor on how it looks...

   In the visual editor it looks right but when I want to watch it in reality I cannot see the red color around the button... like it is overridden by css...

   t31os_ Brother, Sir, I do not get what you mean... :)

5. Mark / t31os
   Moderator
   Posted 2 years ago #

   I was simply suggesting switching your markup to something lighter..

   HTML:
   

   <div class="myform">
   	<p>I enter my <strong>Name</strong> Now:</p>
   	<input name="name" size="20" type="text" /><br />
   	<p>I enter my <strong>Primary Email</strong> now:</p>
   	<input name="from" size="20" type="text" /><br />
   	<p class="submission">
   		<input name="submit" type="submit" value="Give Me My FREE KIT Right Now »" />
   	</p>
   </div>

   CSS:
   

   .myform {
   	text-align:center;
   }
   .myform p {
   	padding:5px 0;
   	margin:0 auto;
   }
   .myform p strong {
   	color:red;
   }
   .submission {
   	padding:0;
   	margin:0;
   }
   .submission input {
   	color: #000000;
   	cursor: pointer;
   	font-family: Verdana, Arial, Helvetica, sans-serif;
   	letter-spacing: -1px;
   	font-size: 19px;
   	font-weight: bold;
   	width: 360px;
   	height: 40px;
   }

   Adjust and add any additional styling you want..

6. S.K
   Member
   Posted 2 years ago #

   Yep.

   Using tables for design is passe!
   You can work on what t31os_ has offered.

   S.K

7. ioannicut
   Member
   Posted 2 years ago #

   t31os_ thank you with all my heart!

   I tried hard, but I was not able to make it...

   I do not know how to style the button to look as the initial one...

   BTW, to me you are a code Ninja! and a generous person!

   Thanks again,

   i

8. Mark / t31os
   Moderator
   Posted 2 years ago #

   It's only a basic example, it's all yours to do with as you choose... ;)

   Styling inputs isn't usually a good idea because of how the different browsers interact and read them... (not saying it isn't possible)

   It's usually better to let the browser style them, but if you must style them, then take a look at how wordpress does it in various areas such as the admin sections, just take a look at the associated CSS file.... it's tried and tested...

   Admin CSS files are located in:
   wp-admin\css

Topic Closed

This topic has been closed to new replies.