[TASK] Rebrush login screen
authorFelix Kopp <felix-source@phorax.com>
Sun, 25 Nov 2012 19:48:55 +0000 (20:48 +0100)
committerHelmut Hummel <helmut.hummel@typo3.org>
Mon, 26 Nov 2012 21:22:21 +0000 (22:22 +0100)
Change header style to exclude gradient.
Also Increases input field size and add orange submit.

Change-Id: I67891a5d37ddc90c155149479ebe42f08dba1de0
Resolves: #41427
Releases: 6.0
Reviewed-on: http://review.typo3.org/16734
Tested-by: Steffen Ritter
Reviewed-by: Steffen Ritter
Reviewed-by: Wouter Wolters
Tested-by: Wouter Wolters
Reviewed-by: Helmut Hummel
Tested-by: Helmut Hummel
12 files changed:
typo3/jsfunc.placeholder.js
typo3/sysext/backend/Classes/Controller/LoginController.php
typo3/sysext/t3skin/icons/login-icon-key.gif [deleted file]
typo3/sysext/t3skin/icons/login-icon-key.png [new file with mode: 0644]
typo3/sysext/t3skin/icons/logo-openid.png
typo3/sysext/t3skin/images/login/background.png
typo3/sysext/t3skin/images/login/login-submit-background.gif [new file with mode: 0644]
typo3/sysext/t3skin/resources/login.js
typo3/sysext/t3skin/stylesheets/structure/login_screen.css
typo3/sysext/t3skin/stylesheets/visual/login_screen.css
typo3/sysext/t3skin/stylesheets/visual/main_content.css
typo3/sysext/t3skin/templates/login.html

