Ouverture Facile : Forum

Ouverture Facile : Forum

This is the official board for the game Ouverture Facile

You are not logged in.

#1 2011-03-14 21:43:48

moderate in drinkation
From: Strasbourg
Registered: 2006-11-29
Posts: 356

If you think this forum is ugly...

...and if you use Firefox or Chrome for internet navigation, then this thread is for you.
maybe you already know, there's a really cool add-on for Firefox (and other web browsers, check by yourself if needed) that lets you apply YOUR own design for each of your favourite website: Stylish.

teasing (?) screenshot:

( http://img340.imageshack.us/img340/9945 … fforum.png )

a website is made of two things: content and graphical output.
in case of a forum, the content is essentially made by members, writing posts, creating threads and so on.
all graphical aspects however, are set by the administrator. these settings are read by your web browser, which produces the (nice) graphical output that you see on your screen. part or all of these design/behaviour settings can be described in a language called CSS.

what does stylish:
this add-on that relies on CSS allows you to overcome the original design of the website and apply your own choices for fonts, colors, borders, behaviour upon mouse hover...
for infamous websites, you can easily find pre-maid styles on the internet, e.g. on userstyles.
you will find help explaining how to install Stylish then install/create new designs for your favourite websites on the same site, there.

a first stone:
i didn't dig very deep, but i started styling up a bit this forum. if you're interested, want to apply the same design or use it as a basis to develop your own, with much more colours, or turning it all down to black, well here is what i got for firefox:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.ouverture-facile.com") {

#brdheader.block div.box{
  border-top: 1px solid #000000 !important;
  background: -moz-linear-gradient(left center, #eeeeee 50%, #000000) !important;
  text-align: center !important;
#brdmenu.inbox a:hover{
text-shadow: 0px 0px 3px #ffffff;
text-decoration: none !important;
#brdmenu.inbox a[href*="index.php"]{
  color: #00aa00 !important;
  text-align: left !important;
#brdmenu.inbox a[href*="action=out"]{
  color: #aa0000 !important;
  text-align: left !important;

a[href*="show_new"]:before, a[href*="show_new"]:after{
  content: " !! " !important;

#punwrap h2{
  background: -moz-linear-gradient(left center, #000000 10%, #eeeeee, #000000 90%) !important;
  -moz-border-radius-topleft: 10px !important;
  -moz-border-radius-topright: 10px !important;

#announce.block div.inbox{
  background: -moz-linear-gradient(left center, #eeeeee, #aaaaaa 50%, #eeeeee) !important;

.postleft, .postfootleft{
  border-right: 1px solid #000000 !important;
.postfootleft, .postfootright{
/*  border-top: 1px solid #dddddd !important;*/
  background: #e0e0e0 !important;

#brdstats.block div.box div.inbox{
  background: transparent !important;
#brdstats.block div.box{
  background: #dddddd !important;
#brdfooter.block div.box div.inbox{
  background: transparent !important;
  -moz-border-radius-topleft: 10px !important; /* needed only for consistency */
  -moz-border-radius-topright: 10px !important;
#brdfooter.block div.box{
  background: #dddddd !important;
  -moz-border-radius-bottomleft: 10px !important;
  -moz-border-radius-bottomright: 10px !important;

.codebox{background: #000000 !important;-moz-border-radius: 10px !important;}
.incqbox{background: #ddddff !important;}
.incqbox h4{background: #efefef !important;}

this has to be slightly addapted for Google Chrome; if anybody is interested, i can show him/her how (it's mainly about the beginning of the file and about gradients).
you see from the screenshot above that i didn't do much, but one can virtually change anything (and even slightly the content, replace images...).
limits will come from your knowledge of CSS/xhtml language... and from your imagination. have a try at it! smile

franais, english, deutsch, svenska, 日本語 - always keen on learning other languages
finished HP7 book on 22nd at 4 pm ^^ http://img127.imageshack.us/img127/2338/dhmh7.png



Board footer