Styling the installation (Part 1)
authorLuzifr <szekely@woltlab.com>
Fri, 9 Sep 2011 15:33:23 +0000 (17:33 +0200)
committerLuzifr <szekely@woltlab.com>
Fri, 9 Sep 2011 15:33:27 +0000 (17:33 +0200)
This is a first try and work in progress! Be aware that the installation
panels may look very ugly in the next time … ;-)

wcfsetup/install.php
wcfsetup/setup/template/footer.tpl
wcfsetup/setup/template/header.tpl
wcfsetup/setup/template/stepConfigureDB.tpl

index 919f4cfe4ad552021edaf160618e0e99c7d5f93f..aaa1d44a50a6de5ad704945822031eb0395ec659 100644 (file)
@@ -81,39 +81,41 @@ class SystemException extends \Exception implements IPrintableException {
 <html>
 <head>
 <title>Fatal error: <?php echo htmlspecialchars($this->getMessage()); ?></title>
-<style type="text/css">
-body {
-       font-family: Verdana, Helvetica, sans-serif;
-       font-size: 0.8em;
-}
-div {
-       border: 1px outset lightgrey;
-       padding: 3px;
-       background-color: lightgrey;
-}
-
-div div {
-       border: 1px inset lightgrey;
-       padding: 4px;
-}
 
-h1 {
-       background-color: #154268;
-       padding: 4px;
-       color: #fff;
-       margin: 0 0 3px 0;
-       font-size: 1.15em;
-}
-h2 {
-       font-size: 1.1em;
-       margin-bottom: 0;
-}
-
-pre, p {
-       margin: 0;
-}
+<style type="text/css">
+       body {
+               font-family: Verdana, Helvetica, sans-serif;
+               font-size: 0.8em;
+       }
+       div {
+               border: 1px outset lightgrey;
+               padding: 3px;
+               background-color: lightgrey;
+       }
+       
+       div div {
+               border: 1px inset lightgrey;
+               padding: 4px;
+       }
+       
+       h1 {
+               background-color: #154268;
+               padding: 4px;
+               color: #fff;
+               margin: 0 0 3px 0;
+               font-size: 1.15em;
+       }
+       h2 {
+               font-size: 1.1em;
+               margin-bottom: 0;
+       }
+       
+       pre, p {
+               margin: 0;
+       }
 </style>
 </head>
+
 <body>
        <div>
                <h1>Fatal error: <?php echo htmlspecialchars($this->getMessage()); ?></h1>
@@ -714,7 +716,7 @@ if (isset($_GET['showImage'])) {
        exit;
 }
 
-// check whether setup files already unzipped
+// check whether setup files are already unzipped
 if (!file_exists(TMP_DIR . 'install/files/lib/system/WCFSetup.class.php')) {
        // try to unzip all setup files into temp folder
        $tar = new Tar(SETUP_FILE);
index c73018d9d3c568876240c7a53d176310506b1914..671bdf950e227c4ec6950aad62f68a78216b22cd 100644 (file)
@@ -2,5 +2,6 @@
                        <span>Copyright &copy; 2001-2011 WoltLab&reg; GmbH</span>
                </div>
        </div>
+       <a id="bottom"></a>
 </body>
-</html>
\ No newline at end of file
+</html>
index 0edb4dbf15dbb5edf68fc50ec4a3981001441da4..493ed5d3f38407faf254fbee7e66af8692735f6a 100644 (file)
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" dir="{@$__wcf->getLanguage()->getPageDirection()}" xml:lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
-       <head>
-               <title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang}</title>
-               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-               <style type="text/css">
-                       /*<![CDATA[*/
-                       body {
-                               font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 
-                               color: #333;
-                               font-size: .82em;
-                               margin: 0;
-                               padding: 0;
-                               background-color: #eee;
-                               background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png{else}install.php?showImage=setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-                               background-repeat: repeat-y;
-                               background-position: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-                       }
-                       
-                       .page {
-                               background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg{else}install.php?showImage=setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg&tmpFilePrefix={@$tmpFilePrefix}{/if});
-                               background-repeat: no-repeat;
-                               background-color: #fff;
-                               padding: 153px 40px 20px 40px;
-                               width: 720px;
-                       }
-                       
-                       .inner {
-                               padding: 10px 20px;
-                       }
-                       
-                       h1 {
-                               color: #164369;
-                               text-shadow: 0 2px 3px #bbb;
-                               font-size: 1.9em;
-                               font-weight: normal;
-                               margin: 5px 0;
-                               padding: 5px 0;
-                       }
-                       
-                       h2 {
-                               color: #164369;
-                               font-size: 1.4em;
-                               font-weight: bold;
-                               margin: 0;
-                               padding-top: 5px;
-                       }
-                       
-                       h3 {
-                               font-size: 1.3em;
-                               font-weight: bold;
-                               color: #666;
-                               margin: 0;
-                               padding: 2px 0 10px 0;
-                       }
-                       
-                       .info, .success, .warning, .error, .help {
-                               -webkit-border-radius: 5px;
-                               -moz-border-radius: 5px;
-                       }
-                       
-                       fieldset {
-                               font-size: .82em;
-                               border: 1px solid #8da4b7;
-                               margin-bottom: 10px;
-                               padding: 0;
-                               -webkit-border-radius: 5px;
-                               -moz-border-radius: 5px;
-                       }
-                       
-                       legend {
-                               color: #487397;
-                               font-size: 1em;
-                               margin: 0 10px;
-                               padding: 0 4px;
-                       }
-                       
-                       fieldset p, fieldset div {
-                               margin: 0;
-                               padding: 0 0 5px 0;
-                       }
-                                               
-                       fieldset ul {
-                               list-style: none;
-                               margin: 0;
-                               padding: 0;
-                       }
-                               
-                       fieldset ul li {
-                               padding-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 3%;
-                               float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-                               width: 30%;
-                       }
-                       
-                       hr {
-                               color: #8da4b7;
-                               background-color: #8da4b7;
-                               border: 0;
-                               margin: 10px 0;
-                               padding: 0;
-                               height: 1px;
-                               width: 100%;
-                               position: relative;
-                               clear: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-                       }
-                       
-                       form {
-                               padding: 0;
-                               margin: 0;
-                       }
-                       
-                       textarea, select, input[type="text"], input[type="password"] {
-                               background-color: #fafafa;
-                               border-width: 1px;
-                               border-style: solid;
-                               border-color: #666 #999 #ccc #999;
-                               background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-                               background-position: left top;
-                               background-repeat: repeat-x;
-                               min-height: 13px;
-                       }
-                       
-                       textarea, input[type="text"], input[type="password"] {
-                               width: 100%;
-                       }
+<!DOCTYPE html>
+<html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
+<head>
+       <meta charset="utf-8" />
+       <title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang}</title>
+       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+       
+       <!-- Stylesheets -->
+       <style type="text/css">
+               /*<![CDATA[*/
+               body {
+                       font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 
+                       color: #333;
+                       font-size: .82em;
+                       margin: 0;
+                       padding: 0;
+                       background-color: #eee;
+                       background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png{else}install.php?showImage=setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
+                       background-repeat: repeat-y;
+                       background-position: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+               }
                
