Jump to content
Smiley

Try a new forum style!

Recommended Posts

Smiley   

So you're sick of the downtimes? Get productive, give your forum a new style.

 

Sadly there is nothing to choose from by default, so you'll need a little help from browser plugins.

First, a CSS injector, which dynamically adds a stylesheet to the current website. (I'll name only the ones for Chrome and Firefox since these are the majority, you may post a link to a similar tool for your browser of choice)

 

- Stylebot for Chrome: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

- Stylish for Firefox: https://addons.mozilla.org/de/firefox/addon/stylish/

 

So here are the stylesheets for Chrome:

"Nexus": https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-nexus-css

"Space": https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-space-css

 

Click on the "CSS" button, choose "Open Stylebot", click "edit CSS" on the bottom and put the piece of CSS into the (empty) box - it will show the changes instantly. Click "save", reload the page and you're done.

 

 

instructions-chrome-1.png

 

instructions-chrome-2.png

 

 

For Firefox it's basically the same but the stylesheet is a little different - every rule needs an "!important" which is added automatically in Chrome.

The stylesheets for FF: 

"Nexus": https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweaks-nexus-firefox-css

"Space": https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-space-firefox-css

 

Click on the "S" icon for Stylish, choose "manage styles" and "create new style", delete the bit which is already in the window and paste the whole text from the Gist in there and make sure to enable the styles. Save, reload and go.

 

 

(don't be scared, it's german)

instructions-firefox-1.png

 

instructions-firefox-2.png

 

 

Ok, if you wanna go a little deeper and spice it with a little Javascript, i've got something for you: https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-js

 

- Tampermonkey for Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

- Greasemonkey for Firefox https://addons.mozilla.org/de/firefox/addon/greasemonkey/

 

What it does:

 

- fix tab spacing and order on main (top left) menu

- add an account management button to the main menu

- force the website & support link to open in a new tab/window

- apply the button style to post controls (report and edit) buttons

- hide the signatures and display a toggle button

- change the date in posting heades to your preferred locale

 

This script uses some prototype.js since it's built-in in the forums software. I expect you to have at least a little knowledge of JS to check the code and see what it does (it's actually pretty simple, don't panic). Oh and make sure in the script settings that it will be executed at the end of the page!

 

And here is how it looks like:

 

 

"Nexus" theme:

wildstar-forum-nexus.jpg

 

"Space" theme:

wildstar-forum-space.jpg

 

 

Keep in mind that it's still work in progress and some things might look a little weird - i'll fix and polish it when i got time on my hands. Feel free to make suggestions! Thanks!

Edited by Smiley
  • Like 5

Share this post


Link to post
Share on other sites
sarracht   

So you're sick of the downtimes? Get productive, give your forum a new style.

 

Sadly there is nothing to choose from by default, so you'll need a little help from browser plugins.

First, a CSS injector, which dynamically adds a stylesheet to the current website. (I'll name only the ones for Chrome and Firefox since these are the majority, you may post a link to a similar tool for your browser of choice)

 

- Stylebot for Chrome: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

- Stylish for Firefox: https://addons.mozilla.org/de/firefox/addon/stylish/

 

So here's the stylesheet for Chrome https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-nexus-css

Click on the "CSS" button, choose "Open Stylebot" and put the piece of CSS into the (empty) box - it will show the changes instantly.

 

For Firefox it's basically the same but the stylesheet is a little different - every rule needs an "!important" which is added automatically in Chrome.

The stylesheet for FF: https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweaks-nexus-firefox-css

Click on the "S" icon for Stylish, choose "manage styles" and "create new style", delete the bit which is already in the window and paste the whole text from the Gist in there and make sure to enable the styles.

 

 

Ok, if you wanna go a little deeper and spice it with a little Javascript, i've got something for you: https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-js

 

- Tampermonkey for Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

- Greasemonkey for Firefox https://addons.mozilla.org/de/firefox/addon/greasemonkey/

 

What it does:

 

- fix tab spacing and order on main (top left) menu

- force the website & support link to open in a new tab/window

- apply the button style to post controls (report and edit) buttons

- hide the signatures and display a toggle button

- change the date in posting heades to your preferred locale

 

This script uses some prototype.js since it's built-in in the forums software. I expect you to have at least a little knowledge of JS to check the code and see what it does (it's actually pretty simple, don't panic).

 

And here is how it looks like:

 

 

ws-forum-nexus.png

 

 

Keep in mind that it's stoll work in progress and some things might look a little weird - i'll fix and polish it when i got time on my hands. Feel free to make suggestions! Thanks!

 

That's fantastic and you are fantastic.

Share this post


Link to post
Share on other sites
ventreel   

It looks really amazing! Though is there an option to make field with post little darker? Like adding dark/black coloured half transparency? It kind of difficult to read the text as it is with just background behind it. Great work though, i love you OP!

Share this post


Link to post
Share on other sites
kaels   

I made some minor tweaks to the Stylish style for legibility (link color, post background opacity) and restricted it to the wildstar-online.com domain: http://pastebin.com/Cdqy3HY8

 

Screenshot of tweaked version:

 

MHLCNdw.png

 

 

Share this post


Link to post
Share on other sites
Smiley   

That's fantastic and you are fantastic.

 

Thanks, good Sir!

 

 

It looks really amazing! Though is there an option to make field with post little darker? Like adding dark/black coloured half transparency? It kind of difficult to read the text as it is with just background behind it. Great work though, i love you OP!

Also thank you! To make the background a little darker, look for the line containing .ipsbox: https://gist.github.com/codemasher/f8a367b2d202afcc201e#file-ws-forumtweak-nexus-css-L106

Try changing the value from 0.05 to something like 0.3 or 0.4 - just play a little with the values ;)

 

I made some minor tweaks to the Stylish style for legibility (link color, post background opacity) and restricted it to the wildstar-online.com domain

Oh right, i forgot to color the links within postings - i got used to it - it makes me check every link before i click it ;)

