How to set the Comment Form CSS Style on SI CAPTCHA Anti-Spam

Posted by on Jan 20, 2011 in SI CAPTCHA Anti-Spam

How to set the Comment Form CAPTCHA input CSS Style on SI CAPTCHA Anti-Spam

SI CAPTCHA Anti-Spam is a WordPress plugin I made. It adds CAPTCHA anti-spam methods to WordPress on the comment form, registration form, login, or all. In order to post comments or register, users will have to type in the code shown on the image. This prevents spam from automated bots. Adds security. Works great with Akismet. Also is fully WP, WPMU, and BuddyPress compatible.

Some themes use colored backgrounds for form input fields. The default form field background color is white. If you have a theme that colored form field backgrounds, this article will help you make a quick setting to make the fields match.


Upgrade the plugin to version 2.6.5 or higher.
Look on the SI CAPTCHA Anti-Spam settings page for the section of settings for CAPTCHA Form CSS Style
The setting to change is CSS style for CAPTCHA input DIV
Here are the instructions for this setting:
Use to adjust the font colors or other CSS styling of the CAPTCHA on the comment form.
Acceptable Examples:
color:#000000; background-color:#CCCCCC;
style=”color:#000000; background-color:#CCCCCC;”

Example scenario: In the picture above, you will see that the comment area is a khaki color and the CAPTCHA input field is white. I want to make the CAPTCHA input field have a matching khaki color background. Here is how I do it: on the SI CAPTCHA Anti-Spam settings page,
change the setting CSS style for CAPTCHA input DIV
change from: width:65px;
change to: width:65px; background: #ddd5ba; border: 1px solid #c7bea2;

Click “Update Options” and refresh the comment form page. Does it look better?


How did I know what color to put in the CSS style for CAPTCHA input DIV setting?
I used the FireFox Web Developer Toolbar to look at the style.css file and I found the css
#commentform #email using the was the colors I needed.

FireFox Web Developer Toolbar is a great tool for any webmaster to use:
This menu contains my favorite feature of the Web Developer Toolbar: Edit CSS. When you activate this feature, you can edit the CSS of a web page in a sidebar in real time and see your changes updated on the web page as you type them. For example, maybe you want to see what your site would look like with CSS changes just by editing the CSS in the sidebar. As soon as the sidebar is closed, the changes are discarded.

Another useful feature in the CSS menu is Disable External Styles which allows you to remove all the external CSS from a web page. It is good for troubleshooting if the theme or plugin is causing the problem.


Note to Theme Builders:
By default, the CAPTCHA form styles are editable on the settings page when using the “Internal Style Sheet CSS” setting. The CAPTCHA CSS will be automatically be included in the page <head> section.

Premium themes can add support for SI-CAPTCHA Anti-Spam style in the theme’s style.css. If that is the case, then select “External Style Sheet CSS” if instructed to in the theme’s installation instructions. The CAPTCHA CSS will NOT be included in the page <head> section, and it must be included in the style.css of the theme. Be sure to remember this if you switch your theme later on.

Note: “Internal Style Sheet CSS” fields on the settings page are not editable while “External Style Sheet CSS” is enabled.

External Style Sheet CSS starting point for theme builders:

/*------------[SI Captcha Anti-Spam]--------------*/
div#captchaImgDiv { display:block; }
.captchaSizeDivSmall { width:175px; height:45px; padding-top:10px; }
.captchaSizeDivLarge { width:250px; height:60px; padding-top:10px; }
img#si_image_com,#si_image_reg,#si_image_log,#si_image_side_login { border-style:none; margin:0; padding-right:5px; float:left; }
.captchaImgAudio { border-style:none; margin:0; vertical-align:top; }
.captchaImgRefresh { border-style:none; margin:0; vertical-align:bottom; }
div#captchaInputDiv { display:block; padding-top:15px; padding-bottom:5px; }
label#captcha_code_label { margin:0; }
input#captcha_code { width:65px; }

This sounds too complicated, can I hire you to tell me what change I need to make and where?

Yes, for a $10 PayPal donation I will examine your page and CSS and tell you what change to make and where to change it. All I need is the URL and the description of the problem. Fill out my support form request here. Select Priority support and make a donation (include a note in the donation so that I can correlate the donation to your priority request for help). – Mike Challis