[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.

_______________________________________________
List: Catalyst@lists.rawmode.org
Listinfo: http://lists.rawmode.org/mailman/listinfo/catalyst
Searchable archive: http://www.mail-archive.com/catalyst@lists.rawmode.org/
Dev site: http://dev.catalyst.perl.org/