The Plugin.

This is Codebanters Aweber/Getresponse Subscription form Plugin available from http://www.codebanter.com/projects/. It might be something you find useful, but of course there are other ways to implement a subscription form. It seems though that it doesn’t quite like my site.

Now I’m not out to rubbish this plug-in.  The fact that it’s broken on my site is probably due to my “not having” or” having” done something.  So we are just looking at it from an instructional point of view. I’m fixing it so I might as well write about it too!

Don’t go busting out of my page.

As you may have noticed, the little newsletter subscription box up at the top right is “breaking out” off the page. For a Website on Advanced Worpress Tutorials, this doesn’t look good.
So let’s take a look and see what the problem is.

What’s the problem?

In a nutshell…. this is…. (I’m just firing up “The GIMP” to take a screen shot.)

CodeBanter Breaking out of the page

Now that text, should  be contained within the light gray area, but as you can see, the description text is stepping out of bounds. Anyway, let’s see what we can do to fix this.

The best place to start when “investigating” these situations is to work backwards. So let’s see what the generated code is. You can do that by right clicking on the page and selecting the “View Source” option then pick on some keyword to help locate it.

This is what we get…

<div id="sidebarRight" class="sidebar"><!-- OPTIN Plugin By CodeBanter.com -->
<!--sidebox start -->
<div id="getresponse_form" class="dbx-box widget_recent_entries">
<h3 class="dbx-handle">Keep in Touch!</h3>
<div class="dbx-content">
<div>
<table>
<tbody>
<tr>
<td><form id="GRSubscribeForm" action="http://www.getresponse.com/cgi-bin/add.cgi" accept-charset="UTF-8" method="post"> <input name="category1" type="hidden" value="advancedwordpresstutorials" /> <input name="confirmation" type="hidden" /> <input name="error_page" type="hidden" /> <input name="ref" type="hidden" /> <input name="getpostdata" type="hidden" value="post" />
<table>
<tbody>
<tr>
<td colspan="2">
<p style="text-align: center;"><strong><span style="color: #993300;">Receive The Free</span></strong>
<strong><span style="color: #3366ff;">AdvancedWordPressTutorials Newsletter</span>
<span style="color: #993300;">and keep up to date on any new Tips and Tricks to enhance your WordPress websites.</span></strong></p>
</td>
</tr>
<tr>
<td align="left"><input id="nameField" name="category2" type="text" value="Name" /></td>
</tr>
<tr>
<td align="left"><input id="emailField" name="category3" type="text" value="Email" /></td>
</tr>
<tr>
<td colspan="2" align="left"><input name="submit" type="submit" value="Add me!" /></td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--sidebox end -->

It is quite busy for a simple form with lots of tables etc. While I could whinge about it not being a CSS layout, the short story is “Well it works…”

Ok, what can we see?

No dead people around, so it’s not any of those… but there are three css class instances being used.

<div id="getresponse_form" class="dbx-box widget_recent_entries">
<h3 class="dbx-handle">Keep in Touch!</h3>
<div class="dbx-content">

So we have, dbx-box widget_recent_entries, dbx-handle and dbx-content.

Now, I wonder if they are defined anywhere? One rule of thumb is to wrap any thing that’s going to appear as a widget in the themes default settings.  I know this firsthand from just having written my first plug-in ( to be documented later..). But this is also intended to be placed on a page/post so these styles have been included to allow you to change it’s appearance. Which is great if you know CSS!

So hunting through the files it appears that we have to define these styles ourselves. Which means adding some CSS to our themes CSS file.
That isn’t a bad thing, it’s just a bit of extra work we have to do and in fairness, most AR forms require some tweaking.

So let’s tweak!

After having a deep look at this I found two things..

1. The long word of “AdvancedWordPressTutorials” exceeded the allowed width causing the breakout. So that just required the breaking up of the word by putting in spaces.
2. The default style of the heading is dull and boring, so I defined an entry for .dbx-handle by adding it to the bottom of my theme’s style.css file. (described below)

.dbx-handle {
color:red;
text-align:center;
font-weight:bold;
}

Summary

Hopefully this has shed a little light on how to find out why things break and how to fix them. This is not very detailed, mainly due to my solving and writing at the same time ( well now it’s documented ).