HOW TO: Remove the annoying sidebar on the forums

[TechnoGuyRob]

EDIT: The Stylish sheet applies to stevepavlina.com in general, because I couldn't figure out how to make it work just for the forums (url and domain both didn't function properly; the former had to be applied to forums/general-introductions, forums/...). If anyone familiar with Stylish can help out on this, that would be great. It doesn't seem like the Stylish sheet interferes with the main site, so for those purposes it should be fine (but if Steve ever changes his site in the future, a conflict might, might, might arise).

EDIT 3: This hides ads. If enough people complain about an alternate version that keeps ads, or if Steve wants the ads to show, I will make an alternate version.

The sidebar is driving me nuts to the point where it severely hinders my experience of the forums. I know how to find Steve's blog and the donate button just fine, thank you very much. This is, after all, a forum for "smart people"; we don't need to have links pressed in our face that pretty much everyone on this site knows where to find.

So I made a Firefox Greasemonkey script and Stylish style that removes the sidebar and makes the forums take up the full width of the page. Personally, I prefer the Stylish add-on because, unlike Greasemonkey, the browser doesn't parse it after the page loads, meaning it integrates smoothly into the layout. So, here they are:

Pavlina Annoying Sidebar Fix for Greasemonkey*
Pavlina Annoying Sidebar Fix for Stylish**

It looks so much nicer that way!



And for anyone who wants to do it for other browsers or put it into your Firefox chrome, just use the styles:

#content { margin-left: 0px !important; }
#navigation { display: none; }

Cheers for using your screen's full real estate!

=========

* Full code:

// ==UserScript==
// @name          Pavlina Forums Sidebar Fix
// @description   Remove annoying sidebar on the Pavlina forums.
// @include       http://www.stevepavlina.com/forums/*
// @include       http://stevepavlina.com/forums/*
// ==/UserScript==

(function() {
	document.getElementById("navigation").style.display = 'none';
	document.getElementById("content").style.marginLeft = '0px';
})();

** Full code:

@-moz-document domain("stevepavlina.com")
{
   #content {
      margin-left: 0px !important;
   } 
   
   #navigation {
      display: none;
   }
}

EDIT 2:

And for you hardcore efficiency buffs, to remove the header at the top of each page, simply add the following line of code to the Greasemonkey script:

document.body.childNodes[5].style.display='none';

I'm not sure if it can be done with CSS, since the header (table) doesn't have an ID or CLASS.

[bollenbach]

installed!

[Steve Pavlina]

The sidebar is a bit of a kludge right now and will probably be modified later anyway. In IE6 it behaves like a normal sidebar, but in IE7 or Firefox it's fixed and doesn't scroll along with the text. I personally don't like the fixed position aspect, but it was the only mod I found that worked on all pages rather than just the forum home. I'll need to dig into the templates to find a way to make the behavior uniform, so it works like a normal sidebar. It's not as simple as cutting a few lines from the CSS.

Over time many visitors to the forums will enter via search engines or other links rather from the main site, so I thought it important to have some high visibility links to other parts of the site. I also find the default forum width too wide and prefer to read in thinner columns.

I'm not certain what I'll do with the sidebar in the long run yet. I may use it to highlight popular threads/posts or other things like that.

[TechnoGuyRob]

I fully understand its purpose. I just figured it would be nice to remove it for people who are familiar with your works, and who frequent the forums. Perhaps you should include an option in the control panel to remove it for users who want to do so? That would make everyone happy.

I am fairly proficient at CSS. If you want, I can see if I can do something to make the sidebar integrate more smoothly. In fact, I'll do it right now. If I can, I'll let you know, and if you like it, then we've got a fix.

EDIT: I made a fix to the sidebar. Here is a live example. If you like it, go bug Steve about adding TechnoGuyRob's sidebar fix (I sent him a PM about it). ;-)

[Steve Pavlina]

I just implemented Rob's sidebar fix (took 10 seconds to edit the template), so now it works like a normal sidebar in IE6, IE7, and Firefox. Thanks a bunch, Rob, for your help with the CSS. I really appreciate it, as I'm sure many others do as well.

[Andreas]

Steve, I like the idea of it highlighting the most popular threads & all time highest rated threads. Looking forward to that.

Rob, your live fix is not working on either Safari 2 on OSX or Firefox 2 on OSX. Strange.

[Steve Pavlina]

I don't have OSX. Is the layout messed up? If so could you post a screen shot?

[Andreas]

When I went to Rob's Live Example, I expected the sidebar to be gone, but it wasn't.

As for OSX behavior, both Safari and Firefox 2 do not fix the sidebar. Meaning, if I scroll down, it doesn't follow me like some sidebars do. But that's fine, I don't want a fixed sidebar.

[Matt]

I would like it better if it was fixed and stretched across the top or bottom of the screen. Here is a crude example:

[ StevePavlina.com | Steve's Blog | Erin's Blog | Free Newsletter | Donate | Contact ]

I don't mind it the way it is now, though. Just my $0.02.

[Steve Pavlina]

Hmmm... I actually prefer that it makes the text a little thinner, since I find it harder to read when the screen is so wide. Thinner columns tend to make reading faster for most people.

[Andreas]

I concur.

I'm just a little confused about how the Live preview was supposed to be different. Also, I remember reading somewhere about how the brain reads faster when the content is narrower, and I know it's true for me.

But what's true for me may not be true for everyone else, so making it an option for registered users is probably the best option. Better yet, see if there's a way allow each user the ability to set any width they choose. Just a thought.

[TechnoGuyRob]

A bit selfish of me, but just bumping the topic in case anyone else is interested.

[Daniel Terhorst]

For those who want a fixed size, adding a body entry to the Stylish script, like so:

@-moz-document domain("stevepavlina.com")
{
   body {
      width: 800px;
   }

   #content {
      margin-left: 0px !important;
   } 
   
   #navigation {
      display: none;
   }
}

might do the trick. Adjust as you wish. Posts that are too wide extend beyond the specified borders.

I haven't tried it everywhere in the forum, but it seems workable at a shallow glance.

I don't use Greasemonkey, so no guarantees, but I imagine something similar to the following line might work:

document.body.width = '800px';

-- Daniel Terhorst

[TechnoGuyRob]

And for those of you who don't like the "Digg", "RSS", etc. buttons at the bottom of each post, this style will do the trick to hide them:

   div[align="right"] a[rel="nofollow"] img[height="20"] {
      display: none;
   }