Merge lp:~daker/loco-team-portal/fix.forms into lp:loco-team-portal

[Adnane Belmadiaf]

Fixed the forms style

[Tarmac WebDev (tarmac-webdev)]

Attempt to merge into lp:loco-team-portal failed due to conflicts:

text conflict in loco_directory/media/css/styles.css

[lp:~daker/loco-team-portal/fix.forms]

613. By Adnane Belmadiaf on 2013-02-18

Merged trunk
Fixed #797992

=== modified file 'loco_directory/events/forms.py'
--- loco_directory/events/forms.py	2013-02-16 00:29:22 +0000
+++ loco_directory/events/forms.py	2013-02-18 21:30:29 +0000
@@ -8,6 +8,7 @@
 from venues.models import Venue
 from common.forms import RenderableMixin
 from userprofiles.models import UserProfile
+from .widgets import DateTimeWidget
 
 import itertools
 
@@ -43,23 +44,17 @@
 
     class Media:
         css = {'all': (
-                settings.MEDIA_URL + 'jquery-ui/css/css/smoothness/jquery-ui.css',
-                settings.MEDIA_URL + 'jquery-ui-timepicker/css/ui-lightness/ui.timepickr.css',
-                settings.MEDIA_URL + 'css/colortip-1.0-jquery.css',
+                settings.MEDIA_URL + 'jquery-ui/css/smoothness/jquery-ui.css',
                 )}
         js = (
-              settings.MEDIA_URL + 'jquery/jquery.js',
               settings.MEDIA_URL + 'jquery-ui/jquery-ui.js',
-              settings.MEDIA_URL + 'jquery-ui-timepicker/js/jquery.timepickr.min.js',
-              settings.MEDIA_URL + 'jquery-ui-timepicker/js/ui.timepickr.min.js',
-              settings.MEDIA_URL + 'js/colortip-1.0-jquery.js',
               settings.MEDIA_URL + 'js/events-ui.js',
               )
 
     def __init__(self, *args, **kargs):
         super(BaseEventForm, self).__init__(*args, **kargs)
-        self.fields['date_begin'].widget = forms.SplitDateTimeWidget()
-        self.fields['date_end'].widget = forms.SplitDateTimeWidget()
+        self.fields['date_begin'].widget = DateTimeWidget()
+        self.fields['date_end'].widget = DateTimeWidget()
 
     def clean(self):
         begin = self.cleaned_data.get('date_begin')
@@ -184,12 +179,3 @@
     class Meta:
         model = TeamEventComment
         exclude = ('team_event', 'date_created', 'commenter_profile')
-
-    class Media:
-        css = {'all': (
-                       settings.MEDIA_URL + 'css/colortip-1.0-jquery.css',
-                       )}
-        js = (
-              settings.MEDIA_URL + 'jquery/jquery.js',
-              settings.MEDIA_URL + 'js/colortip-1.0-jquery.js',
-              )
 
=== modified file 'loco_directory/events/models.py'
--- loco_directory/events/models.py	2013-02-16 00:29:22 +0000
+++ loco_directory/events/models.py	2013-02-18 21:30:29 +0000
@@ -93,7 +93,6 @@
     venue = models.ForeignKey(Venue, help_text=_('Venue for the Event'), verbose_name=_('Event Venue'), blank=True, null=True)
     channel = models.CharField(help_text=_('Channel for the Event hosted on the freenode IRC network. Ex. #ubuntu-us-fl'), max_length=25, verbose_name=_('Event Channel'), blank=True, null=True)
     registration = models.URLField(verbose_name=_('Registration URL'), help_text=_('URL to register attendance (leave blank to use the built-in registration system)'), max_length=200, verify_exists=False, blank=True, null=True)
-    template = 'events/team_event_li.inc.html'
 
     objects = TeamEventManager()
 
 
