RevTK Forums Fluid Layout "mod" (Firefox only)

Index » Feedback

  • 1
 
ファブリス Administrator
From: Belgium Registered: 2006-06-14 Posts: 4021 Website

Following Raichu's suggestion, I have created a simple "mod" to the forum's styles, which enables a fluid layout (adapts to your browser window size).

Steps:

1. This works only in the Firefox browser (and variants like Flock etc.).
2. Install the Stylish extension for Firefox.
3. After you restart Firefox to activate the extension you will see a paintbrush-like icon at the bottom of the window. Click it once, select Write Styles... > For forum.koohii.com. In the new window, enter a description eg. "RevTK Forums Fluid Layout". In the large textbox, copy and paste the following:

---------------copy/paste all the blue text----------------

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

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

#container { margin:0 !important; width:100% !important; border-left:0 !important; border-right:0 !important; }
#container #body { width:100% !important; padding-left:0 !important; padding-right:0 !important; }
#container #body #punwrap { margin:0 20px !important; }
#footer { margin:0 !important; width:100% !important; }

/* header */
#header ul.primary { width:auto !important; }

.topsection { width:99% !important; padding:20px 0 1em !important; }
#pbb .topnav { margin:0 20px 0 0 !important; }
#pbb .activetopics { width:auto !important; float:left !important; }
#pbb .topic .header { margin-left:220px !important; float:none !important; width:auto !important; }

/* If  you set margin-left to "0", the text will wrap around the author boxes */
#pbb .topic .message { margin-left:220px !important; float:none !important; width:auto !important; }

/* Index */
#punindex #content { max-width:600px !important; }

/* Here you can increase the font size in posts */
#pbb .message, #pbb .message p { font-size:13px !important; }

#pbb #sidebar.roundbox { position:absolute !important; }

#pbb #content { float:none !important; width:auto !important; margin-left:220px !important; }
#pbb .viewlist_pager { clear:right !important; }
#pbb #content.viewforum .thread { width:100%; clear:both !important; }

/*Profile/Options*/
#pbb .block2col div.blockform, #pbb div.block2col div.block { float:none !important; width:auto !important; margin-left:220px !important; }

/* Post Topic */
#pbb .posttopic_main { float:none !important; width:auto !important; margin-left:220px !important; }
#pbb .posttopic_post { background:#EEECD8 !important; float:none !important; width:auto !important; margin-left:220px !important; }

#pbb .posttopic_post textarea { width:96% !important; }


}

---------------copy/paste up to line above----------------

4. Click Save.

That's it.

You delete the mod if you want to revert to the original "fixed layout" version of this forum. But you can also temporarily disable the fluid layout if you need to: go to Manage Styles and then double-click the styles you've just added. You will see a checkbox option that lets you disable/enable the "mod".

cangy Member
From: 平安京 Registered: 2006-12-13 Posts: 372 Website

You need something like stylish to change style sheets for someone else's site, but as this is your site you can just specify alternative style sheets in your pages and users can pick from the view->page style menu.

http://www.w3.org/TR/WD-html40-970708/p … ml#h-8.1.4

Last edited by cangy (2008 November 05, 7:13 am)

TerryS Member
From: USA Registered: 2008-10-25 Posts: 64

That is great! Thank you!

Advertising (register and sign in to hide this)
JapanesePod101 Sponsor
 
Raichu Member
From: Australia Registered: 2005-10-27 Posts: 249 Website

This stopped working for me some time ago.

Raichu Member
From: Australia Registered: 2005-10-27 Posts: 249 Website

Prod.


Does anyone (i.e. Fabrice) know what might have happened? I think with the last lot of changes to the site, the above fluid layout script stopped working for me.

Anyone else have the same problem?

ファブリス Administrator
From: Belgium Registered: 2006-06-14 Posts: 4021 Website

Hmm I'm trying the alternate stylesheet approach. It works, but when I move to another page Firefox reverts back to "Page Style > Basic Page Style". Any ideas?

If all else fails the updated styles will work with Stylish anyway.

ファブリス Administrator
From: Belgium Registered: 2006-06-14 Posts: 4021 Website

I've updated the first post, it should work again in Stylish.

Raichu Member
From: Australia Registered: 2005-10-27 Posts: 249 Website

Great! Thanks very much!

Fishface Member
From: London Registered: 2009-06-10 Posts: 32

This works on Opera too (and probably Safari).

1. Make an empty css file and paste all the blue text except the "@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("forum.koohii.com") {
" at the beginning and the "}" at the end.

2. Save as rtkforum.css or whatever you want.
http://imgur.com/mA1d6.png


3. When you're on the forum right click and select Edit Site Prefs. In the Display tab there'll be a box where you choose the css file you just made
http://imgur.com/WxqAt.png

4. Press OK and you're done smile

  • 1