Whole bunch of style-related changes, including some tasty hackery for the experience and education fields.

plugins/ExtendedProfile/css/profiledetail.css

@@ -1,22 +1,139 @@
 /* Note the #content is only needed to override weird crap in default styles */
 
+#profiledetail .entity_actions {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+#profiledetail #content h3 {
+    margin-bottom: 5px;
+}
+
 #content table.extended-profile {
     width: 100%;
     border-collapse: separate;
-    border-spacing: 8px;
+    border-spacing: 0px 8px;
+    margin-bottom: 10px;
 }
+
 #content table.extended-profile th {
     color: #777;
-    background-color: #eee;
+    background-color: #ECECF2;
     width: 150px;
-
-    padding-top: 0; /* override bizarre theme defaults */
-
     text-align: right;
-    padding-right: 8px;
+    padding: 2px 8px 2px 0px;
 }
-#content table.extended-profile td {
-    padding: 0; /* override bizarre theme defaults */
 
-    padding-left: 8px;
-}
+#content table.extended-profile th.employer, #content table.extended-profile th.institution {
+    display: none;
+}
+
+#content table.extended-profile td {
+    padding: 2px 0px 2px 8px;        
+}
+
+.experience-item, .education-item {
+    float: left;
+    padding-bottom: 4px;
+}
+
+.experience-item .label, .education-item .label {
+    float: left;
+    clear: left;
+    position: relative;
+    left: -8px;
+    margin-right: 2px;
+    margin-bottom: 8px;
+    color: #777;
+    background-color: #ECECF2;
+    width: 150px;
+    text-align: right;
+    padding: 2px 8px 2px 0px;
+}
+
+.experience-item .field, .education-item .field {
+    float: left;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+#profiledetailsettings #content table.extended-profile td {
+    padding: 0px 0px 0px 8px;
+}
+
+#profiledetailsettings input {
+    margin-right: 8px;
+}
+
+.experience-item input[type=text], .education-item input[type=text] {
+    float: left;
+}
+
+.extended-profile .current-checkbox {
+    float: left;
+    position: relative;
+    top: 2px;
+}
+
+.form_settings .extended-profile input.checkbox {
+    margin-left: 0px;
+    left: 0px;
+    top: 2px;
+}
+
+.form_settings .extended-profile label.checkbox {
+    max-width: 100%;
+    float: none;
+    left: -20px;
+}
+
+.phone-item label, .im-item label {
+    display: none;
+}
+
+.extended-profile select {
+    padding-right: 2px;
+    font-size: 0.88em;
+}
+
+.extended-profile a.add_row, .extended-profile a.remove_row {
+    display: block;
+    height: 16px;
+    width: 16px;
+    line-height: 4em;
+    overflow: hidden;
+    background-image: url('../../../theme/rebase/images/icons/icons-01.gif');
+    background-repeat: no-repeat;
+}
+
+.extended-profile a.remove_row {
+    background-position: 0px -1252px;
+    float: right;
+    position: relative;
+    top: 6px;
+}
+
+.extended-profile a.add_row {
+    clear: both;
+    position: relative;
+    top: 6px;
+    left: 2px;
+    background-position: 0px -1186px;
+}
+
+#content table.extended-profile .supersizeme th {
+    border-bottom: 28px solid #fff;
+}
+
+#profiledetailsettings .experience-item, #profiledetailsettings .education-item {
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+#profiledetailsettings tr:last-child .experience-item, #profiledetailsettings tr:last-child .education-item {
+    margin-bottom: 0px;
+}
+
+#profiledetailsettings .experience-item a.add_row, #profiledetailsettings .education-item a.add_row {
+    left: 160px;
+}

plugins/ExtendedProfile/extendedprofilewidget.php