index 6b4d06e..12e8219 100644 (file)
@@ -26,7 +26,7 @@
 
 Ext.onReady(function() {
        // Only use placeholder JavaScript fallback in Internet Explorer
-       if (!Ext.IE) {
+       if (!Ext.isIE) {
                return;
        }
 
index 6272709..6c1fc7b 100644 (file)
@@ -268,9 +268,9 @@ class LoginController {
        public function wrapLoginForm($content) {
                $mainContent = \TYPO3\CMS\Core\Html\HtmlParser::getSubpart($GLOBALS['TBE_TEMPLATE']->moduleTemplate, '###PAGE###');
                if ($GLOBALS['TBE_STYLES']['logo_login']) {
-                       $logo = '<img src="' . htmlspecialchars(($GLOBALS['BACK_PATH'] . $GLOBALS['TBE_STYLES']['logo_login'])) . '" alt="" />';
+                       $logo = '<img src="' . htmlspecialchars(($GLOBALS['BACK_PATH'] . $GLOBALS['TBE_STYLES']['logo_login'])) . '" alt="" class="t3-login-logo" />';
                } else {
-                       $logo = '<img' . \TYPO3\CMS\Backend\Utility\IconUtility::skinImg($GLOBALS['BACK_PATH'], 'gfx/typo3logo.gif', 'width="123" height="34"') . ' alt="" />';
+                       $logo = '<img' . \TYPO3\CMS\Backend\Utility\IconUtility::skinImg($GLOBALS['BACK_PATH'], 'gfx/typo3logo.gif', 'width="123" height="34"') . ' alt="" class="t3-login-logo" />';
                }
                /** @var $browserWarning \TYPO3\CMS\Core\Messaging\FlashMessage */
                $browserWarning = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Messaging\\FlashMessage', $GLOBALS['LANG']->getLL('warning.incompatibleBrowser') . ' ' . $GLOBALS['LANG']->getLL('warning.incompatibleBrowserInternetExplorer'), $GLOBALS['LANG']->getLL('warning.incompatibleBrowserHeadline'), \TYPO3\CMS\Core\Messaging\FlashMessage::ERROR);
diff --git a/typo3/sysext/t3skin/icons/login-icon-key.gif b/typo3/sysext/t3skin/icons/login-icon-key.gif
deleted file mode 100644 (file)
index 03417a7..0000000
Binary files a/typo3/sysext/t3skin/icons/login-icon-key.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/icons/login-icon-key.png b/typo3/sysext/t3skin/icons/login-icon-key.png
new file mode 100644 (file)
index 0000000..2d0fa93
Binary files /dev/null and b/typo3/sysext/t3skin/icons/login-icon-key.png differ
index 5830536..42355bf 100644 (file)
Binary files a/typo3/sysext/t3skin/icons/logo-openid.png and b/typo3/sysext/t3skin/icons/logo-openid.png differ
index a746e30..46eb21d 100644 (file)
Binary files a/typo3/sysext/t3skin/images/login/background.png and b/typo3/sysext/t3skin/images/login/background.png differ
diff --git a/typo3/sysext/t3skin/images/login/login-submit-background.gif b/typo3/sysext/t3skin/images/login/login-submit-background.gif
new file mode 100644 (file)
index 0000000..0e5127e
Binary files /dev/null and b/typo3/sysext/t3skin/images/login/login-submit-background.gif differ
index fae49f5..c9d8d7f 100644 (file)
@@ -121,8 +121,6 @@ TYPO3BackendLogin = {
         * Change to Interface for OpenId login and save the selection to a cookie
         */
        switchToOpenId: function() {
-               $('t3-login-label-username').hide();
-               $('t3-login-label-openId').show();
                $('t3-login-openIdLogo').show();
 
                $('t3-login-form-footer-default').hide();
@@ -142,8 +140,6 @@ TYPO3BackendLogin = {
         * Change to Interface for default login and save the selection to a cookie
         */
        switchToDefault: function() {
-               $('t3-login-label-username').show();
-               $('t3-login-label-openId').hide();
                $('t3-login-openIdLogo').hide();
 
                $('t3-login-form-footer-default').show();
index 5874cfd..e2a5a41 100644 (file)
@@ -3,40 +3,29 @@
  * DO NOT prevent the copyright notice from being shown!
  * According to the GPL license an interactive application must show such a notice on start-up ('If the program is interactive, make it output a short notice... ' - see GPL.txt)
  * Therefore preventing this notice from being properly shown is a violation of the license, regardless of whether you remove it or use the stylesheet to obstruct the display.
-
  */
-body#typo3-index-php {
-       height: auto;
+#typo3-index-php {
+       height: 100%;
        margin: 0;
-       padding-top: 75px;
 }
 
-body#typo3-index-php #t3-login-form-outer {
-       width: 100%;
+#typo3-index-php #t3-login-form {
+       margin: 10% auto 0 auto;
+       width: 430px;
 }
 
-body#typo3-index-php #t3-login-form {
-       margin: 30px 16% 10px;
-       width: 456px;
-}
-
-body#typo3-index-php .t3-headline {
-       height: auto !important;
-       height: 24px;
+#typo3-index-php .t3-headline {
        margin: 0;
-       min-height: 24px;
-       padding-bottom: 2px;
        width: auto;
 }
 
-body#typo3-index-php .t3-headline h2 {
-       float: left;
+#typo3-index-php .t3-headline h2 {
        margin: 0;
-       padding: 0 0 0 40px;
-       vertical-align: middle;
+       padding: 5px 12px 5px 40px;
+       line-height: 24px;
 }
 
-body#typo3-index-php #t3-login-process h2 {
+#typo3-index-php #t3-login-process h2 {
        display: inline;
        padding: 20px 0 20px 50px;
        position: relative;
@@ -44,101 +33,70 @@ body#typo3-index-php #t3-login-process h2 {
        vertical-align: middle;
 }
 
-body#typo3-index-php .t3-headline .t3-login-news-headline {
-       float: left;
-       margin: 0;
+#typo3-index-php .t3-headline .t3-login-news-headline {
        padding: 0 0 0 40px;
        vertical-align: middle;
 }
 
-body#typo3-index-php .t3-headline:after {
-       clear: both;
-       content: ".";
-       display: block;
-       height: 0;
-       visibility: hidden;
-}
-
-body#typo3-index-php .t3-icons {
+#typo3-index-php .t3-icons {
        float: left;
        padding: 3px 5px 0 0;
 }
 