=== added file 'loco_directory/events/widgets.py'
--- loco_directory/events/widgets.py	1970-01-01 00:00:00 +0000
+++ loco_directory/events/widgets.py	2013-02-18 21:30:29 +0000
@@ -0,0 +1,90 @@
+# -*- coding: utf-8 -*-
+from datetime import time
+from time import strptime, strftime
+
+from django import forms
+from django.utils.translation import ugettext as _
+
+
+class DateWidget(forms.DateInput):
+    """A more-friendly date widget with a pop-up calendar.
+    """
+    def __init__(self, attrs=None):
+        self.date_class = 'datepicker'
+        if not attrs:
+            attrs = {}
+        if 'date_class' in attrs:
+            self.date_class = attrs.pop('date_class')
+        if 'class' not in attrs:
+            attrs['class'] = 'date'
+
+        super(DateWidget, self).__init__(attrs=attrs)
+
+    def render(self, name, value, attrs=None):
+        return '<span class="%s">%s</span>' % (self.date_class, super(DateWidget, self).render(name, value, attrs))
+
+
+class TimeWidget(forms.MultiWidget):
+    """A more-friendly time widget.
+    """
+    def __init__(self, attrs=None):
+        self.time_class = 'timepicker'
+        if not attrs:
+            attrs = {}
+        if 'time_class' in attrs:
+            self.time_class = attrs.pop('time_class')
+        if 'class' not in attrs:
+            attrs['class'] = 'time'
+
+        widgets = (
+            forms.Select(attrs=attrs, choices=[(i + 1, "%02d" % (i + 1)) for i in range(0, 12)]),
+            forms.Select(attrs=attrs, choices=[(i, "%02d" % i) for i in range(00, 60, 15)]),
+            forms.Select(attrs=attrs, choices=[('AM', _('AM')), ('PM', _('PM'))])
+        )
+
+        super(TimeWidget, self).__init__(widgets, attrs)
+
+    def decompress(self, value):
+        if isinstance(value, time):
+            hour = int(value.strftime("%I"))
+            minute = int(value.strftime("%M"))
+            meridian = value.strftime("%p")
+            return (hour, minute, meridian)
+        return (None, None, None)
+
+    def value_from_datadict(self, data, files, name):
+        value = super(TimeWidget, self).value_from_datadict(data, files, name)
+        t = strptime("%02d:%02d %s" % (int(value[0]), int(value[1]), value[2]), "%I:%M %p")
+        return strftime("%H:%M:%S", t)
+
+    def format_output(self, rendered_widgets):
+        return '<span class="%s">%s%s%s</span>' % (
+            self.time_class,
+            rendered_widgets[0], rendered_widgets[1], rendered_widgets[2]
+        )
+
+
+class DateTimeWidget(forms.SplitDateTimeWidget):
+    """A more-friendly date/time widget.
+
+    Inspired by:
+
+    http://copiesofcopies.org/webl/2010/04/26/a-better-datetime-widget-for-django/
+    """
+    def __init__(self, attrs=None, date_format=None, time_format=None):
+        super(DateTimeWidget, self).__init__(attrs, date_format, time_format)
+        self.widgets = (
+            DateWidget(attrs=attrs),
+            TimeWidget(attrs=attrs),
+        )
+
+    def decompress(self, value):
+        if value:
+            d = strftime("%Y-%m-%d", value.timetuple())
+            t = strftime("%I:%M %p", value.timetuple())
+            return (d, t)
+        else:
+            return (None, None)
+
+    def format_output(self, rendered_widgets):
+        return '%s%s' % (rendered_widgets[0], rendered_widgets[1])
 
=== modified file 'loco_directory/media/css/styles.css'
--- loco_directory/media/css/styles.css	2013-02-16 18:50:41 +0000
+++ loco_directory/media/css/styles.css	2013-02-18 21:30:29 +0000
@@ -352,113 +352,133 @@
     margin: 0;
 }
 
