How to fix the forum theme: A step-by-step guide

Kolya on 5/10/2010 at 11:14

Broken thread nav at the top

The thread page navigation at the top breaks with large threads on low resolutions (1024 width).
This error is consistent in FF, Chrome, IE, Opera. The nav works on the bottom of the page.
To fix this as well as the REPLY button overlaying the results, simply remove the width attribute from .pagination_top in (http://www.ttlg.com/forums/clientscript/vbulletin_css/style00021l/showthread-rollup.css) showthread-rollup.css:

.pagination_top {
float:right;
margin-top:5px;
position:relative;
right:0;
~~width:60%;~~
}

Screenshot:
(http://www.schwarzsilber.de/forum/src/1286277263250.png)

Inline Image:

http://www.schwarzsilber.de/forum/thumb/1286277263250s.jpg

Kolya on 6/10/2010 at 07:03

The login form on the top of the forum has a Javascript attached that fills in the default "User Name" when nothing is present:

Code:

While it looks nice, these scripts break the auto-fill form function of Firefox and Chrome that either fills in your login details automatically or allows you to just double-click into the form and have it filled with your data. To re-enable this function the script has to be removed or changed and the default-value set to null.

Code:

Kolya on 6/10/2010 at 09:13

Inline Image:

http://www.schwarzsilber.de/forum/src/1286356220976.png

Kolya on 7/10/2010 at 23:34

To make post numbers visible everywhere, instead of just every second post,
In posts.css (line 78):

Code:

.nodecontrols a {
color:#3E3E3E;
}

To fix the Report button that vanishes when hovered:
In posts.css (line 385):

Code:

.textcontrols a:hover {
background:url("http://www.ttlg.com/forums/images/buttons/report-40b-hover.png") no-repeat scroll left center transparent;
color:#417394;
}

Kolya on 7/10/2010 at 23:56

To fix the odd space that appears above an edit-notice:
In: posts.css (line 265)

Code:

.postbitlegacy_1 .postrow.has_after_content, .postbitlegacy_2 .postrow.has_after_content {
padding-bottom: 0em;
}

Or just delete that bottom padding.

Kolya on 9/11/2010 at 14:18

The margin on the body element should be removed completely. The content has it's own margin anyway to which the body's margin is added, eating away at the screensize.
Additionally the sizing of the body element together with the background-color that's set for the "html" root element leads to a "roll-down" effect during rendering right now, as the renderer has to read in the complete body first to show the correct background colors for the "html" and body elements. Without this every single page on TTLG would load considerably faster.

First get rid of the html root element background-color, it's a (http://www.w3.org/TR/CSS2/colors.html) bad hack anyway:
In main-rollup.css (line 866)

Code:

html {}

Remove the forum margin:
In main-rollup.css (line 876)

Code:

body {
color:#3E3E3E;
font-size:100% !important;
line-height:1.23;
min-width:650px;
width:auto;
}

The rounded corners and background of the body_wrapper are now superflous:
In main-rollup.css (line 939)

Code:

.body_wrapper {
padding:0 20px 20px;
}

Result
Improved page load times and more screen estate
(http://www.schwarzsilber.de/forum/src/1289311860667.png)

Inline Image:

http://www.schwarzsilber.de/forum/thumb/1289311860667s.jpg

ZylonBane on 9/11/2010 at 20:43

Don't forget the message edit textbox using a different font than they're actually displayed in.

Kolya on 10/11/2010 at 01:13

The Editor uses Tahoma which is the default font of the forum and additionally defined on dozens of elements, be them interface or content. But Tahoma is too tight to be readable for long times and a bad choice for anything but interface elements.
So there is an exception for the posts to use Verdana, apparently as part of a legacy option. Now let's get Verdana into the Editor.

Editor:
In main-rollup.css (line 3054) (There's a useless double on line 911)

Code:

input, textarea, select, button {
font: 11px Verdana,Arial,Helvetica,Sans-Serif;
}

Preview:
In main-rollup.css (line 1567)

Code:

blockquote.preview {
font-family: Verdana,Arial,Helvetica,Sans-Serif;
}

Quotes in the preview:
In main-rollup.css (line 1601)

Code:

blockquote.preview .bbcode_container div.bbcode_quote {
font: 13px Verdana,Arial,Helvetica,Sans-Serif;
}

Leaving the fixed font-sizes as is and not touching the review area here.

nickie on 10/11/2010 at 13:07

:o I'd very much like to fix some of these things but I don't know where to find the files, do I have to create them? I've had a good search but I'm sent to pages I don't understand or back here. Could there be a bit more info please for dumbo here?

Nameless Voice on 10/11/2010 at 13:31

The suggestions are for the forum admins.

Unless you want to start writing overriding custom user stylesheets for your browser.