-body#typo3-index-php .t3-login-username {
-       margin-top: 15px;
-}
-
-body#typo3-index-php .t3-login-field {
-       height: 21px;
-       margin: 5px 0 0;
+#typo3-index-php .t3-login-field {
+       margin: 0 0 6px;
        padding: 0;
        position: relative;
+       width: 100%;
 }
 
-body#typo3-index-php .t3-login-field .t3-login-clearInputField {
-       left: 280px;
+#typo3-index-php .t3-login-field .t3-login-clearInputField {
+       cursor: pointer;
        position: absolute;
-       top: 4px;
+       top: 11px;
+       right: 11px;
 }
 
-body#typo3-index-php .t3-login-field .t3-login-alert-capslock {
+#typo3-index-php .t3-login-field .t3-login-alert-capslock {
        left: 307px;
        position: absolute;
        top: 2px;
 }
 
-body#typo3-index-php .t3-login-field label {
-       float: left;
-       padding-right: 10px;
-       width: 90px;
-}
-
-body#typo3-index-php .t3-login-field input {
-       height: 18px;
-       margin: 0;
-       padding: 2px 23px 0 5px;
-       width: 168px;
-}
-
-body#typo3-index-php #t3-login-form-fields {
+#typo3-index-php .t3-login-field input {
+       line-height: 16px;
        margin: 0;
-       padding: 14px 0 5px 30px;
+       padding: 9px 25px 9px 10px;
+       width: 315px;
 }
 
-body#typo3-index-php #t3-login-password-section {
-       clear: left;
-}
-
-body#typo3-index-php #t3-interfaceselector {
-       width: 198px;
+#typo3-index-php #t3-login-interface-section {
+       float: left;
 }
 
-body#typo3-index-php #t3-interfaceselector option {
+#typo3-index-php #t3-interfaceselector option {
        height: 19px;
 }
 
-body#typo3-index-php .t3-login-form-footer {
-       margin: 10px 0 0;
-       vertical-align: middle;
-}
-
-body#typo3-index-php #t3-login-openIdLogo {
+#typo3-index-php #t3-login-openIdLogo {
        position: absolute;
-       right: 0;
-       top: -4px;
 }
 
-body#typo3-index-php .t3-login-openid-disabled .t3-login-form-footer,
-body#typo3-index-php .t3-login-openid-disabled #t3-login-openIdLogo {
+#typo3-index-php .t3-login-openid-disabled .t3-login-form-footer,
+#typo3-index-php .t3-login-openid-disabled #t3-login-openIdLogo {
        display: none;
 }
 
-body#typo3-index-php .t3-login-submit {
-       margin: 15px 0 0 100px;
-       padding: 3px 16px;
+#typo3-index-php .t3-login-field input.t3-login-submit {
+       display: block;
+       float: right;
+       width: auto;
+
+       height: 28px;
+       padding: 0 50px;
 }
 
-body#typo3-index-php .t3-login-error {
+#typo3-index-php .t3-login-error {
        margin: 2px;
        padding: 10px;
 }
@@ -147,55 +105,48 @@ body#typo3-index-php .t3-login-error {
        margin-top: 10px;
 }
 
-body#typo3-index-php div#t3-copyright-notice {
-       margin-top: 15px;
+#typo3-index-php div#t3-copyright-notice {
+       padding-top: 12px;
+       margin-top: 30px;
 }
 
-* html body#typo3-index-php div#t3-copyright-notice {
+* html #typo3-index-php div#t3-copyright-notice {
        height: 35px;
 }
 
