First attempt to style the main content area.

- Fixed some HTML5 issues (menu -> nav and more)
- Changed some element
's style
- Note: Only the "Options"-section has been styled for now. Th
e rest of the content pages remain looking ugly! ;-)

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 88224518e8480cdd5fc1a3d8ffc84035220d29e8..98f9bb0fc67c32a840f373503a4c7b3d5e24513b 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -24,7 +24,7 @@ WCF.ACP.Menu.prototype = {
         * @param       array           activeMenuItems\r
         */\r
        init: function(activeMenuItems) {\r
-               this._headerNavigation = $('menu#mainMenu');\r
+               this._headerNavigation = $('nav#mainMenu');\r
                this._sidebarNavigation = $('nav#sidebarMenu');\r
                \r
                this._prepareElements(activeMenuItems);\r
@@ -36,12 +36,12 @@ WCF.ACP.Menu.prototype = {
        _prepareElements: function(activeMenuItems) {\r
                this._headerNavigation.find('li').removeClass('activeMenuItem');\r
                \r
-               this._sidebarNavigation.find('div.menuContainer h1').each($.proxy(function(index, menuHeader) {\r
+               this._sidebarNavigation.find('div h1').each($.proxy(function(index, menuHeader) {\r
                        $(menuHeader).click($.proxy(this._toggleItem, this));\r
                }, this));\r
                \r
                // close all navigation groups\r
-               this._sidebarNavigation.find('div.menuContainer div').each(function() {\r
+               this._sidebarNavigation.find('div div').each(function() {\r
                        $(this).hide();\r
                });\r
                \r

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 248d95f816c088392a27b6b3ad94706b645f377a..77dbace201172faf11629bc8e5f06df4a6171e2b 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -40,6 +40,14 @@ a:hover {
        text-decoration: underline;\r
 }\r
 \r
+section#content a {\r
+       color: #999;\r
+}\r
+\r
+section#content a:hover {\r
+       color: #333;\r
+}\r
+\r
 .invisible {\r
        position: absolute;\r
        left: -9000px;\r
@@ -62,7 +70,7 @@ header.pageHeader {
 \r
 /* Top Menu */\r
 \r
-header.pageHeader menu.topMenu {\r
+header.pageHeader nav.topMenu {\r
        position: absolute;\r
        top: 0;\r
        right: 0;\r
@@ -78,21 +86,21 @@ header.pageHeader menu.topMenu {
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
 }\r
 \r
-header.pageHeader menu.topMenu > div {\r
+header.pageHeader nav.topMenu > div {\r
        padding: 5px 23px 3px;\r
        \r
 }\r
 \r
-header.pageHeader menu.topMenu ul {\r
+header.pageHeader nav.topMenu ul {\r
        \r
 }\r
 \r
-header.pageHeader menu.topMenu ul li, header.pageHeader menu.topMenu ul li a {\r
+header.pageHeader nav.topMenu ul li, header.pageHeader nav.topMenu ul li a {\r
        color: #69c;\r
        text-shadow: 0 -1px 0 #000;\r
 }\r
 \r
-header.pageHeader menu.topMenu ul li a:hover {\r
+header.pageHeader nav.topMenu ul li a:hover {\r
        color: #fff;\r
 }\r
 \r
@@ -120,18 +128,18 @@ header.pageHeader div#logo a:hover {
 header.pageHeader div#logo img {\r
        position: absolute;\r
        left: 0;\r
-       bottom: 20px;\r
+       bottom: 10px;\r
 }\r
 \r
 header.pageHeader div#logo a {\r
        display: block;\r
-       height: 120px;\r
+       height: 110px;\r
        text-align: right;\r
 }\r
 \r
 /* Main Menu  */\r
 \r
-menu.mainMenu {\r
+nav.mainMenu {\r
        margin: 0 30px;\r
        background-color: rgba(0, 0, 0, .4);\r
        border-radius: 5px 5px 0 0;\r
@@ -140,17 +148,17 @@ menu.mainMenu {
        bottom: -5px;\r
 }\r
 \r
-menu.mainMenu:after {\r
+nav.mainMenu:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-menu.mainMenu ul {\r
+nav.mainMenu ul {\r
        display: table-row;\r
 }\r
 \r
-menu.mainMenu li {\r
+nav.mainMenu li {\r
        font-size: 123%;\r
        font-weight: normal;\r
        color: #69c;\r
@@ -173,11 +181,11 @@ menu.mainMenu li {
        transition: all .2s linear;\r
 }\r
 \r
-menu.mainMenu li:hover {\r
+nav.mainMenu li:hover {\r
        color: #fff;\r
 }\r
 \r
-menu.mainMenu li.activeMenuItem {\r
+nav.mainMenu li.activeMenuItem {\r
        font-weight: bold;\r
        color: #369;\r
        text-shadow: 0 1px 0 #fff;\r
@@ -240,13 +248,8 @@ div.main > div {
 \r
 /* -- -- -- -- -- Content -- -- -- -- -- */\r
 \r
-div#content {\r
-       background-color: #fefefe;\r
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe));\r
-       background-image: -moz-linear-gradient(0% 0% 270deg, #eee, #fefefe);\r
-       background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe));\r
-       background-image: -o-linear-gradient(#eee, #fefefe);\r
-       background-image: linear-gradient(#eee, #fefefe);\r
+section#content {\r
+       background-color: #fff;\r
        \r
        display: table-cell;\r
        padding: 21px;\r
@@ -271,23 +274,23 @@ nav.sidebarMenu {
        padding-bottom: 20px;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer {\r
+nav.sidebarMenu > div {\r
        position: relative;\r
        color: #69c;\r
        text-shadow: 0 1px 0 #fff;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer a {\r
+nav.sidebarMenu > div a {\r
        color: #69c;\r
        text-shadow: 0 1px 0 #fff;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer a:hover {\r
+nav.sidebarMenu > div a:hover {\r
        color: #369;\r
        text-decoration: none !important;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer h1 {\r
+nav.sidebarMenu > div h1 {\r
        background-image: url("../../icon/arrowRightS.png");\r
        background-position: 15px center;\r
        background-repeat: no-repeat;\r
@@ -300,20 +303,20 @@ nav.sidebarMenu div.menuContainer h1 {
        position: relative;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer h1.activeMenuItem {\r
+nav.sidebarMenu > div h1.activeMenuItem {\r
        background-image: url("../../icon/arrowDownS.png");\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer ul li {\r
+nav.sidebarMenu > div ul li {\r
        font-size: 110%;\r
        padding: 5px 15px 7px 35px;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer ul li.activeMenuItem {\r
+nav.sidebarMenu > div ul li.activeMenuItem {\r
        background-color: #fff;\r
 }\r
 \r
-nav.sidebarMenu div.menuContainer ul li.activeMenuItem a {\r
+nav.sidebarMenu > div ul li.activeMenuItem a {\r
        color: #369;\r
        font-weight: bold;\r
 }\r
@@ -443,39 +446,46 @@ div.ui-widget-overlay {
 \r
 /* -- -- -- -- -- Headings -- -- -- -- -- */\r
 \r
-div.mainHeadline {\r
+/* Main Heading */\r
+\r
+.mainHeading {\r
        height: 48px;\r
-       margin-bottom: 7px;\r
+       margin-bottom: 15px;\r
        position: relative;\r
 }\r
 \r
-div.mainHeadline img {\r
+.mainHeading img {\r
        position: absolute;\r
-       top: -4px;\r
+       top: 0;\r
        left: 0;\r
+       height: 48px;\r
 }\r
 \r
-div.mainHeadline div.headlineContainer {\r
+.mainHeading > hgroup {\r
        height: 48px;\r
        padding-left: 60px;\r
        vertical-align: middle;\r
 }\r
 \r
-div.mainHeadline div.headlineContainer h2 {\r
-       border-bottom: 1px solid #ccc;\r
+.mainHeading > hgroup h1 {\r
+       border-bottom: 1px solid #999;\r
+       color: #999;\r
        font-size: 140%;\r
-       padding-bottom: 3px;\r
+       font-weight: bold;\r
+       padding-bottom: 15px;\r
 }\r
 \r
-div.mainHeadline div.headlineContainer p {\r
+.mainHeading > hgroup p {\r
        padding-top: 3px;\r
 } \r
 \r
-h3.subHeadline {\r
-       border-bottom: 2px solid #000;\r
+/* Sub Heading */\r
+\r
+.subHeading {\r
+       border-bottom: 1px solid #999;\r
        font-size: 120%;\r
        margin: 14px 0 14px;\r
-       padding: 7px;\r
+       padding: 15px;\r
 }\r
 \r
 \r
@@ -494,7 +504,7 @@ fieldset legend {
 }\r
 \r
 fieldset p.description {\r
-       color: #777;\r
+       color: #369;\r
        font-size: 90%;\r
 }\r
 \r
@@ -510,6 +520,8 @@ fieldset > ul li {
 \r
 /* -- -- -- -- -- Forms -- -- -- -- -- */\r
 \r
+/* Structure */\r
+\r
 div.formElement {\r
        clear: both;\r
        margin-bottom: 14px;\r
@@ -539,6 +551,16 @@ div.formGroupField div.formField label {
        display: block;\r
 }\r
 \r
+/* Form Elements */\r
+\r
+input {\r
+       border: 1px solid #ccc;\r
+}\r
+\r
+input:hover {\r
+       border: 1px solid #369;\r
+}\r
+\r
 \r
 \r
 \r
@@ -715,9 +737,9 @@ div.largeButtons ul li a {
        background-image: linear-gradient(#fefefe, #eee);\r
        \r
        border: 1px solid #ccc;\r
-       border-radius: 10px;\r
+       border-radius: 30px;\r
        display: inline-block;\r
-       padding: 7px;\r
+       padding: 5px 13px;\r
 }\r
 \r
 input[type='reset']:hover,\r
@@ -860,7 +882,7 @@ dl.disabled dt {
 \r
 .ui-tabs .ui-tabs-nav {\r
        height: 18px !important; /* Fixes a clearing problem */\r
-       margin: 0 0 0 14px;\r
+       margin: 0 3px;\r
        background-color: none;\r
        padding: 3px 3px 0;\r
 }\r
@@ -887,7 +909,10 @@ dl.disabled dt {
        \r
        border: 1px solid #ccc;\r
        border-bottom-width: 0;\r
-       border-radius: 10px 10px 0 0;\r
+\r
+       border-top-left-radius: 3px;\r
+       border-top-right-radius: 3px;\r
+       \r
        float: left;\r
        padding: 7px 14px;\r
        text-decoration: none;\r

diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index 7d34829e8077c4e55e1604fc4235bb4c46cd8877..af6831f5504b0af43671906eafcdcc17657c7d1e 100644 (file)
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -1,6 +1,6 @@
                        </div>\r
                </div>\r
-       </div>\r
+       </section>\r
        <!-- /CONTENT -->\r
        \r
        <!-- FOOTER -->\r
@@ -12,7 +12,7 @@
                                </ul>\r
                        </nav>\r
                </div>\r
-               <p class="copyright"><a href="http://www.woltlab.com" title="www.woltlab.com">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></p>\r
+               <p class="copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></p>\r
        </footer>\r
        <!-- /FOOTER -->\r
        <a id="bottom"></a>\r

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index de7184b9edeefd2c7fe60e512157524b80c24db3..c9266a9ff6427e42104d15e5ae8dbc2523494886 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -66,16 +66,16 @@
 <body id="tpl{$templateName|ucfirst}">\r
        <!-- HEADER -->\r
        <a id="top"></a>\r
-       <header class="pageHeader"\r
+       <header class="pageHeader">\r
                \r
                <!-- top menu -->\r
-               <menu id="topMenu" class="topMenu">\r
+               <nav id="topMenu" class="topMenu">\r
                        <div>\r
                                <ul>\r
                                        <li><a href="#" title="Hello World">Hello World!</a></li>\r
                                </ul>\r
                        </div>\r
-               </menu>\r
+               </nav>\r
                <!-- /top menu -->\r
                \r
                <!-- logo -->\r
@@ -94,7 +94,7 @@
                <!-- /logo -->\r
                \r
                <!-- top nav -->\r
-               <menu id="mainMenu" class="mainMenu">\r
+               <nav id="mainMenu" class="mainMenu">\r
                        {* work-around for unknown core-object during WCFSetup *}\r
                        {if PACKAGE_ID}\r
                                <ul>\r
@@ -103,7 +103,7 @@
                                        {/foreach}\r
                                </ul>\r
                        {/if}\r
-               </menu>\r
+               </nav>\r
                <!-- /top nav -->\r
                \r
                <!-- sub bar -->\r
@@ -125,7 +125,7 @@
                                        {* work-around for unknown core-object during WCFSetup *}\r
                                        {if PACKAGE_ID}\r
                                                {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}\r
-                                                       <div class="menuContainer" data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">\r
+                                                       <div data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">\r
                                                                {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}\r
                                                                        <h1 data-menuItem="{$menuItem->menuItem}" class="menuHeader">{lang}{@$menuItem->menuItem}{/lang}</h1>\r
                                                                        <div class="sidebarMenuGroup">\r
@@ -149,4 +149,4 @@
                                <!-- /sub nav -->\r
                        </aside>\r
                        \r
-                       <div id="content">\r
+                       <section id="content">\r

diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index 7d270fc9f91f650ec6b3b4da0a79674d55be9432..e0ecbcb242e79cb40650aca83c13f1160b8d9a5a 100644 (file)
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -8,13 +8,13 @@
        //]]>\r
 </script>\r
 \r
-<div class="mainHeadline">\r
+<header class="mainHeading">\r
        <img src="{@RELATIVE_WCF_DIR}icon/optionL.png" alt="" />\r
-       <div class="headlineContainer">\r
-               <h2>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h2>\r
-               <p>{lang}wcf.acp.option.category.{$category->categoryName}.description{/lang}</p>\r
-       </div>\r
-</div>\r
+       <hgroup>\r
+               <h1>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h1>\r
+               <h2>{lang}wcf.acp.option.category.{$category->categoryName}.description{/lang}</h2>\r
+       </hgroup>\r
+</header>\r
 \r
 {if $success|isset}\r
        <p class="success">{lang}wcf.acp.option.success{/lang}</p>\r
@@ -26,17 +26,21 @@
 \r
 <form method="post" action="index.php?form=Option&amp;categoryID={@$category->categoryID}">\r
        <div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">\r
-               <ul class="tabMenu">\r
-                       {foreach from=$optionTree item=categoryLevel1}\r
-                               <li><a href="#{@$categoryLevel1[object]->categoryName}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>\r
-                       {/foreach}\r
-               </ul>\r
+               <nav>\r
+                       <ul class="tabMenu">\r
+                               {foreach from=$optionTree item=categoryLevel1}\r
+                                       <li><a href="#{@$categoryLevel1[object]->categoryName}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>\r
+                               {/foreach}\r
+                       </ul>\r
+               </nav>\r
                \r
                {foreach from=$optionTree item=categoryLevel1}\r
                        <div class="border tabMenuContent hidden" id="{@$categoryLevel1[object]->categoryName}">\r
                                <div class="container-1">\r
-                                       <h3 class="subHeadline">{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h3>\r
-                                       <p class="description">{lang}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</p>\r
+                                       <hgroup>\r
+                                               <h1 class="subHeading">{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>\r
+                                               <h2 class="description">{lang}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>\r
+                                       </hgroup>\r
                                        \r
                                        {if $categoryLevel1[options]|count}\r
                                                <fieldset>\r

diff --git a/wcfsetup/install/files/acp/templates/optionImport.tpl b/wcfsetup/install/files/acp/templates/optionImport.tpl
index 0ef37c1b1c6cb910297b6fe69e808c9389959433..eaae714726142e96a47688287796563096f0a44d 100644 (file)
--- a/wcfsetup/install/files/acp/templates/optionImport.tpl
+++ b/wcfsetup/install/files/acp/templates/optionImport.tpl
@@ -1,11 +1,11 @@
 {include file='header'}\r
 \r
-<div class="mainHeadline">\r
+<header class="mainHeadline">\r
        <img src="{@RELATIVE_WCF_DIR}icon/optionImportAndExportL.png" alt="" />\r
-       <div class="headlineContainer">\r
-               <h2>{lang}wcf.acp.option.importAndExport{/lang}</h2>\r
-       </div>\r
-</div>\r
+       <hgroup class="headlineContainer">\r
+               <h1>{lang}wcf.acp.option.importAndExport{/lang}</h1>\r
+       </hgroup>\r
+</header>\r
 \r
 {if $success|isset}\r
        <p class="success">{lang}wcf.acp.option.import.success{/lang}</p>       \r