-                       textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus {
-                               background-color: #fff9f4;
-                               border: 1px solid #fa2;
-                               background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-                               background-repeat: repeat-x;
-                               outline: 0;
-                       }
-                       
-                       textarea, select, input[type="text"], input[type="password"] {
-                               padding: 2px;
-                               -webkit-border-radius: 3px;
-                               -moz-border-radius: 3px;
-                       }
-                                               
-                       label {
-                               padding-bottom: 2px;
-                               display: block;
-                       }
-                       
-                       .setupIcon {
-                               margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 30px;
-                               float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-                       }
-                       
-                       .nextButton {
-                               float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if};
-                       }
-                       
-                       .copyright {
-                               font-size: .8em;
-                       }
-                       
-                       .left {
-                               float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-                       }
-                       
-                       .left, .right {
-                               font-weight: bold;
-                               display: block;
-                       }
-                       
-                       .right {
-                               margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if}: 48%;
-                               width: 48%;
-                       }
-                       
-                       .disabled {
-                               color: #b2b2b2;
-                       }
-                       
-                       .error {
-                               color: #c00;
-                               border: 1px solid #c00;
-                               background-color: #fee;
-                               padding: 4px 10px;
-                       }
-                       
-                       .errorField {
-                               color: #c00;
-                       }
-                       
-                       .errorField .inputText, .errorField select, .errorField textarea {
-                               border: 1px solid #c00;
-                               background-color: #fee;
-                       }
-                       
-                       .progress {
-                               border: 1px solid #b2b2b2;
-                               margin: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}0 0 25px 128px{else}0 128px 25px 0{/if};
-                               padding: 1px;
-                               width: 300px;
-                               height: 16px;
-                               -webkit-border-radius: 3px;
-                               -moz-border-radius: 3px;
-                       }
-                       
-                       .progressBar {
-                               background-color: #f1f1f1;
-                               border-bottom: 8px solid #ddd;
-                               height: 8px;
-                               font-size: 7px;
-                               -webkit-border-radius: 1px;
-                               -moz-border-radius: 1px;
-                       }
-                       
-                       .progressText {
-                               color: #333;
-                               text-shadow: 0 1px 1px #fff;
-                               font-size: .75em;
-                               text-align: center;
-                               margin-top: -15px;
-                       }
-                       
-                       #wcfUrl {
-                               text-decoration: underline;
-                               background: transparent;
-                               border: none;
-                               padding: 0;
-                       }
-                                               
-                       /*]]>*/
-               </style>
-               <!--[if lt IE 7]>
-                       <style type="text/css">
-                               .page {
-                                       width: 800px;
-                               }
-                               .progressText {
-                                       margin-top: -16px;
-                               }
-                       </style>
-               <![endif]-->
-               <!--[if IE]>
-                       <style type="text/css">
-                               hr {
-                                       margin: 0;
-                               }
-                               fieldset p, fieldset div {
-                                       min-height: 0;
-                               }
-                       </style>
-               <![endif]-->
-       </head>
+               .page {
+                       background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg{else}install.php?showImage=setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg&tmpFilePrefix={@$tmpFilePrefix}{/if});
+                       background-repeat: no-repeat;
+                       background-color: #fff;
+                       padding: 153px 40px 20px 40px;
+                       width: 720px;
+               }
+               
+               h1 {
+                       color: #164369;
+                       text-shadow: 0 2px 3px #bbb;
+                       font-size: 1.9em;
+                       font-weight: normal;
+                       margin: 5px 0;
+                       padding: 5px 0;
+               }
+               
+               h2 {
+                       color: #164369;
+                       font-size: 1.4em;
+                       font-weight: bold;
+                       margin: 0;
+                       padding-top: 5px;
+               }
+               
+               .info, .success, .warning, .error, .help {
+                       -webkit-border-radius: 5px;
+                       -moz-border-radius: 5px;
+               }
+               
+               fieldset {
+                       font-size: .82em;
+                       border: 1px solid #8da4b7;
+                       margin-bottom: 10px;
+                       padding: 0;
+                       -webkit-border-radius: 5px;
+                       -moz-border-radius: 5px;
+               }
+               
+               legend {
+                       color: #487397;
+                       font-size: 1em;
+                       margin: 0 10px;
+                       padding: 0 4px;
+               }
+               
+               fieldset p, fieldset div {
+                       margin: 0;
+                       padding: 0 0 5px 0;
+               }
+                                       
+               fieldset ul {
+                       list-style: none;
+                       margin: 0;
+                       padding: 0;
+               }
+                       
+               fieldset ul li {
+                       padding-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 3%;
+                       float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+                       width: 30%;
+               }
+               
+               form {
+                       padding: 0;
+                       margin: 0;
+               }
+               
+               textarea, select, input[type="text"], input[type="password"] {
+                       background-color: #fafafa;
+                       border-width: 1px;
+                       border-style: solid;
+                       border-color: #666 #999 #ccc #999;
+                       background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
+                       background-position: left top;
+                       background-repeat: repeat-x;
+                       min-height: 13px;
+               }
+               
+               textarea, input[type="text"], input[type="password"] {
+                       width: 100%;
+               }
+       
+               textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus {
+                       background-color: #fff9f4;
+                       border: 1px solid #fa2;
+                       background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
+                       background-repeat: repeat-x;
+                       outline: 0;
+               }
+               
+               textarea, select, input[type="text"], input[type="password"] {
+                       padding: 2px;
+                       -webkit-border-radius: 3px;
+                       -moz-border-radius: 3px;
+               }
+                                       
+               label {
+                       padding-bottom: 2px;
+                       display: block;
+               }
+               
+               .setupIcon {
+                       margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 30px;
+                       float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+               }
+               
+               .nextButton {
+                       float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if};
+               }
+               
+               .copyright {
+                       font-size: .8em;
+               }
+               
+               .left {
+                       float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+               }
+               
+               .left, .right {
+                       font-weight: bold;
+                       display: block;
+               }
+               
+               .right {
+                       margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if}: 48%;
+                       width: 48%;
+               }
+               
+               .disabled {
+                       color: #b2b2b2;
+               }
+               
+               .error {
+                       color: #c00;
+                       border: 1px solid #c00;
+                       background-color: #fee;
+                       padding: 4px 10px;
+               }
+               
+               .errorField {
+                       color: #c00;
+               }
+               
+               .errorField .inputText, .errorField select, .errorField textarea {
+                       border: 1px solid #c00;
+                       background-color: #fee;
+               }
+                                       
+               /*]]>*/
+       </style>
+       <!-- /Stylesheets -->
+</head>
+
 <body>