-body#typo3-index-php div#t3-copyright-notice img {
+#typo3-index-php div#t3-copyright-notice img {
        display: none;
 }
 
-body#typo3-index-php div#t3-login-image {
-       height: auto;
-       margin: 0 0 30px;
-       padding: 0;
-}
-
-body#typo3-index-php #t3-footer {
-       margin: 40px 16% 10px;
-       width: 456px;
+#typo3-index-php .t3-login-logo {
+       margin-bottom: 30px;
 }
 
-body#typo3-index-php #t3-meta-links {
+#typo3-index-php #t3-meta-links {
        margin-top: 15px;
 }
 
 /**
  * @section login news
  */
-body#typo3-index-php #t3-login-news-outer {
+#typo3-index-php #t3-login-news-outer {
        margin-top: 35px;
 }
 
-body#typo3-index-php #t3-login-news-outer .t3-login-box-body {
-       padding-bottom: 20px;
+#typo3-index-php #t3-login-news-outer .t3-login-box-body {
+       padding-bottom: 14px;
        padding-top: 0;
 }
 
-body#typo3-index-php #t3-login-news-outer #t3-login-news {
+#typo3-index-php #t3-login-news-outer #t3-login-news {
        clear: both;
-       margin: 0 30px;
 }
 
-body#typo3-index-php #t3-login-news-outer #t3-login-news .t3-login-news-item {
+#typo3-index-php #t3-login-news-outer #t3-login-news .t3-login-news-item {
        padding-top: 20px;
 }
 
-body#typo3-index-php #t3-login-news-outer #t3-login-news dd {
+#typo3-index-php #t3-login-news-outer #t3-login-news dd {
        clear: both;
        margin-left: 0;
        padding: 0;
@@ -204,13 +155,13 @@ body#typo3-index-php #t3-login-news-outer #t3-login-news dd {
 /**
  * @section logout
  */
-body#typo3-index-php .t3-login-logout-form .t3-username-current {
+#typo3-index-php .t3-login-logout-form .t3-username-current {
        float: left;
        height: 21px;
        vertical-align: middle;
 }
 
-body#typo3-index-php .t3-login-logout-form div.t3-login-label {
+#typo3-index-php .t3-login-logout-form div.t3-login-label {
        float: left;
        padding-right: 10px;
        width: 70px;
@@ -220,12 +171,14 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
  * @section erros/warnings
  */
 .t3-login-alert {
-       padding: 15px;
+       padding: 12px;
+       margin-bottom: 6px;
 }
 
 .t3-login-alert h2 {
        margin: 0;
        padding: 0 10px 0 30px;
+       line-height: 16px;
 }
 
 .t3-login-alert p {
@@ -238,7 +191,7 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
  */
 
 .t3-login-box-body {
-       padding: 10px;
+       padding: 25px 40px 20px 40px;
 }
 
 .t3-login-box-shadow {
index 46d2a91..a5e7fca 100644 (file)
  * Therefore preventing this notice from being properly shown is a violation of the license, regardless of whether you remove it or use the stylesheet to obstruct the display.
 
  */
-body#typo3-index-php {
-       background: #4f4f4f;
-       background-attachment: fixed;
+#typo3-index-php {
+       background-color: #494949;
        background-image: url('../../images/login/background.png');
        background-repeat: repeat-x;
 }
 
-body#typo3-index-php #t3-login-form {
-       color: #606060;
-       font-size: 11px;
-       text-align: left;
-}
-
-body#typo3-index-php .t3-headline {
-       background: #585858;
+#typo3-index-php .t3-headline {
+       background-color: #4f4f4f;
 }
 
-body#typo3-index-php .t3-headline h2 {
-       background: transparent no-repeat 10px 5px;
-       background-image: url('../../icons/login-icon-key.gif');
+#typo3-index-php .t3-headline h2 {
+       background: transparent url('../../icons/login-icon-key.png') no-repeat 12px 8px;
        color: #fff;
