Some simplifications in CSS and HTML
authorLuzifr <szekely@woltlab.com>
Thu, 16 Feb 2012 14:18:21 +0000 (15:18 +0100)
committerLuzifr <szekely@woltlab.com>
Thu, 16 Feb 2012 14:18:21 +0000 (15:18 +0100)
com.woltlab.wcf/template/footerMenu.tpl
wcfsetup/install/files/acp/style/wcf.css
wcfsetup/install/files/acp/templates/footer.tpl
wcfsetup/setup/template/footer.tpl

index da0a2aa2b0ff25f6639d927a8864ca182752770c..890dd392aeb33cc43e2b09471273615f9b38769d 100644 (file)
@@ -1,12 +1,10 @@
 <nav id="footerNavigation" class="wcf-footerNavigation">
-       <div>
-               <ul>
-                       <li id="toTopLink" class="toTopLink"><a href="{@$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-                       {if $__wcf->getPageMenu()->getMenuItems('footer')|count > 0}
-                               {foreach from=$__wcf->getPageMenu()->getMenuItems('footer') item=menuItem}
-                                       <li><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
-                               {/foreach}
-                       {/if}
-               </ul>
-       </div>
+       <ul>
+               <li id="toTopLink" class="toTopLink"><a href="{@$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+               {if $__wcf->getPageMenu()->getMenuItems('footer')|count > 0}
+                       {foreach from=$__wcf->getPageMenu()->getMenuItems('footer') item=menuItem}
+                               <li><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
+                       {/foreach}
+               {/if}
+       </ul>
 </nav>