+       <a id="top"></a>
        <div class="page">
+               <!-- ToDo: new images & icons 
                <img class="setupIcon" src="{if 'RELATIVE_WCF_DIR'|defined}{@RELATIVE_WCF_DIR}acp/images/setupIconXL.jpg{else}install.php?showImage=setupIconXL.jpg&amp;tmpFilePrefix={@$tmpFilePrefix}{/if}" alt="" />
+               -->
                <h1>{lang}wcf.global.title{/lang}</h1>
                <div class="progress">
                        <div class="progressBar" style="width: {@300*$progress/100|round:0}px"></div>
                        <div class="progressText">{lang}wcf.global.progressBar{/lang}</div>
                </div>
-               <hr />
-       
-       
\ No newline at end of file
+                       
\ No newline at end of file
index 04d2e40e7d1fa1284532e24310656168a6737cb3..ac3cc03d771c4227ed1365263b4b9d99da78b637 100644 (file)
        <fieldset>
                <legend>{lang}wcf.global.configureDB.accessData{/lang}</legend>
                
-               <div class="inner">
+               <div>
                        <div>
                                <label for="dbClass">{lang}wcf.global.configureDB.class{/lang}</label>
-                               <select name="dbClass" id="dbClass">
+                               <select id="dbClass" name="dbClass">
                                        {foreach from=$availableDBClasses key=dbClassName item=availableDBClass}
                                                <option value="{@$availableDBClass.class}"{if $availableDBClass.class == $dbClass} selected="selected"{/if}>{lang}wcf.global.configureDB.class.{@$dbClassName}{/lang}</option>
                                        {/foreach}
 
                        <div>
                                <label for="dbHost">{lang}wcf.global.configureDB.host{/lang}</label>