@@ -128,7 +128,7 @@ class ExtendedProfileWidget extends Form
     {
         $this->out->elementStart('tr');
 
-        $this->out->element('th', null, $field['label']);
+        $this->out->element('th', str_replace(' ','_',strtolower($field['label'])), $field['label']);
 
         $this->out->elementStart('td');
         if ($this->editable) {
@@ -175,7 +175,7 @@ class ExtendedProfileWidget extends Form
         $this->out->elementStart(
             'div', array(
                 'id' => $id . '-edit',
-                'class' => 'im-edit'
+                'class' => 'im-item'
             )
         );
         $this->out->input(
@@ -212,7 +212,7 @@ class ExtendedProfileWidget extends Form
         $this->out->elementStart(
             'div', array(
                 'id' => $id . '-edit',
-                'class' => 'phone-edit'
+                'class' => 'phone-item'
             )
         );
         $this->out->input(
@@ -242,6 +242,7 @@ class ExtendedProfileWidget extends Form
     protected function showExperience($name, $field)
     {
         $this->out->elementStart('div', 'experience-item');
+        $this->out->element('div', 'label', _m('Company'));
         $this->out->element('div', 'field', $field['company']);
         $this->out->element('div', 'label', _m('Start'));
         $this->out->element('div', array('class' => 'field date'), $field['start']);
@@ -264,44 +265,42 @@ class ExtendedProfileWidget extends Form
         $this->out->elementStart(
             'div', array(
                 'id' => $id . '-edit',
-                'class' => 'experience-edit'
+                'class' => 'experience-item'
             )
         );
 
+        $this->out->element('div', 'label', _m('Company'));
         $this->out->input(
             $id,
             null,
             isset($field['company']) ? $field['company'] : null
         );
 
-        $this->out->elementStart('ul', 'experience-start-and-end');
-        $this->out->elementStart('li');
+        $this->out->element('div', 'label', _m('Start'));
         $this->out->input(
             $id . '-start',
-            _m('Start'),
+            null,
             isset($field['start']) ? $field['start'] : null
         );
-        $this->out->elementEnd('li');
 
-        $this->out->elementStart('li');
+        $this->out->element('div', 'label', _m('End'));
         $this->out->input(
             $id . '-end',
-            _m('End'),
+            null,
             isset($field['end']) ? $field['end'] : null
         );
-        $this->out->elementEnd('li');
-        $this->out->elementStart('li');
         $this->out->hidden(
             $id . '-current',
             'false'
         );
+        $this->out->elementStart('div', 'current-checkbox');
         $this->out->checkbox(
             $id . '-current',
             _m('Current'),
             $field['current']
         );
-        $this->out->elementEnd('li');
-        $this->out->elementEnd('ul');
+        $this->out->elementEnd('div');
+
         $this->showMultiControls();
         $this->out->elementEnd('div');
     }
@@ -309,6 +308,7 @@ class ExtendedProfileWidget extends Form
     protected function showEducation($name, $field)
     {
         $this->out->elementStart('div', 'education-item');
+        $this->out->element('div', 'label', _m('Institution'));
         $this->out->element('div', 'field', $field['school']);
         $this->out->element('div', 'label', _m('Degree'));
         $this->out->element('div', 'field', $field['degree']);
@@ -328,9 +328,10 @@ class ExtendedProfileWidget extends Form
         $this->out->elementStart(
             'div', array(
                 'id' => $id . '-edit',
-                'class' => 'education-edit'
+                'class' => 'education-item'
             )
         );
+        $this->out->element('div', 'label', _m('Institution'));
         $this->out->input(
             $id,
             null,
@@ -353,23 +354,19 @@ class ExtendedProfileWidget extends Form
             isset($field['description']) ? $field['description'] : null
         );
 
-        $this->out->elementStart('ul', 'education-start-and-end');
-        $this->out->elementStart('li');
+        $this->out->element('div', 'label', _m('Start'));
         $this->out->input(
             $id . '-start',
-            _m('Start'),
+            null,
             isset($field['start']) ? $field['start'] : null
         );
-        $this->out->elementEnd('li');
 
-        $this->out->elementStart('li');
+        $this->out->element('div', 'label', _m('End'));
         $this->out->input(
             $id . '-end',
-            _m('End'),
+            null,
             isset($field['end']) ? $field['end'] : null
         );
-        $this->out->elementEnd('li');
-        $this->out->elementEnd('ul');
 
         $this->showMultiControls();
         $this->out->elementEnd('div');
@@ -377,16 +374,6 @@ class ExtendedProfileWidget extends Form
 
     function showMultiControls()
     {
-        $this->out->element(
-            'a',
-            array(
-                'class' => 'add_row',
-                'href' => 'javascript://',
-                'style' => 'display: none; '
-            ),
-            '+'
-        );
-
         $this->out->element(
             'a',
             array(
@@ -396,6 +383,16 @@ class ExtendedProfileWidget extends Form
             ),
             '-'
         );
+
+        $this->out->element(
+            'a',
+            array(
+                'class' => 'add_row',
+                'href' => 'javascript://',
+                'style' => 'display: none; '
+            ),
+            '+'
+        );
     }
 
     /**
@@ -514,7 +511,7 @@ class ExtendedProfileWidget extends Form
 
     function formClass()
     {
-        return 'form_profile_details';
+        return 'form_profile_details form_settings';
     }
 
     /**

plugins/ExtendedProfile/js/profiledetail.js

@@ -12,6 +12,9 @@ var reorder = function(class) {
         replaceIndex(rowIndex(div), i);
     });
 
+    $this = $(divs).last().closest('tr');
+    $this.addClass('supersizeme');
+
     $(divs).last().find('a.add_row').show();
 
     if (divs.length == 1) {
@@ -57,7 +60,8 @@ var addRow = function() {
     var class = $(div).attr('class');
     var index = id.match(/\d+/);
     console.log("Current row = " + index + ', class = ' + class);
-    var tr = $(this).closest('tr');
+    var trold = $(this).closest('tr');
+    var tr = $(trold).removeClass('supersizeme');
     var newtr = $(tr).clone();
     var newIndex = parseInt(index) + 1;
     replaceIndex(newtr, index, newIndex);
@@ -95,4 +99,4 @@ function() {
     $('.remove_row').live('click', removeRow);
 }
 
-);
+);