-       font-size: 11px !important;
-       line-height: 24px;
+       font-size: 12px;
 }
 
-body#typo3-index-php #t3-login-process {
+#typo3-index-php #t3-login-process {
        text-align: center;
 }
 
-body#typo3-index-php #t3-login-process h2 {
+#typo3-index-php #t3-login-process h2 {
        background: url('../../icons/login-submit-progress.gif') no-repeat 10px center;
        font-size: 11px !important;
 }
 
-body#typo3-index-php .t3-headline .t3-login-news-headline {
+#typo3-index-php .t3-headline .t3-login-news-headline {
        background: transparent url('../../icons/login-icon-news.gif') no-repeat 10px center;
        color: #fff;
        font-size: 11px !important;
        line-height: 24px;
 }
 
-body#typo3-index-php .t3-login-field {
-       line-height: 18px;
-}
-
-body#typo3-index-php .t3-login-field input {
+#typo3-index-php .t3-login-field input {
        background: #fff;
-       border: 1px solid #7c7c7c;
-       border-radius: 1px;
-       -moz-border-radius: 1px;
-       box-shadow: 0 1px 1px #cbcbcb inset;
-       -moz-box-shadow: 0 1px 1px #cbcbcb inset;
-       -webkit-box-shadow: 0 1px 1px #cbcbcb inset;
-       color: #000;
-       font-size: 11px;
-       line-height: 19px;
-       -webkit-appearance: textfield;
-       
+       border: none;
+       color: #606060;
+       font-size: 12px;
 }
 
-body#typo3-index-php #t3-login-form-fields {
+#typo3-index-php #t3-login-form-fields {
        font-size: 11px;
 }
 
-body#typo3-index-php #t3-interfaceselector {
+#typo3-index-php #t3-interfaceselector {
        font-size: 11px;
 }
 
-body#typo3-index-php .t3-login-form-footer {
+#typo3-index-php .t3-login-form-footer {
        text-align: right;
 }
 
-body#typo3-index-php .t3-login-form-footer a {
+#typo3-index-php .t3-login-form-footer a {
        cursor: pointer;
 }
 
-body#typo3-index-php .t3-login-form-footer,
-body#typo3-index-php .t3-login-form-footer a.switchToOpenId,
-body#typo3-index-php dl#t3-login-news a {
+#typo3-index-php .t3-login-form-footer,
+#typo3-index-php .t3-login-form-footer a.switchToOpenId,
+#typo3-index-php dl#t3-login-news a {
        color: #888;
        font-size: 10px;
 }
 
-body#typo3-index-php .t3-login-form-footer a.switchToOpenId,
-body#typo3-index-php dl#t3-login-news a {
+#typo3-index-php .t3-login-form-footer a.switchToOpenId,
+#typo3-index-php dl#t3-login-news a {
        text-decoration: underline;
 }
 
-body#typo3-index-php .t3-login-form-footer a.switchToOpenId:hover,
-body#typo3-index-php dl#t3-login-news a:hover {
+#typo3-index-php .t3-login-form-footer a.switchToOpenId:hover,
+#typo3-index-php dl#t3-login-news a:hover {
        color: #333;
 }
 
-body#typo3-index-php .t3-login-submit {
-       text-align: left;
+#typo3-index-php input.t3-login-submit {
+       background-color: #ff8600;
+       background-image: url('../../images/login/login-submit-background.gif');
+       background-image: linear-gradient(center top, #fe9500 0%, #cf6610 100%);
+       background-image: -moz-linear-gradient(center top, #fe9500 0%, #cf6610 100%);
+       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #fe9500), color-stop(1, #cf6610));
+       background-repeat: repeat-x;
+       border-top: 1px solid #ffb955;
+       border-left: 1px solid #E69036;
+       text-shadow: 0px -1px 0px rgba(149, 81, 5, 0.6);
+       color: #fff;
 }
 
-body#typo3-index-php div#t3-copyright-notice {
+#typo3-index-php div#t3-copyright-notice {
+       border-top: 1px solid #565655;
        font-weight: normal;
        color: #797878;
 }
 
