How to change the Comment Form input color on SI CAPTCHA Anti-Spam

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

How to change the Comment Form input color on SI CAPTCHA Anti-Spam

SI CAPTCHA Anti-Spam is a WordPress plugin I made. It adds Secure Image CAPTCHA anti-spam to WordPress pages for comments, login, registration, lost password, BuddyPress register, and WooCommerce checkout.
In order to post comments, login, or register, users will have to pass the CAPTCHA test. This prevents spam from automated bots, adds security, and is even compatible Akismet. Compatible with Multisite Network Activate.
If you don’t like image captcha and code entry, you can uninstall this plugin and try my new plugin Fast Secure reCAPTCHA

Problem:
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.

si-captcha-form-colors

Solution:
Upgrade the plugin to version 3.0.0.0 or higher.
Look on the SI CAPTCHA Anti-Spam settings page for the section of settings for Style
The setting to enable is Enable external CAPTCHA CSS
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,
enable the setting Enable external CAPTCHA CSS then click “Save Changes”.
click “help” next to the setting and you can see plugin the CSS. Now you will copy this CSS, save it to your theme style.css or insert into your theme dashboard “Custom CSS”.
This is the line that had to be changed
change from:
input#si_captcha_code_input { width:65px; }

change to:
input#si_captcha_code_input { width:65px; background: #ddd5ba; border: 1px solid #c7bea2; }

si-captcha-form-colors-fixed

si-captcha-form-colors-2

Premium themes can add support for SI-CAPTCHA Anti-Spam style in the theme’s style.css. If that is the case, enable the setting Enable external CAPTCHA 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.

External Style Sheet CSS starting point for custom setup:

/*------------------------------------------------*/
/*------------[SI Captcha Anti-Spam]--------------*/
/*------------------------------------------------*/
.si_captcha_small { width:175px; height:45px; padding-top:10px; padding-bottom:10px; }
.si_captcha_large { width:250px; height:60px; padding-top:10px; padding-bottom:10px; }
img#si_image_com { border-style:none; margin:0; padding-right:5px; float:left; }
img#si_image_reg { border-style:none; margin:0; padding-right:5px; float:left; }
img#si_image_log { border-style:none; margin:0; padding-right:5px; float:left; }
img#si_image_side_login { border-style:none; margin:0; padding-right:5px; float:left; }
img#si_image_checkout { border-style:none; margin:0; padding-right:5px; float:left; }
.si_captcha_refresh { border-style:none; margin:0; vertical-align:bottom; }
div#si_captcha_input { display:block; padding-top:15px; padding-bottom:5px; }
label#si_captcha_code_label { margin:0; }
input#si_captcha_code_input { width:65px; }
p#si_captcha_code { clear: left; padding-top:10px; }

Send us a Donation:

Donate to Mike Challis