-/* TODO: date_begin and date_end should have class .small */
-#id_date_begin_0, #id_date_begin_1, #id_date_end_0, #id_date_end_1 {
-    width: 134px;
-}
-#id_date_begin_0:focus, #id_date_begin_1:focus, #id_date_end_0:focus, #id_date_end_1:focus {
-    width: 132px;
-}
-/*
-.form {
-	width: 500px;
-        float:left;
-}
-
-.form div{
-        padding-top:2px;
-        padding-bottom:2px;
-}
-
-.form div span.help{
-        font-size:20px;
-        color: #DD4814;
-	cursor:pointer;
-	vertical-align: top;
-	display:inline;
-
-}
-
-.form input[type="text"], .form textarea, .form select {
-	padding: 5px;
-	width: 200px;
-	margin: 0px 0px 5px 0px;
-	border: 1px solid #ccc;
-}
-
-.form input[type="text"] {
-	margin-right: 10px;
-}
-
-.form input[type="checkbox"] {
-	width: 200px;
-	height:35px;
-	margin: 0px 0px 5px 0px;
-}
-
-.form div div.field {
-        float: left;
-	padding-top: 5px;
-}
-
-.form div.approved, .form div.approved_date, .form div.expires_date {
-        height:30px;
-}
-
-.form span.extra {
-        float: left;
-	padding-top: 5px;
-	font-size:0.8em;
-}
-
-.form div div.field label{
-	float: left;
-	padding-right: 10px;
-	width: 170px;
-	font-size: 0.8em;
-	text-align: right;
-        font-weight:normal;
-}
-
-.form div span.required {
-        font-size:20px;
-	color: red;
-	margin-left:5px;
-	vertical-align: top;
-	display:inline;
-}
-
-.form textarea {
-	height: 90px;
-	width: 270px;
-}
-
-
-.form select:focus, .form textarea:focus, .form input:focus {
-	border: 1px solid #900;
-}
-
-.form input.submit-button {
-	padding-left: 20px;
-	padding-right: 20px;
-	float: right;
-	margin-right: 50px;
-}
-
-.form ul.errorlist {
-	margin: 0px;
-	padding: 0px;
-}
-
-.form .errorlist li {
-	color: red;
-	font-weight: bold;
-	display: block;
-	font-size: 0.8em;
-	margin: 0px 130px 3px;
-	padding: 4px 5px;
-}
-*/
+#id_date_begin_0, #id_date_begin_1,
+#id_date_end_0, #id_date_end_1,
+#id_date_begin_1_0, #id_date_begin_1_1, #id_date_begin_1_2,
+#id_date_end_1_0, #id_date_end_1_1, #id_date_end_1_2 {
+    width: 100px;
+    display: inline;
+}
+
+#id_date_begin_1_0, #id_date_begin_1_1, #id_date_begin_1_2,
+#id_date_end_1_0, #id_date_end_1_1, #id_date_end_1_2 {
+    width: 60px;
+}
+
+#id_name, #id_announce, #id_registration {
+    width: 350px;
+}
+
+form.form {
+    margin-bottom: 10px;
+}
+
+form.form div{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+form.form div ul.errorlist + input,
+form.form div ul.errorlist + select,
+form.form div ul.errorlist + textarea {
+    background-color: #fff6f6;
+    border-color: #eec3c7;
+}
+
+form.form div label{
+    font-size: 14px;
+    margin-bottom: 5px;
+    cursor:default;
+}
+
+form.form div span.h{
+    color: #a1a1a1;
+    font-size: 12px;
+    font-style: italic;
+    display: block;
+    margin-bottom: 15px;
+}
+
+form.form input[type="text"], form.form textarea, form.form select {
+    height: auto;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    border: 1px solid #ddd;
+    padding: 8px;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    font-size: 13px;
+    margin-right: 10px;
+}
+
+form.form input[type="text"] {
+    margin-right: 10px;
+}
+
+form.form input[type="checkbox"] {
+    margin: 0px 0px 5px 0px;
+}
+
+form.form div span.required {
+    font-size:20px;
+    color: #b94a5c;
+    margin-left: 5px;
+    vertical-align: top;
+    display: inline;
+}
+
+form.form textarea {
+    height: 180px;
+    width: 520px!important;
+    max-width: 500px!important;
+    min-width: auto!important;
+}
+
+form.form select:focus, form.form textarea:focus, form.form input:focus {
+    border: 1px solid #900;
+}
+
+form.form input.btn {
+    background: transparent url(../images/bg_btn.png) repeat-x top left;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: bold;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0;
+    outline: 0;
+    padding: 7px 25px;
+    color: white;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+    position: relative;
+    display: inline-block;
+    text-transform: uppercase;
+}
+
+form.form input.btn:active {
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+form.form ul.errorlist {
+    margin: 0px;
+    padding: 0px;
+    color: #b94a5c;
+    display: block;
+}
+
+form.form ul.errorlist li {
+    font-weight: bold;
+    display: block;
+    font-size: 0.9em;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+}
 
 h3.attendees-title {
     display: inline-block;
@@ -473,6 +493,11 @@
     text-transform: uppercase;
     margin-top: 10px;
 }
+
+form fieldset {
+    padding: 15px 20px 15px 20px !important;
+}
+
 ul.attendees {
     margin: 0;
     padding: 0;
@@ -487,7 +512,7 @@
 }
 
 .attendee-mugshot {
-	cursor: pointer;
+    cursor: pointer;
     float: left;
     height: 32px;
     margin-right: 10px;
@@ -1600,6 +1625,80 @@
    font-size:  0.8em;
 }
 
+
+/* CALENDAR STYLES */
+.ui-datepicker-calendar thead{
+    display:none;
+}
+
+#ui-datepicker-div{
+    font-size:13px;
+    line-height:1.8em;
+    z-index:10000 !important;
+    border:5px solid #455868;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    margin-top:6px;
+    margin-left:-60px;
+    padding-bottom:10px;
+}
+
+.ui-datepicker{
+    padding:0 !important;
+    padding-bottom: 3px !important;
+    width:auto !important;
+}
+
+.ui-datepicker table{
+    margin:0 !important;
+    width:auto !important;
+}
+
+.ui-datepicker td{
+    padding:0 !important;
+    border:1px solid #ECECEC !important;
+    width:29px;
+    height:29px;
+}
+
+.ui-datepicker td a {
+    text-align: center!important;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
+    border: 0 none !important;
+    background:none !important;
+}
+
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
+.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{
+    border: 0 none !important;
+    background: #909DA7 !important;
+    color:#FFFFFF !important;
+}
+
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
+    color:#FFFFFF !important;
+    background: #909DA7 !important;
+}
+
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
+    border: 0 none !important;
+}
+
+.ui-datepicker-prev.ui-state-hover, .ui-datepicker-next.ui-state-hover {
+    background:none !important;
+}
+
+.ui-widget-header {
+    background: #dd4814 !important;
+    -moz-border-radius: 0 !important;
+    -webkit-border-radius: 0 !important;
+    border-radius: 0 !important;
+    color: #fff !important;
+}
+
 #lc {
     padding: 15px;
     border-top: 1px solid #E6E6E6;