-body#typo3-index-php div#t3-copyright-notice a {
+#typo3-index-php div#t3-copyright-notice a {
        color: #797878;
        text-decoration: underline;
 }
 
-body#typo3-index-php div#t3-copyright-notice a:hover {
+#typo3-index-php div#t3-copyright-notice a:hover {
        color: #b0b0b0;
 }
 
-body#typo3-index-php div#t3-login-image {
+#typo3-index-php div#t3-login-image {
        text-align: left;
 }
 
-body#typo3-index-php #t3-footer {
-       border-top: 1px solid #5c5c5c;
-       font-size: 10px;
-}
-
-body#typo3-index-php #t3-meta-links {
+#typo3-index-php #t3-meta-links {
        color: #797878;
 }
 
-body#typo3-index-php #t3-meta-links a {
+#typo3-index-php #t3-meta-links a {
        color: #797878;
        text-decoration: underline;
 }
 
-body#typo3-index-php #t3-meta-links a.t3-login-link-donate {
+#typo3-index-php #t3-meta-links a.t3-login-link-donate {
        font-weight: bold;
 }
 
-body#typo3-index-php #t3-meta-links a:hover {
+#typo3-index-php #t3-meta-links a:hover {
        color: #b0b0b0;
 }
 
 /**
  * @section login news
  */
-body#typo3-index-php #t3-login-news-outer #t3-login-news dt {
+#typo3-index-php .shadow {
+       -webkit-box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.3);
+       -moz-box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.3);
+       box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.3);
+}
+
+#typo3-index-php #t3-login-news-outer #t3-login-news dt {
        font-weight: bold;
 }
 
-body#typo3-index-php #t3-login-news-outer #t3-login-news dd {
+#typo3-index-php #t3-login-news-outer #t3-login-news dd {
        border: 0;
 }
 
 /**
  * @section logout
  */
-body#typo3-index-php .t3-login-logout-form .t3-username-current,
-body#typo3-index-php .t3-login-logout-form div.t3-login-label {
+#typo3-index-php .t3-login-logout-form .t3-username-current,
+#typo3-index-php .t3-login-logout-form div.t3-login-label {
        color: #606060;
        line-height: 21px;
 }
@@ -168,7 +158,6 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
 .t3-login-alert h2 {
        background: none;
        font-size: 14px;
-       line-height: 18px;
 }
 
 .t3-login-alert p {
@@ -196,7 +185,7 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
 }
 
 #t3-nocookies-ignore {