-                               <input type="text" class="inputText" id="dbHost" name="dbHost" value="{$dbHost}" style="width: 100%;" />
+                               <input type="text" id="dbHost" name="dbHost" value="{$dbHost}" class="long" />
                        </div>
                        
                        <div>
                                <label for="dbUser">{lang}wcf.global.configureDB.user{/lang}</label>
-                               <input type="text" class="inputText" id="dbUser" name="dbUser" value="{$dbUser}" style="width: 100%;" />
+                               <input type="text" id="dbUser" name="dbUser" value="{$dbUser}" class="long" />
                        </div>
                        
                        <div>
                                <label for="dbPassword">{lang}wcf.global.configureDB.password{/lang}</label>
-                               <input type="password" class="inputText" id="dbPassword" name="dbPassword" value="{$dbPassword}" style="width: 100%;" />
+                               <input type="password" id="dbPassword" name="dbPassword" value="{$dbPassword}" class="long" />
                        </div>
                        
                        <div>
                                <label for="dbName">{lang}wcf.global.configureDB.database{/lang}</label>
-                               <input type="text" class="inputText" id="dbName" name="dbName" value="{$dbName}" style="width: 100%;" />
+                               <input type="text" id="dbName" name="dbName" value="{$dbName}" class="long"  />
                        </div>
                        
                        <div>
                                <label for="dbNumber">{lang}wcf.global.configureDB.number{/lang}</label>
-                               <input type="text" class="inputText" id="dbNumber" name="dbNumber" value="{$dbNumber}" style="width: 100%;" />
+                               <input type="text" id="dbNumber" name="dbNumber" value="{$dbNumber}" class="long" />
                        </div>
                        
                        {if $conflictedTables|isset}
@@ -62,7 +62,7 @@
        </fieldset>
        
        <div class="nextButton">
-               <input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+               <input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
                <input type="hidden" name="send" value="1" />
                <input type="hidden" name="step" value="{@$nextStep}" />
                <input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
@@ -75,4 +75,4 @@
        </div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}