Internet Explorer: Forum avatars on left side & etc.

[Scavok]

Following Teknorat's lead, there is a way to make Internet Explorer 6 (and likely 7) use a "user style sheet" to control the layout and appearance of this forum.

Here's what it looks like in IE 6: http://i35.tinypic.com/ng8wg5.jpg" onclick="window.open(this.href);return false; (To view the full-size image with Internet Explorer 6, click the picture and a floating icon will appear at the lower right corner. Click it to "Expand to regular size." (Firefox users: simply click the picture.))

The Cascading Style Sheet (CSS) code for your complete User Style Sheet is given in the first code box***. To make use of it, open Notepad (or Wordpad), paste all of the code from the first code box into a new document, and then save it as a file named "userContent.css" in your My Documents directory (folder). (Be sure to use the double quotes at the beginning and end of the file name; otherwise Notepad will save it with a ".txt" extension! (Wordpad doesn't have that issue.)) Next, open IE 6 and follow these steps:

• 1. Click the Tools menu and select "Internet options..."
  2. Click the "Accessibility..." button (lower right)
  3. In the "User style sheet" area, select (click) the box labeled "Format documents using my style sheet"
  4. Now use "Browse..." to select the My Documents folder and the file you named above (userContent.css)
  5. Click OK
  6. Click OK
  7. Close IE 6
  8. Start IE 6
  9. ENJOY!

Code: Select all

/* Kudo to Teknorat for this excellent idea! */
/* Additional edits by Scavok */

.postprofile {
 padding-left: 17px ! important;
 padding-top: 15px ! important;
 width: 15% ! important;
 float: left ! important;
 border-left: 0px solid #000000 ! important;
}

.postbody {
 padding: 0 ! important;
 width: 78% ! important;
 float: right ! important;
 padding-left: 10px ! important;
 border-left: 1px solid #FFFFFF ! important;
 /* Here's one way to persistently set the font size; */
 /* I commented-it out because it's better to directly */
 /* set the minimum font size in the browser itself. */
 /* font-size: 1.5em ! important; */
}

/* Set the size of the Subject text in your posts */
/* Set it to 0em to make it unreadable (i.e., to ignore it) */
.postbody h3 {
 font-size: 1.2em ! important;
 font-weight: lighter ! important;
}

.online {
 background-position: 0 0 ! important;
 /* This is an animated Smiley eating popcorn */
 background-image: url("http://i31.tinypic.com/155qavl.jpg") ! important;
}

/* Add space between topics to ease eyestrain */
ul.topiclist li.row dl {
 padding-top: 10px ! important;
 padding-bottom: 10px ! important;
}

/* Set the alternating row colors here for all but the Board Index page */
/* See http://html-color-codes.info/ for the HTML color codes */
.bg1 { background-color: #d8d8d8 ! important; }
.bg2 { background-color: #f2f2f2 ! important; }

/* These changes align items within Horizontal Lists on the right */
/* This affects "Board index," "User Control Panel," "View your posts," */
/* "Login/Logout," "FAQ," "View unanswered post," "View new posts," and */
/* "View active topics." */
ul.linklist li {
 float: right ! important;
 text-align: right ! important;
 margin-right: 0 ! important;
 margin-left: 5px ! important;
}

Using Notepad or Wordpad (preferred) you can alter the setting to your hearts desire. Just be aware that after you make any change, IE requires you to jump through a hoop (or two) for the change to take affect. You can either:

(a) Close and restart IE
(b) (Preferred in my opinion) Follow steps (1) through (3) twice in a row, toggling the value of "Format documents using my style sheet." That is: turn it from On to Off; return back to the OFCC forum, seeing the site the way they've got it configured. Now go back and turn it from Off to On. When you return to the OFCC forum, you'll see the affect of your change (for better or for worse!).

Eventually, you'll settle on values that you personally like. Or maybe OFCC will simply return the appearance of the forum back to what it previously was. Regardless, it's good to know that you can control much of the appearance of the OFCC site.


_____________________

There is one caveat: unlike the Firefox browser, this CSS (Cascading Style Sheet) code wasn't recognized by IE 6:

Code: Select all

@-moz-document domain(ohioccwforums.org)

/* Beginning of this over-all block */
{

/* End of this over-all block */
}

In other words--without the domain(ohioccwforums.org) qualifier, this CSS code may affect other web sites you'll visit. (NOT GOOD.) HELP--Can someone familiar with IE's treatment of CSS find a "@-moz-document domain(ohioccwforums.org)" type of statement that it recognizes? IF this becomes a problem while viewing other web sites, simply follow steps (1) through (3) (above) and then uncheck the box labeled "Format documents using my style sheet."

***Disregard this note if this Smiley is animated:
No? In order for it to work, "Play Animations in Web Pages" has to be enabled in IE 6 (which it normally is IIRC). If it's not animated, go to: Tools -> Internet options... -> Advanced (tab); scroll down to "Multimedia" and click (check) the "Play animations in web pages" option.

[troy96]

Thanks works perfectly. My eyes feel better already.

[mattswabb]

Screwed up my other forums. Now they have double spaces on the left.

[Scavok]

Screwed up my other forums. Now they have double spaces on the left.

Right; that's why I included this note near the end of my O.P.:

IF this becomes a problem while viewing other web sites, simply follow steps (1) through (3) (above) and then uncheck the box labeled "Format documents using my style sheet."

That's because IE has been, and continues to be, a non-compliant browser. Still, you can do something about it: use Firefox instead because it supports the domain(http://ohioccwforums.org" onclick="window.open(this.href);return false;) construct. (And it's a far better product than IE on many accounts.)

The good news is: you don't have to close and restart IE to affect the change. Simply follow steps (1) through (3) & voilà! (In step (3), you can turn it "on" or "off" depending on which site you're going to, or where you're presently at.) So for example, if it's "on" because you're presently browsing OFCC and then later go to another site and realize that the layout is wrong, the solution is to follow steps (1) through (3), this time turning it "off." Then later when you go back to OFCC, turn it back "on." A few clicks of the mouse is all it takes.