@@ -1616,4 +1715,4 @@
 
 #lc ul li:last-child {
     margin-bottom: 0;
-}
 \ No newline at end of file
+}
 
=== modified file 'loco_directory/media/js/events-ui.js'
--- loco_directory/media/js/events-ui.js	2012-03-22 21:57:48 +0000
+++ loco_directory/media/js/events-ui.js	2013-02-18 21:30:29 +0000
@@ -6,12 +6,8 @@
     });
 
     $("#id_date_begin_0").datepicker({altField: "#id_date_end_0", altFormat: "yy-mm-dd"});
-    $('#id_date_begin_1').timepickr({ trigger: 'focus', convention: 24 });
 
     $("#id_date_end_0").datepicker();
-    $('#id_date_end_1').timepickr({ trigger: 'focus', convention: 24 });
-
-    $('span[rel*=help]').colorTip({color:'orange'});
 
     $('#id_filtering').datepicker( {
       changeYear: true,
@@ -19,7 +15,7 @@
       showButtonPanel: true,
       dateFormat: 'yy-m',
       onClose: function(dateText, inst) {
-        
+
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
         var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
         $(this).datepicker('setDate', new Date(year, month, 1));
 
=== modified file 'loco_directory/meetings/forms.py'
--- loco_directory/meetings/forms.py	2013-02-05 23:23:30 +0000
+++ loco_directory/meetings/forms.py	2013-02-18 21:30:29 +0000
@@ -6,6 +6,7 @@
 from models import BaseMeeting, TeamMeeting, AgendaItem
 from common.forms import RenderableMixin
 from userprofiles.models import UserProfile
+from events.widgets import DateTimeWidget
 
 import urllib
 
@@ -32,23 +33,17 @@
 
     class Media:
         css = {'all': (
-                settings.MEDIA_URL + 'jquery-ui/css/css/smoothness/jquery-ui.css',
-                settings.MEDIA_URL + 'jquery-ui-timepicker/css/ui-lightness/ui.timepickr.css',
-                settings.MEDIA_URL + 'css/colortip-1.0-jquery.css',
+                settings.MEDIA_URL + 'jquery-ui/css/smoothness/jquery-ui.css',
                 )}
         js = (
-              settings.MEDIA_URL + 'jquery/jquery.js',
               settings.MEDIA_URL + 'jquery-ui/jquery-ui.js',
-              settings.MEDIA_URL + 'jquery-ui-timepicker/js/jquery.timepickr.min.js',
-              settings.MEDIA_URL + 'jquery-ui-timepicker/js/ui.timepickr.min.js',
               settings.MEDIA_URL + 'js/events-ui.js',
-              settings.MEDIA_URL + 'js/colortip-1.0-jquery.js',
               )
 
     def __init__(self, *args, **kargs):
         super(BaseMeetingForm, self).__init__(*args, **kargs)
-        self.fields['date_begin'].widget = forms.SplitDateTimeWidget()
-        self.fields['date_end'].widget = forms.SplitDateTimeWidget()
+        self.fields['date_begin'].widget = DateTimeWidget()
+        self.fields['date_end'].widget = DateTimeWidget()
 
     def clean(self):
         begin = self.cleaned_data.get('date_begin')
 
=== modified file 'loco_directory/templates/events/global_event_new.html'
--- loco_directory/templates/events/global_event_new.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/events/global_event_new.html	2013-02-18 21:30:29 +0000
@@ -4,31 +4,22 @@
 {% block page_name %}{% trans "New Global Event" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
-<script type="text/javascript" src="{{MEDIA_URL}}js/colortip-1.0-jquery.js"></script>
-<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/colortip-1.0-jquery.css"/>
-{% endblock %}
-
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+{{ form.media }}
 {% endblock %}
 
 {% block content %}
 <div class="row">
-<section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Add new Global Event" %}</h3>
-            {{ form.as_template }}
-        </fieldset>
-	    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
-	    <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" /> 
-    </form>
-</section>
+    <section class="span-9">
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Add new Global Event" %}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
+    </section>
 </div>
-
 {% endblock %}
 
=== modified file 'loco_directory/templates/events/global_event_update.html'
--- loco_directory/templates/events/global_event_update.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/events/global_event_update.html	2013-02-18 21:30:29 +0000
@@ -4,29 +4,22 @@
 {% block page_name %}{% trans "Update Global Event" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
-{% endblock %}
-
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+{{ form.media }}
 {% endblock %}
 
 {% block content %}
 <div class="row">
-<section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Update Global Event" %}</h3>
-            {{ form.as_template }}
-        </fieldset>
-	    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}		
-	    <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" /> 
-    </form>
-</section>
+    <section class="span-9">
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Update Global Event" %}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
+    </section>
 </div>
-
 {% endblock %}
 
=== modified file 'loco_directory/templates/events/team_event_new.html'
--- loco_directory/templates/events/team_event_new.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/events/team_event_new.html	2013-02-18 21:30:29 +0000
@@ -4,37 +4,30 @@
 {% block page_name %}{% trans "New Team Event" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
+{{ form.media }}
 {% if global_event %}
-<script>
-	$.datepicker.setDefaults({
-		minDate: new Date({{global_event.date_begin.year}}, {{global_event.date_begin.month}}-1, {{global_event.date_begin.day}} ),
-		maxDate: new Date({{global_event.date_end.year}}, {{global_event.date_end.month}}-1, {{global_event.date_end.day}} )
-	});
+<script type="text/javascript">
+    $.datepicker.setDefaults({
+        minDate: new Date({{ global_event.date_begin.year }}, {{ global_event.date_begin.month }}-1, {{ global_event.date_begin.day }} ),
+        maxDate: new Date({{ global_event.date_end.year }}, {{ global_event.date_end.month }}-1, {{ global_event.date_end.day }} )
+    });
 </script>
 {% endif %}
 {% endblock %}
 
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
-{% endblock %}
-
 {% block content %}
 <div class="row">
-<section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Add new Team Event for " %}{{ team_object.name}}<span class="supporting">{% trans 'is required' %}</span></h3>
-	        {{ form.as_template }}
-        </fieldset>
-	    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}	
-        <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" /> 
-    </form>
-</section>
+    <section class="span-9">
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Add new Team Event for " %}{{ team_object.name}}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
+    </section>
 </div>
-
-{% endblock %}
+{% endblock %}
 \ No newline at end of file
 
=== modified file 'loco_directory/templates/events/team_event_update.html'
--- loco_directory/templates/events/team_event_update.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/events/team_event_update.html	2013-02-18 21:30:29 +0000
@@ -4,29 +4,22 @@
 {% block page_name %}{% trans "Update Team Event" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
-{% endblock %}
-
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+{{ form.media }}
 {% endblock %}
 
 {% block content %}
 <div class="row">
-<section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Update Team Event" %}</h3>
-	        {{ form.as_template }}
-        </fieldset>
-	    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
-	    <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" /> 
-    </form>
-</section>
+    <section class="span-9">
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Update Team Event" %}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
+    </section>
 </div>
-
 {% endblock %}
 
=== added file 'loco_directory/templates/form.html'
--- loco_directory/templates/form.html	1970-01-01 00:00:00 +0000
+++ loco_directory/templates/form.html	2013-02-18 21:30:29 +0000
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% for field in form.visible_fields %}
+    <div>
+        {% if field.field.label %}<label for="id_{{ field.name }}"{% if field.field.required %} class="required"{% endif %}>{{ field.label }}</label>{% endif %}
+        {% if field.errors %}
+            <ul class="errorlist">
+            {% for error in field.errors %}
+                <li class="error">{{ error }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+        {{ field }}
+        {% if field.help_text %}<span class="h">{{ field.help_text }}</span>{% endif %}
+    </div>
+{% endfor %}
+{% for field in form.hidden_fields %}
+    <div class="hidden">{{ field }}</div>
+{% endfor %}
 
=== modified file 'loco_directory/templates/meetings/team_meeting_new.html'
--- loco_directory/templates/meetings/team_meeting_new.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/meetings/team_meeting_new.html	2013-02-18 21:30:29 +0000
@@ -4,29 +4,22 @@
 {% block page_name %}{% trans "New Team Meeting" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
-{% endblock %}
-
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+{{ form.media }}
 {% endblock %}
 
 {% block content %}
 <div class="row">
     <section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Add new Team Meeting for " %}{{ team_object.name}}</h3>
-	        {{ form.as_template }}
-        </fieldset>
-	    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}		
-	    <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" />
-    </form>
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Add new Team Meeting for " %}{{ team_object.name}}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
     </section>
 </div>
-
 {% endblock %}
 
=== modified file 'loco_directory/templates/meetings/team_meeting_update.html'
--- loco_directory/templates/meetings/team_meeting_update.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/meetings/team_meeting_update.html	2013-02-18 21:30:29 +0000
@@ -4,29 +4,22 @@
 {% block page_name %}{% trans "Update Team Meeting" %}{% endblock %}
 
 {% block extrahead %}{{ block.super }}
-{{form.media}}
-{% endblock %}
-
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+{{ form.media }}
 {% endblock %}
 
 {% block content %}
 <div class="row">
     <section class="span-9">
-    <form action="." method="post">{% csrf_token %}
-        <fieldset>
-            <h3>{% trans "Update Team Meeting" %}</h3>
-	        {{ form.as_template }}
-        </fieldset>
-        {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}		
-        <input type="submit" name="submit" value="{% trans "Submit" %}" class="submit-button" />
-    </form>
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Update Team Meeting" %}</h2>
+                    {{ form.as_template }}
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Submit" %}" class="btn" />
+                </form>
+            </div>
+        </div>
     </section>
 </div>
-
 {% endblock %}
 
=== modified file 'loco_directory/templates/teams/team_update.html'
--- loco_directory/templates/teams/team_update.html	2012-12-26 17:23:50 +0000
+++ loco_directory/templates/teams/team_update.html	2013-02-18 21:30:29 +0000
@@ -1,62 +1,52 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block page_name %}{% blocktrans with team.name as teamname %}Update {{teamname}}{% endblocktrans %}{% endblock %}
+{% block page_name %}{% blocktrans with team.name as teamname %}Update {{ teamname }}{% endblocktrans %}{% endblock %}
 
-{% block extrahead %}{{block.super}}
+{% block extrahead %}{{ block.super }}
 {{ form.media }}
 {% endblock %}
 
-{% block extrafooter %}
-<script type="text/javascript"><!--
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
-{% endblock %}
-
 {% block sub_nav_links %}
-    <li><a class="sub-nav-item" href="/teams">{% trans "Back to Teams List" %}</a></li>
-    <li><a class="sub-nav-item" href="/teams/{{ team.lp_name }}">{% trans "Back to Team Details" %}</a></li>
+    <li><a class="sub-nav-item" href="/teams/">{% trans "Back to Teams List" %}</a></li>
+    <li><a class="sub-nav-item" href="/teams/{{ team.lp_name }}/">{% trans "Back to Team Details" %}</a></li>
 {% endblock %}
 
 {% block content %}
-
 <div class="row">
-<section class="span-9">
-    <article id="form">
+    <section class="span-9">
         {% if form.errors %}
             <p style="color: red;">
                 {% trans  "Please correct the error" %}{{ form.errors|pluralize }} below.
             </p>
         {% endif %}
-
-        <form action="{{ request.path_info }}" method="POST">{% csrf_token %}
-            <fieldset>
-                <h3>{% trans "Update the information below" %}</h3>
-                {{ form.as_template }}
-            </fieldset>
-            <fieldset>
-                <h3>{% trans "Static information" %}</h3>
-                <div class="approved">
-                    <div class="field"><label for="approved">Approved :</label></div>
-                    <span class="extra">{% if team.approved %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</span>
-                </div>
-                {% if team.approved %}
-                    <div class="approved_date">
-                        <div class="field"><label for="approved_date">Date Approved :</label></div>
-                        <span class="extra">{{ team.approved_date }}</span>
-                    </div>
-                    <div class="expires_date">
-                        <div class="field"><label for="expires_date">Reapproval Date :</label></div>
-                        <span class="extra">{{ team.expires_date }}</span>
-                    </div>
-      	        {% endif %}
-  	        </fieldset>
-                {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}		
-                <input type="submit" name="submit" value="{% trans "Update Information Now!" %}" class="submit-button" /> 
-        </form>
+        <div class="box_content">
+            <div class="pagelet">
+                <form action="." method="post" class="form">{% csrf_token %}
+                    <h2>{% trans "Update the information below" %}</h2>
+                    {{ form.as_template }}
+                    <fieldset>
+                        <h3>{% trans "Static information" %}</h3>
+                        <div class="approved">
+                            <span>Approved :</span>
+                            <span>{% if team.approved %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</span>
+                        </div>
+                        {% if team.approved %}
+                            <div class="approved_date">
+                                <span>Date Approved :</span>
+                                <span>{{ team.approved_date }}</span>
+                            </div>
+                            <div class="expires_date">
+                                <span>Reapproval Date :</span>
+                                <span>{{ team.expires_date }}</span>
+                            </div>
+                        {% endif %}
+                    </fieldset>
+                    {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
+                    <input type="submit" name="submit" value="{% trans "Update" %}" class="btn" />
+                </form>
+            </div>
+        </div>
     </section>
 </div>
-
 {% endblock %}