index 03992997a6c154eddabf7304f0fe1d552f95ce8b..50b81df8ed9175bfbcfffcea1b0bb6d689e3a98b 100644 (file)
@@ -180,7 +180,7 @@ body {
 
 
 
-/* ############## Page Header ############## */
+/* ############## Page Header & Page Footer ############## */
 
 /* Globals */
 
@@ -199,18 +199,51 @@ header.wcf-pageHeader {
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       header.wcf-pageHeader {
+       header.wcf-pageHeader,
+       header.wcf-pageFooter {
                min-width: 800px;
        }
 }
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       header.wcf-pageHeader {
+       header.wcf-pageHeader,
+       header.wcf-pageFooter {
                min-width: auto;
        }
 }
 
+.wcf-pageHeader:after,
+.wcf-pageFooter:after {
+       content: '';
+       display: block;
+       clear: both;
+}
+
+.wcf-pageFooter {
+       text-align: center;
+       position: relative;
+       z-index: 80;
+}
+
+
+
+/* -- -- -- Copyright -- -- -- */
+
+.wcf-pageFooter .wcf-copyright {
+       padding-top: 20px;
+       display: inline-block;
+}
+
+.wcf-pageFooter .wcf-copyright a {
+       text-shadow: 0 -1px 0 #000;
+}
+
+.wcf-pageFooter .wcf-copyright a:hover {
+       text-decoration: none;
+       color: #69c;
+}
+
 
 
 /* -- -- -- Top Menu -- -- -- */
@@ -750,20 +783,33 @@ nav.wcf-topMenu {
 
 /* Menu Bars */
 
-.wcf-headerNavigation {
+.wcf-headerNavigation,
+.wcf-footerNavigation {
        background-color: #e7f2fd;
-       border-bottom: 1px solid #bcd;
-       border-top-left-radius: 3px;
-       border-top-right-radius: 3px;
+       border-style: solid;
+       border-color: #bcd;
        margin: 0 23px;
        display: block;
        min-height: 7px;
        position: relative;
 }
 
+.wcf-headerNavigation {
+       border-width: 0 0 1px 0;
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+}
+
+.wcf-footerNavigation {
+       border-width: 1px 0 0 0;
+       border-bottom-left-radius: 3px;
+       border-bottom-right-radius: 3px;
+}
+
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       .wcf-headerNavigation {
+       .wcf-headerNavigation,
+       .wcf-footerNavigation {
                min-width: 800px;
        }
        
@@ -771,28 +817,15 @@ nav.wcf-topMenu {
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       .wcf-headerNavigation {
+       .wcf-headerNavigation,
+       .wcf-footerNavigation {
                min-width: auto;
        }
        
 }
 
-.wcf-footerNavigation {
-       min-height: 7px;
-       position: relative;
-}
-
-.wcf-headerNavigation:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
-.wcf-headerNavigation > div {
-       padding: 0 7px;
-}
-
-.wcf-headerNavigation > div:after {
+.wcf-headerNavigation:after,
+.wcf-footerNavigation:after {
        content: '';
        display: block;
        clear: both;
@@ -800,51 +833,54 @@ nav.wcf-topMenu {
 
 /* Icon Menus */
 
-.wcf-headerNavigation > div > ul,
-.wcf-footerNavigation > div > ul {
+.wcf-headerNavigation > ul,
+.wcf-footerNavigation > ul {
+       padding: 0 7px;
        float: right;
 }
 
-.wcf-headerNavigation > div > ul > li,
-.wcf-footerNavigation > div > ul > li {
+.wcf-headerNavigation > ul > li,
+.wcf-footerNavigation > ul > li {
        cursor: pointer;
        margin: 0 3px;
        float: right;
 }
 
-.wcf-headerNavigation > div > ul > li a,
-.wcf-footerNavigation > div > ul > li a {
+.wcf-headerNavigation > ul > li a,
+.wcf-footerNavigation > ul > li a {
        padding: 3px;
        display: inline-block;
 }
 
-.wcf-headerNavigation > div > ul > li a:hover,
-.wcf-footerNavigation > div > ul > li a:hover {
+.wcf-headerNavigation > ul > li a:hover,
+.wcf-footerNavigation > ul > li a:hover {
        text-decoration: none;
        background-color: #d8e7f5;
 }
 
-.wcf-headerNavigation > div > ul > li a:hover:active,
-.wcf-headerNavigation > div > ul > li a:hover:focus,
-.wcf-footerNavigation > div > ul > li a:hover:active,
-.wcf-footerNavigation > div > ul > li a:hover:focus {
+.wcf-headerNavigation > ul > li a:hover:active,
+.wcf-headerNavigation > ul > li a:hover:focus,
+
+.wcf-footerNavigation > ul > li a:hover:active,
+.wcf-footerNavigation > ul > li a:hover:focus {
        background-color: #fff9f4;
 }
 
-/* Special */
+/* Special -> Page Scroll Links */
 
-#tplLogin .wcf-pageHeader .wcf-headerNavigation > ul > li.toBottomLink,
-#tplLogin .wcf-pageFooter .wcf-footerNavigation > ul > li.toTopLink {
-       /* Removes the to-bottom-link on the log-in page */
+#tplLogin .wcf-headerNavigation .toBottomLink,
+#tplLogin .wcf-footerNavigation .toTopLink {
+       /* Removes the jump-to-links on the log-in page */
        position: absolute;
        left: -9000px;
        top: -9000px;
        width: 0;
 }
 
-/* Special: Sub Menu */
+/* Special -> Sub Menu */
 
 .wcf-headerNavigation .wcf-menu {
+       padding: 0 7px;
        display: inline;
        max-width: 75%;
 }
@@ -1240,73 +1276,6 @@ section.wcf-content .wcf-content {
 
 
 
-/* ############## Page Footer ############## */
-
-/* Globals */
-
-.wcf-pageFooter {
-       text-align: center;
-       padding: 0 23px 33px;
-       position: relative;
-       z-index: 80;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-       
-       .wcf-pageFooter {
-               min-width: 800px;
-       }
-       
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-       
-       .wcf-pageFooter {
-               min-width: auto;
-       }
-       
-}
-
-.wcf-pageFooter:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
-.wcf-pageFooter > div {
-       border-top: 1px solid #bcd;
-       border-bottom-left-radius: 3px;
-       border-bottom-right-radius: 3px;
-       background-color: #e7f2fd;
-       padding: 0 7px;
-}
-
-.wcf-pageFooter > div:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
-
-
-/* -- -- -- Copyright -- -- -- */
-
-.wcf-pageFooter .wcf-copyright {
-       padding-top: 20px;
-       display: inline-block;
-}
-
-.wcf-pageFooter .wcf-copyright a {
-       text-shadow: 0 -1px 0 #000;
-}
-
-.wcf-pageFooter .wcf-copyright a:hover {
-       text-decoration: none;
-       color: #69c;
-}
-
-
-
 /* ############## Badges ############## */
 
 /* Globals */
index e0615cd940f59ae6abeabc1142bdfbf051b79d96..1ea0c8ef6b69763230f69bdb15c23599242694b3 100644 (file)
@@ -8,11 +8,9 @@
        <footer id="pageFooter" class="wcf-pageFooter">
                <div>
                        <nav id="footerNavigation" class="wcf-footerNavigation">
-                               <div>
-                                       <ul>
-                                               <li id="toTopLink" class="toTopLink"><a href="{@$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-                                       </ul>
-                               </div>
+                               <ul>
+                                       <li id="toTopLink" class="toTopLink"><a href="{@$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+                               </ul>
                        </nav>
                </div>
                
index 171c730ef283c16ec31a462335a9e7ca4ea8b240..b5c12cf7a8bdad558318bad3babd1cb66704f1dc 100644 (file)
@@ -13,7 +13,7 @@
                                </ul>
                        </nav>
                </div>
-               <small class="wcf-copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2012 WoltLab&reg; GmbH</a></small>
+               <address class="wcf-copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2012 WoltLab&reg; GmbH</a></address>
        </footer>
        <!-- /FOOTER -->
        <a id="bottom"></a>