Symfony: sfGuard custom login form

Немного улучшим дизайн формы ввода логина.


myGuard.css

.error_list { color: #ff0000; }
.errorField{
 background: #ffffcc; border: 2px solid red;
}
.okField{
 background: #ffffcc; border: 2px solid lightgreen;
}
.inputField{
 background: #ffffff;
}

#loginForm {
 display: none;
 background: khaki; width: 280px;
 position: absolute;
 z-index: 9999; font-family: Tahoma; font-size: 12px;
 border: 0px solid red;
}

#loginFormHeader {
 background: #cccc33; padding: 10px;
 border-bottom: 1px solid gray;
 font-weight: bold;
}
#loginFormBody {
 border-top: 1px solid #ececec;
 border-bottom: 1px solid gray;
 padding: 4px 0px 4px 0px;
}

#loginFormPic {
 padding: 10px 0px 0px 10px;
 display: block;
 float: left;
}
#loginFormBody ul{
 float: left;
 display: block;
 border: 0px solid navy;
 padding: 4px; list-style: none;
}

#loginFormBody ul li{
 border: 0px solid #f63;
 padding: 4px;
}

#loginFormBody label
{
 display: block;
 border: 0px solid green;
 padding: 0 1em 3px 0;
 float: left;
 text-align: left;
 width: 40px;
 color: black;
 font-weight: normal !important;
}
#loginFormFooter {
 padding: 10px;
 text-align: center;
 border-top: 1px solid #ececec;
}

/backend/config/view.yml

signinSuccess:
  javascripts:    [jq/jquery.pack.js, jq/jquery.dropshadow.js]
  stylesheets:    [main, myGuard]
  metas:
    title:        login

/backend/modules/sfGuardAuth/signinSuccess.php

<?php $errorFieldClass = "errorField" ?>
<?php $defaultFieldClass = ($sf_request->isMethod('post') ? "okField" : "inputField" )?>

<form action="<?php echo url_for('@sf_guard_signin') ?>"
  method="post">
<div id="loginForm">
  <div id="loginFormHeader">Требуется авторизация</div>
  <div id="loginFormBody">
    <div id="loginFormPic"><img src="/sf/sf_default/images/icons/lock48.png" /></div>
    <ul>
      <li><label for="signin_username">Логин:</label>
        <?php echo $form['username']->render(
            array(
              'class' => $form['username']->hasError() ? $errorFieldClass : $defaultFieldClass))
        ?>
      </li>
      <li><label for="signin_password">Пароль:</label>
        <?php echo $form['password']->render(
            array(
              'class' => $form['password']->hasError() ? $errorFieldClass : $defaultFieldClass))
        ?>
      </li>
      <li><label for="signin_remember"></label>
        <?php echo $form['remember']->render() ?> Запомнить?
      </li>
    </ul>
    <br clear="all" />
  </div>
  <div id="loginFormFooter">
    <input type="submit" value="войти" />
  </div>
</div>
</form>
<script>
$(document).ready(function() {
  $("#loginForm").hide();
  var popupX = Math.round( ($(window).width() - $("#loginForm").width()) / 2) ;
  var popupY = $(document).scrollTop() + Math.round($(window).height()/2) - Math.round($("#loginForm").height()/2);
  $("#loginForm").css({top: popupY+"px", left: popupX+"px"});
  $("#signin_username").focus();
  $("#loginForm").show();
  $("#loginForm").dropShadow();//{left: -2, top: -2, blur: 4, color: "#03f"}
});
</script>