I’m not really a CSS expert, but you can style the individual elements. The whole plugin is wrapped in a div with an ID (WPOI). Just be more specific.
For the form for instance you then can use
#WPOI FORM {margin:10px}
or the button
#WPOI INPUT[TYPE=SUBMIT] {border:none; background-image:url(images/button.jpg)}
etc.
Hope this helps.
Plugin Author
petter
(@petter)
plinth: I tried to improve the CSS-issue for first-time users by changing the default options for form header. This should be included in version 1.4.
begetolo: Thanks for helping!
Thread Starter
plinth
(@plinth)
@begetolo – good idea, but INPUT[TYPE=SUBMIT] is a css3 pseudo class, so it wouldn’t work for everyone.
@petter – thanks for taking this onboard!
Thread Starter
plinth
(@plinth)
Still not ideal. I’ve done the following to get it to look how I want. Hacking the core plugin is not something I like doing, but in the absence of usable css classes I’ve had to:
function wpoi_show_form()
{
echo '<form class="form" action="" method="post">' . "\n";
echo '' . wpoi_get_option('wpoi_form_email');
echo ' <input type="text" onfocus="this.value = (this.value==\'Sign up for our emailers...\')? \'\' : this.value;" value="Sign up for our emailers..." class="formentry" name="wpoi_email" id="wpoi_email" />' . "\n";
echo '<input type="image" class="submit" src="/wp-content/themes/x/images/submit.png" value="' . wpoi_get_option('wpoi_form_send');
echo '" />' . "\n</form>\n";
}
Doesn’t look bad.
If you do need classes, why not use jQuery to add them? This doesn’t need ‘messing’ with the core code, so een upgrade would still be possible.
addClass
Thread Starter
plinth
(@plinth)
@begetolo: Why should I be forced to add more jquery script to my site when I shouldn’t have to? Adding css classes is a pretty basic part of forming a good plugin.
@petter: Couple of things, firstly I still think this is a good, lightweight plugin that just needs a few small tweaks to make it great.
The changes you’ve made to the latest version, specifically “Modified default options for form header for better CSS” are not enough to make it suitably usable with css. I tried adding a class to the error messages so that they would display like this:
<p class="msg">Bad e-mail address.</p>
But when I did that it ‘broke’ the admin panel. Here’s a screengrab to what I see now: http://awesomescreenshot.com/008hwqqe0
Surely it wouldn’t be a big job to change your core code to have these display with a paragraph class by default? Also, I often need to style the input fields differently, and if you haven’t added a class then I can’t separate them.
Plugin Author
petter
(@petter)
plinth: Thanks for sticking around and all the patience! I would appreciate your help. Do you think something like this would be better?
<div class="widget" id="wpoi_div">Receive information here
<form action="" method="post" id="wpoi_form">
<label for="wpoi_email">E-mail:</label>
<input type="text" class="wpoi_input" id="wpoi_email" />
<br />
<input type="submit" value="Submit" id="wpoi_submit" />
</form>
<p id="wpoi_msg"><b>Failed sending to e-mail address.</b></p>
</div>
Thread Starter
plinth
(@plinth)
@petter: yes that’s much better, although I would advise dropping the <br /> from the middle, as the layout here is better controlled via css than hardcoded into the background.
Unfortunately this plugin allows multiple entries of the same email address.