Will fix that soon.

Share this post


Link to post
Share on other sites

This is actually really neat. I think I ended up changing the background to like .6 before I was fully happy with it. Dark enough that it doesnt make anything hard to read.. Light enough that you can still see the background without the background becoming distracting.

Share this post


Link to post
Share on other sites
Smiley   

Thanks!

 

btw. I've added the hyperlink style in the meantime. (Did anyone notice the subtle CSS transitions? :D)

Share this post


Link to post
Share on other sites
Lireh   

I tried to figure this out but am too clueless. Where you say put the piece of CSS into the empty box, how does one go about doing that? I click on the link, click on css and select open stylebot, and at that point I have no idea where to find this piece and where to plug it in at. Any help for clueless noncoder?

Share this post


Link to post
Share on other sites
Smiley   

I'll add some screens soon :)

 

€: added screens

Edited by Smiley

Share this post


Link to post
Share on other sites
Zanric   

I tried to figure this out but am too clueless. Where you say put the piece of CSS into the empty box, how does one go about doing that? I click on the link, click on css and select open stylebot, and at that point I have no idea where to find this piece and where to plug it in at. Any help for clueless noncoder?

 

Open CSS > Open Stylebot > Edit CSS (At the bottom of the page) then copy/pasta.

Share this post


Link to post
Share on other sites
Smiley   

I'm going to overhaul the that style for the new forum layout once i've got time on my hands :)

Share this post


Link to post
Share on other sites
Ianpact   

I have no real idea what I'm looking at but I'm going to assume it's pretty cool.  B)

 

 

 

 

 

 

 

Thanks for the link, I'll have to check it out when I get some time.

Edited by Ianpact
  • Like 1

Share this post


Link to post
Share on other sites
Smiley   

Bump because of the influx of new players who might be interested in this!

Share this post


Link to post
Share on other sites
Smiley   

duh, so much work and all got lost with the new forum... and the new look is just so bad, i can't help. :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×