-       text-align: center;
+       padding-left: 30px;
 }
 
 .t3-login-alert-warning {
@@ -218,10 +207,9 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
  * @section box layout
  */
 .t3-login-box-body {
-       background-color: #c9c9c9;
-       background-image: url('../../images/backgrounds/login-box.png');
-       background-image: linear-gradient(center top, #ebebeb 0%, #c9c9c9 100%);
-       background-image: -moz-linear-gradient(center top, #ebebeb 0%, #c9c9c9 100%);
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #ebebeb), color-stop(1, #c9c9c9));
+       background-color: #c2c2c2;
+       background-image: linear-gradient(center top, #e2e2e2 0%, #c2c2c2 100%);
+       background-image: -moz-linear-gradient(center top, #e2e2e2 0%, #c2c2c2 100%);
+       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #e2e2e2), color-stop(1, #c2c2c2));
        background-repeat: repeat-x;
 }
\ No newline at end of file
index 4d54856..4ea9d5c 100644 (file)
@@ -83,6 +83,27 @@ strong {
        font-weight: bold;
 }
 
+.clearfix:after {
+       content: ".";
+       display: block;
+       clear: both;
+       visibility: hidden;
+       line-height: 0;
+       height: 0;
+}
+
+.clearfix {
+       display: inline-block;
+}
+
+html[xmlns] .clearfix {
+       display: block;
+}
+
+* html .clearfix {
+       height: 1%;
+}
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Background color classes
 - - - - - - - - - - - - - - - - - - - - - */
index 14bdaa9..5183468 100644 (file)
@@ -1,40 +1,38 @@
 <!-- ###PAGE### begin -->
-<div id="t3-login-form-outer" ###CSS_CLASSES###>
-       <div id="t3-login-form">
-               <div id="t3-login-image">
-                       ###LOGO###
+<div id="t3-login-form" ###CSS_CLASSES###>
+       ###LOGO###
+
+       <div class="shadow">
+               <div class="t3-headline">
+                       <h2>###HEADLINE###</h2>
                </div>
-               <div id="t3-login-form-inner" class="t3-login-box">
-                       <div class="shadow-box-top-428"></div>
-                       <div class="t3-headline">
-                               <h2>###HEADLINE###</h2>
-                       </div>
-                       <div class="t3-login-box-body">
-                               <noscript>
-                                       <div id="t3-noscript-error" class="t3-login-alert t3-login-alert-error">
-                                               <h2>###ERROR_JAVASCRIPT###</h2>
-                                       </div>
-                               </noscript>
-                               <div id="t3-nocookies-error" class="t3-login-alert t3-login-alert-warning" style="display:none">
-                                       <h2>###ERROR_COOKIES###</h2>
-                                       <div id="t3-nocookies-ignore"><a href="#"  onclick="TYPO3BackendLogin.hideCookieWarning()">###ERROR_COOKIES_IGNORE###</a></div>
-                               </div>
-                               <!--[if lte IE 6]>
-                                       ###WARNING_BROWSER_INCOMPATIBLE###
-                               <![endif]-->
-                               <div id="t3-login-process" style="display: none">
-                                       <h2>###LOGIN_PROCESS###</h2>
+
+               <div class="t3-login-box-body">
+                       <noscript>
+                               <div id="t3-noscript-error" class="t3-login-alert t3-login-alert-error">
+                                       <h2>###ERROR_JAVASCRIPT###</h2>
                                </div>
-                               ###FORM###
-                               <div class="t3-login-bottomBorder"></div>
-                               <script type="text/javascript" src="sysext/t3skin/resources/login.js"></script>
+                       </noscript>
+                       <div id="t3-nocookies-error" class="t3-login-alert t3-login-alert-warning" style="display:none">
+                               <h2>###ERROR_COOKIES###</h2>
+                               <div id="t3-nocookies-ignore"><a href="#"  onclick="TYPO3BackendLogin.hideCookieWarning()">###ERROR_COOKIES_IGNORE###</a></div>
+                       </div>
+                       <!--[if lte IE 6]>
+                       ###WARNING_BROWSER_INCOMPATIBLE###
+                       <![endif]-->
+                       <div id="t3-login-process" style="display: none">
+                               <h2>###LOGIN_PROCESS###</h2>
                        </div>
-                       <div class="shadow-box-bottom-424"></div>
+
+                       ###FORM###
+
                </div>
-               ###NEWS###
        </div>
-</div>
-<div id="t3-footer">
+       <script type="text/javascript" src="sysext/t3skin/resources/login.js"></script>
+       <script type="text/javascript" src="jsfunc.placeholder.js""></script>
+
+       ###NEWS###
+
        <div id="t3-copyright-notice">
                ###COPYRIGHT###
        </div>
@@ -47,7 +45,7 @@
 <!-- ###PAGE### end -->
 
 <!-- ###LOGIN_NEWS### begin -->
-<div id="t3-login-news-outer" class="t3-login-box">
+<div id="t3-login-news-outer" class="shadow">
        <div class="t3-headline">
                <h2 class="t3-login-news-headline">###NEWS_HEADLINE###</h2>
        </div>
 <!-- ###LOGIN_ERROR### end -->
 
 <div id="t3-login-form-fields" class="###CSS_OPENIDCLASS###">
-       <div class="t3-login-username t3-login-field">
-               <label for="t3-username" class="t3-username" id="t3-login-label-username">
-                       ###LABEL_USERNAME###
-               </label>
-               <label for="t3-username" class="t3-username" id="t3-login-label-openId" style="display: none">
-                       ###LABEL_OPENID###
-               </label>
-               <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" class="t3-username" tabindex="1" />
+       <div class="t3-login-field">
+               <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" placeholder="###LABEL_USERNAME###" class="t3-username" />
+
                <div class="t3-login-clearInputField">
                        <a id="t3-username-clearIcon" style="display: none;">
                                <img src="sysext/t3skin/icons/common-input-clear.png" alt="###CLEAR###" title="###CLEAR###" />
                        </a>
                </div>
-               <div id="t3-login-openIdLogo" style="display: none">
-                       <img src="sysext/t3skin/icons/logo-openid.png" alt="OpenID" title="OpenID" />
-               </div>
                <div class="t3-login-alert-capslock" id="t3-username-alert-capslock" style="display: none">
                        <img src="sysext/t3skin/icons/login_capslock.gif" alt="###ERROR_CAPSLOCK###" title="###ERROR_CAPSLOCK###" />
                </div>
        </div>
        <div class="t3-login-password t3-login-field" id="t3-login-password-section">
-               <label for="t3-password" class="t3-password">
-                       ###LABEL_PASSWORD###
-               </label>
-               <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" class="t3-password" tabindex="2" />
+               <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" placeholder="###LABEL_PASSWORD###" class="t3-password" />
                <div class="t3-login-clearInputField">
                        <a id="t3-password-clearIcon" style="display: none;">
                                <img src="sysext/t3skin/icons/common-input-clear.png" alt="###CLEAR###" title="###CLEAR###" />
                        <img src="sysext/t3skin/icons/login_capslock.gif" alt="###ERROR_CAPSLOCK###" title="###ERROR_CAPSLOCK###" />
                </div>
        </div>
-       <!-- ###INTERFACE_SELECTOR### begin -->
-       <div class="t3-login-interface t3-login-field" id="t3-login-interface-section">
-               <label for="t3-interfaceselector" class="t3-interface-selector">
-                       ###LABEL_INTERFACE###
-               </label>
-               ###VALUE_INTERFACE###
+       <div class="t3-login-field clearfix">
+               <!-- ###INTERFACE_SELECTOR### begin -->
+               <div class="t3-login-interface" id="t3-login-interface-section">
+                       ###VALUE_INTERFACE###
+                       </div>
+               <!-- ###INTERFACE_SELECTOR### end -->
+
+               <div id="t3-login-openIdLogo" style="display: none">
+                       <img src="sysext/t3skin/icons/logo-openid.png" alt="OpenID" title="OpenID" />
+               </div>
+
+               <input type="submit" name="commandLI" id="t3-login-submit" value="###VALUE_SUBMIT###" class="t3-login-submit" />
        </div>
-       <!-- ###INTERFACE_SELECTOR### end -->
-       <input type="submit" name="commandLI" id="t3-login-submit" value="###VALUE_SUBMIT###" class="t3-login-submit" tabindex="4" />
+
        <div class="t3-login-form-footer">
                <div id="t3-login-form-footer-default">
                        <a id="t3-login-switchToOpenId" class="switchToOpenId">###LABEL_SWITCHOPENID###</a>
                <input type="hidden" name="p_field" value="" /><input type="submit" name="commandLO" value="###VALUE_SUBMIT###" class="t3-login-submit" />
        </div>
 </div>
-<!-- ###LOGOUT_FORM### end -->
+<!-- ###LOGOUT_FORM### end -->
\ No newline at end of file