right aligned forum

[Auntie Mangos]

Today I browsed this lovely forum via w3m (only browser I have installed on my server) and I felt like "wow not that bad". Got home looked into archlinux.org website code, installed fluxbb-1.4.4 and came up with this:

At the bottom of style/Air.css (Arch part is their respective copyright (dunno, guess it's open source).

/*
* ARCH GLOBAL NAVBAR
*
* We're forcing all generic selectors with !important
* to help prevent other stylesheets from interfering.
*
*/

/* container for the entire bar */
#archnavbar { height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; }

/* logo trickery -- GIF for IE6 and PNG for the rest */
#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; }
/* IE6 doesn't support alpha PNGs so we serve it a GIF */
#archnavbarlogo { background: url('/fluxbb-1.4.4/img/icon-mangos-mediawiki.png') no-repeat !important; }
/* and use a proper PNG for all other modern browsers */
html > body #archnavbarlogo { background: url('/fluxbb-1.4.4/img/icon-mangos-mediawiki.png') no-repeat !important; }

/* move the heading/paragraph text offscreen */
#archnavbarlogo p { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; }
#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; }

/* make the link the same size as the logo */
#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; }

/* display the list inline, float it to the right and style it */
#archnavbar ul { display: inline !important; float: right !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
#archnavbar ul li { float: left !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 45px !important; padding-right: 15px !important; padding-left: 15px !important; }

/* style the links */
#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; }
#archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; }


/*
* MaNGOS Paypal Love Icon
*/

#application { *zoom: 1; margin-left: auto; margin-right: auto; width: 147; max-width: 100%; padding: 1em; }
#application:after { content: "\\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
#application form#paypal input[type=image] { display: block; position: absolute; top: 0; right: 0; width: 100px; height: 100px; }
#application h1 a { display: block; width: 191px; height: 45px; position: relative; }
#application h1 a span { position: absolute; width: 100%; height: 100%; }

#application { background-color: white; color: #555753; -moz-border-radius-bottomleft: 11px; -webkit-border-bottom-left-radius: 11px; -o-border-bottom-left-radius: 11px; -ms-border-bottom-left-radius: 11px; -khtml-border-bottom-left-rad$
#application form#paypal input[type=image] { text-indent: -9999em; }
#application h1 a span { background-image: url('/img/button-donate-mangos.png'); background-position: top left; background-repeat: no-repeat; cursor: pointer; }

In header.php:

?>
<title><?php echo generate_page_title($page_title, $p) ?></title>
<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />
+ 
+ <div id="archnavbar" class="anb-home">
+         <div id="archnavbarlogo"><h1>[url="/"][img=img/icon-mangos-mediawiki.png]</img>[/url]</h1></div>
+         <div id="archnavbarmenu">
+             <ul id="archnavbarlist">
+                 <li id="anb-home">[url="/"]Home[/url]
+                 <li id="anb-forums">[url="http://getmangos.eu/community"]Forums[/url]
+                 <li id="anb-wiki">[url="http://getmangos.eu/wiki"]Wiki[/url]
+                 <li id="anb-bugs">[url="http://github.com/mangos/mangos/???"]Bugs[/url]
+                 <li id="anb-download">[url="http://github.com/mangos/"]Source[/url]
+                 <li id="anb-download">[url=""][/url]
+                 <li id="anb-download">[url=""][/url]
+                 <li id="anb-download">[url=""][/url]
+             [/list]
+         </div>
+     </div>
+ <div id="application">
+ <form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post">
+ <input name="cmd" type="hidden" value="_s-xclick">
+ <input name="hosted_button_id" type="hidden" value="9M9GC4P3D52YG">
+ <input alt='Give "mangos" some love back. Every bit helps keeping this site running.' name="submit" src="img/button-donate-mangos.png" type="image">
+ [img=https://www.paypal.com/en_GB/i/scr/pixel.gif]
+ </form>

<?php

if (defined('PUN_ADMIN_CONSOLE'))

and a minimized version of the forum icon and the love banner in folder img/. And this is what came out:

I'm poor with CSS that's why I didn't do anything on my own, but otherwise I can't stand this forum (ever tried reading from a netbook?). It's not perfect, it's a start, but please change this right aligned style.

Regards

Skirnir

[edit] archlinux.org not .com

[darkstalker]

Don't know if its intended to be, but since some days I'm seeing the forum like this:

right aligned with a bunch of free space on left and top. For me at least its a bit "disturbing" to read right-aligned things.

Using Firefox 3.6.12 on linux.

[xnxx10]

+1

[davemm]

getting the same here, on both firefox and chrome on Linux. (also the same on chrome/win7)

[Patman128]

Same. Firefox 3.6.12 on OS X.

[TOM_RUS]

Yeah, very annoying.

[Diablox]

Opera 9.63 Same problem.

[Toinan67]

Safari 5.0.3 on Mac OS X, same problem.

Actually I think it's something TheLuda wanted, am I wrong?

[Auntie Mangos]

Actually this was intended, mainly to have some sort of repeating look at forums and wiki pages. The Wiki is aligned that way too.

Oh well, the sheep needs more beer for creative stuff

[Patman128]

It would nice if there was sidebar in the empty space on the left, similar to the wiki.

[Skirnir]

Bump

Stumbled over this yesterday. Anyone had a look, or a comment? Anything? If you like to have some live action look at

www.archlinux.org

www.xfce.org

Regards

Skirnir

[lillecarl]

Really really nice layout imo, mangos should /steal it ;D

[Auntie Mangos]

it seems like we did follow the great example of Arch Linux O:)