[Catalyst] HTML::Widget CSS and Captcha

[Yves Räber]

Hello,

In the hope that this can help other people, here are two things which I 
wanted to share (because I didn't find all this when I was looking for it):

1. Captcha and HTML::Widget

There is a really easy way to put a captcha (security image) inside a 
html::widget form, and here it is :

   my $a = HTML::Element->new('img', src => $c->uri_for('/captcha')); 
   $c->widget->element('Span','captcha')->content($a);


2. Nice CSS for HTML::Widget

This is what I use now, it's not perfect but it's a start :)

form {
   text-align: left;
    width: 500px;
    margin: 1em auto;
    font: bold 11px verdana, arial, sans-serif;
}

fieldset {
    padding: .7em;
    border: 1px solid #c0c0c0;
    background: #f0f0f0;
}

legend {
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0.1em 0.5em;
}

label {
   position : relative;
   width : 35em;
   display : block;
   padding: 0.2em;
   margin-bottom: 10px;
}

label input, label select {
   position : absolute;
   left : 110pt;
   top : 0px;
   width : 12em;
}

textarea {
    width: 100%;
}

input.submit {
   font-weight: bold;
   height: 22px;
   position: relative;
   left: 34%;
}

.labels_with_errors {
    width: 100%;
    margin-bottom: 0px;
    border-top: 1px solid red;
    background: #e0e0e0;
}

.labels_with_errors span, .labels_with_errors input {
}

.error_messages {
   padding: 10px;
   color: red;
   font-style: italic;
   margin-right: -5px;
   display: block;
   border-bottom: 1px solid red;
   background: #e0e0e0;
}

.label_comments {
    font-style: italic;
    font-size: 8pt;
    color: #444;
    position: absolute;
    left : 320px;
    width: 200px;
}

/* That's for the captcha */
span#_widget_captcha {
   position: relative;
   left: 110pt;
   top: 0px;
   width: 12em;
}

Regards,

Yves.