Showing posts with label hacks. Show all posts
Showing posts with label hacks. Show all posts

Saturday, March 12, 2011

Make reCAPTCHA Smaller

I don't recommend this solution BUT if it's your only option he's how to make reCAPTCHA smaller.

First you'll need to use a custom theme. Add the following before the form element:

<script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'

Next add the HTML for the custom widget where you want it to show up inside the form.

<div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>


 <script type="text/javascript"
   <iframe src=""
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   <input type="hidden" name="recaptcha_response_field"

This is standard code from the reCAPTCHA documentation up to this point. The trick I used to make the img and div tags smaller is to set the width in CSS with the !important flag. Add this CSS to your page.

    #recaptcha_image img 
        width: 200px !important;
        cursor: pointer;
    #recaptcha_image img:hover
        position: absolute;
        width: 300px !important;
        display: block;

This will make the reCAPTCHA fit in a space a little over 200px wide. I've added an img:hover style to make the image full size when the mouse rolls over it. The :hover style doesn't work on older browsers though so the next step would be to use jQuery to make the image bigger on hover or click. I'll leave that up to you to figure out. ;)

Friday, May 7, 2010

Custom iPhone Mount for Evo

Since I was rarely using my Griffin iPhone 3G windshield mount, due to always removing it when parked because I try not advertise I have stuff in my car and I think it's technically illegal in MN to have one, I decided I'd like my iPhone mounted on the dash. Well I think I found a pretty decent spot. See the slide show below for how it was made or if you don't have flash visit my Picasa web album. Read the captions on the photos for more details.

More discussion here on EvoMN.