User.css to "fix" forum skin

Rather than have my posts in the ‘forum upgrade’ thread turn into a massive threadjack.

For many of us the new forum skin is… well… problematic at best, a disaster at worst. Many of us saw this coming with the announcement of upgrading to vBull 4, and it would be a shame to see such a healthy community flushed just because the people who wrote the default skin for vBulletin have zero business writing HTML, CSS or Javascript.

So… since they’re busy trying to just get the new forum stabilized what can we as users do? As a Opera user, my answer is quite simple. Disable javascript and use user.css to correct all the layout problems.

What layout problems you ask? Fixed width that’s uselessly small on my desktop, uselessly large on my netbook, and isn’t even useful ‘half-width’ at 1920? PX metric fonts that are useless for large font/120dpi users? Changing the zoom or width breaking multiple elements site-wide?

Here’s the user.css I’ve come up with for Opera. Only really tested at large fonts/120 dpi but there’s no reason it shouldn’t work well at normal font size since again, it’s all done with %/em.

* {
	font-size:100% !important;
	line-height:140% !important;
	font-family:arial,helvetica,sans-serif !important;
}

code,
pre,
pre span {
	font:90%/130% "lucida console","courier new",monospace !important;
}

body {
	font-size:85% !important;
	line-height:140% !important; /* always restate */
}

html,
body,
#vbulletin_html {
	width:100% !important;
	padding:0 !important;
	margin:0 !important;
}

.pagination span,
.pagination a {
	top:0 !important;
	vertical-align:top !important;
}

.pagination img {
	top:0 !important;
	vertical-align:middle !important;
}

#globalsearch {
	width:auto !important;
	padding-top:0.2em !important;
}

#globalsearch * {
	float:none !important;
	display:inline !important;
	margin:0 2px !important;
	vertical-align:middle !important;
}

#globalsearch span {
	padding:0 !important;
	margin:0 !important;
}

#globalsearch form {
	right:0 !important;
}

#navtabs,
#navtabs * {
	height:auto !important;
}

#navtabs a {
	top:0 !important;
	padding:0.25em 0.5em !important;
}

#navtabs a.popupctrl {
	padding-right:16px !important;
}

#nrreview li.postbit:nth-child(2n+1),
#threads li.threadbit:nth-child(2n+1) {
	background:#F4F8FF !important;
}

#nrreview li {
	padding:0 0.5em 0.5em !important;
	margin:0 !important;
}

#nrreview .header {
	padding:0.5em 0 !important;
	font-weight:bold;
}

.posthead {
	padding:0.25em 0 !important;
}

.postrow {
	padding:0.5em !important;
}

.userinfo {
	width:184px !important;
	padding:0.5em 0 !important;
	margin-left:8px !important;
}

.username_container {
	padding-bottom:0 !important;
}

.usertitle,
.rank {
	padding-bottom:0.5em !important;
}

.username span {
	word-wrap:break-word !important;
	padding-left:16px !important; /* fixes centering */
}

.userinfo_extra * {
	float:none !important;
	display:block !important;
	text-align:center !important;
	line-height:120% !important;
	word-wrap:break-word !important;
	color:#444 !important;
}

.userinfo_extra dt {
	font-weight:bold;
	padding-top:0.5em !important;
}

.userinfo_extra dt:after {
	display:none !important;
}

.blockrow {
	background:none !important;
}

.section {
	box-shadow:inset 0 0 32px #E0E8F0;
}

.section,
.blockbody {
	border-radius:0 0 12px 12px;
}

h3.blockhead {
	border-radius:12px 12px 0 0 !important;
}

.body_wrapper {
	margin:0 0.5em !important;
}

.popupbody {
	top:1.5em !important;
	border-radius:0 0.5em 0.5em 0.5em !important;
	box-shadow:2px 2px 2px #999;
}

li.popupmenu:hover a.popupctrl {
	color:#000 !important;
	background-color:#E8E8E8 !important;
	border-radius:0.5em 0.5em 0 0 !important;
	text-shadow:1px 1px 1px #FFF;
}

.popuphover a,
.popupbody a {
	border-radius:0.5em !important;
}

#threads h3 a {
	font-weight:normal !important;
	color:#678 !important;
}

#threads .new h3 a {
	font-weight:bold !important;
	color:#58B !important;
}

It not only fixes all those issues mentioned above, I also took the time to pretty things up a bit with some CSS3 and redoing most of the paddings/margins… it even adds alternating line color highlighting on major lists, and puts back in the support for post you’ve already read to not be bold.

For those of you not familiar with user.css and Opera – save the above to a file called “sitepoint.css” (name really doesn’t matter, I like to name them what they are), right click anywhere on these forums there’s no content and choose “site preferences”. Under the scripting tab, turn javascript off for a WONDERFUL speed boost – then under the “display” tab point “my stylesheet” at the file you saved the above CSS as. Refresh and poof, you get the modified layout.

The above code may or may not work in other browsers with user.css support. (you might want to add the -moz and -webkit prefixes to the CSS3 while at it)…

First of all, thanks for this. I was beginning to think I’d have to write a user.css myself, but you’ve done it for me.

Isn’t happening for me, post title stays bold!

EDIT: One problem with turning JS off is smilies don’t get inserted when clicked on.

I just made this version for Firefox users:

@-moz-document domain(sitepoint.com) {

	* {
		font-size:100% !important;
		line-height:140% !important;
		font-family:arial,helvetica,sans-serif !important;
	}

	code,
	pre,
	pre span {
		font:90%/130% "lucida console","courier new",monospace !important;
	}

	body {
		font-size:85% !important;
		line-height:140% !important; /* always restate */
	}

	html,
	body,
	#vbulletin_html {
		width:100% !important;
		padding:0 !important;
		margin:0 !important;
	}

	.pagination span,
	.pagination a {
		top:0 !important;
		vertical-align:top !important;
	}

	.pagination img {
		top:0 !important;
		vertical-align:middle !important;
	}

	#globalsearch {
		width:auto !important;
		padding-top:0.2em !important;
	}

	#globalsearch * {
		float:none !important;
		display:inline !important;
		margin:0 2px !important;
		vertical-align:middle !important;
	}

	#globalsearch span {
		padding:0 !important;
		margin:0 !important;
	}

	#globalsearch form {
		right:0 !important;
	}

	#navtabs,
	#navtabs * {
		height:auto !important;
	}

	#navtabs a {
		top:0 !important;
		padding:0.25em 0.5em !important;
	}

	#navtabs a.popupctrl {
		padding-right:16px !important;
	}

	#nrreview li.postbit:nth-child(2n+1),
	#threads li.threadbit:nth-child(2n+1) {
		background:#F4F8FF !important;
	}

	#nrreview li {
		padding:0 0.5em 0.5em !important;
		margin:0 !important;
	}

	#nrreview .header {
		padding:0.5em 0 !important;
		font-weight:bold;
	}

	.posthead {
		padding:0.25em 0 !important;
	}

	.postrow {
		padding:0.5em !important;
	}

	.userinfo {
		width:184px !important;
		padding:0.5em 0 !important;
		margin-left:8px !important;
	}

	.username_container {
		padding-bottom:0 !important;
	}

	.usertitle,
	.rank {
		padding-bottom:0.5em !important;
	}

	.username span {
		word-wrap:break-word !important;
		padding-left:16px !important; /* fixes centering */
	}

	.userinfo_extra * {
		float:none !important;
		display:block !important;
		text-align:center !important;
		line-height:120% !important;
		word-wrap:break-word !important;
		color:#444 !important;
	}

	.userinfo_extra dt {
		font-weight:bold;
		padding-top:0.5em !important;
	}

	.userinfo_extra dt:after {
		display:none !important;
	}

	.blockrow {
		background:none !important;
	}

	.section {
		-moz-box-shadow:inset 0 0 32px #E0E8F0;
		box-shadow:inset 0 0 32px #E0E8F0;
	}

	.section,
	.blockbody {
		-moz-border-radius:0 0 12px 12px;
		border-radius:0 0 12px 12px;
	}

	h3.blockhead {
		-moz-border-radius:12px 12px 0 0 !important;
		border-radius:12px 12px 0 0 !important;
	}

	.body_wrapper {
		margin:0 0.5em !important;
	}

	.popupbody {
		top:1.5em !important;
		-moz-border-radius:0 0.5em 0.5em 0.5em !important;
		-moz-box-shadow:2px 2px 2px #999;
		border-radius:0 0.5em 0.5em 0.5em !important;
		box-shadow:2px 2px 2px #999;
	}

	li.popupmenu:hover a.popupctrl {
		color:#000 !important;
		background-color:#E8E8E8 !important;
		-moz-border-radius:0.5em 0.5em 0 0 !important;
		-moz-text-shadow:1px 1px 1px #FFF;
		border-radius:0.5em 0.5em 0 0 !important;
		text-shadow:1px 1px 1px #FFF;
	}

	.popuphover a,
	.popupbody a {
		border-radius:0.5em !important;
	}

	#threads h3 a {
		font-weight:normal !important;
		color:#678 !important;
	}

	#threads .new h3 a {
		font-weight:bold !important;
		color:#58B !important;
	}
}

Just add that to your usercontent.css file… if you have one. If you don’t, find your profile directory, and if there’s no subdirectory called “chrome”, make one. Then create a usercontent.css file in there with the above contents, reboot FF and my changes will be applied when you visit sitepoint.

Heading to bed soon – not sure if I’ll have time to figure out how to do this in Chrome or Saffy.

Though beware, they change the skin here, these files may give you a REALLY broken layout – so when/if they update… remember you did this

I should have said thread title – on a forum index like here:

Threads you’ve read should now no longer be bold and appear in a darker blue than the ones you haven’t read. Be sure you got the above version with the H3’s at the bottom, and not the one I PM’d you earlier.

Sweet, got it working.

For those looking for this same functionality on the “Whats New” page, heres a quick fix:

Replace these:

#threads h3 a {
	font-weight:normal !important;
	color:#678 !important;
}
 
#threads .new h3 a {
	font-weight:bold !important;
	color:#58B !important;
}

With this:

#threads h3 a, .title {
	font-weight:normal !important;
	color:#678 !important;
}
 
#threads .new h3 a, a.threadtitle_unread {
	font-weight:bold !important;
	color:#58B !important;
}

In Chrome (and Firefox) you can use a user styles manager addon, might be a bit safer (because the browser won’t overwrite these when updating:))

Chrome Stylist: https://chrome.google.com/webstore/detail/pabfempgigicdjjlccdgnbmeggkbjdhd
Firefox Stylish: [URL=“https://addons.mozilla.org/en-US/firefox/addon/stylish/”]https://addons.mozilla.org/en-US/firefox/addon/stylish/

Thanks guys. This is really nice. It’s nice to have the bold text for the unread and normal for the read topics back. I think I will go in and make the unread topics even bigger. I liked that, it was really usable.

One question though. I notice there is much whitespace at the bottom of each post. Maybe I will try tweaking it just for experience sake. This is the first time I have messed with user CSS profiles for browsers. Very cool.

Here is what I mean about the space. Is there a way to get rid of that?

Some useful changes in there, DS, although I’d add a bottom border to links (at least in paragraphs) if you haven’t already. I could hardly see the links from surrounding text until I sorted that out in user CSS. I’d like to meet the moron at VBulletin who thought that links don’t need to be underlined.

While the pic hasn’t been approved, I know EXACTLY what you are referring to… and it’s part of why even though a post page isn’t EXACTLY tabular data I’d be using a table on it – as their NOT using tables means you can’t bottom align the signature box… so they put it after BOTH the post and the user info… so a really short post ends up the height of the signature/controls and the user info box.

Though in a way it is since the columns are the same type of data, and the rows are each post – that could actually be considered tabular data… I’m not AS offended by that non-table layout as I am say… any of the board indexes which are OBVIOUSLY tabular data, which they went and nest UL, LI, OL, do content cloaking on heading tags instead of having actual relationships, etc, etc… Part of why the average board entry on the board index ends up 3.5k to do 2k’s job.

Yeah, that’s annoying too – definitely something to fix. I don’t mind it on breadcrumbs, headings, etc… but there’s no excuse for killing text-decoration:underline inside posts as it is indeed a usability nightmare, especially if the color chosen is indistinguishable from flow text. I’m still not sure how the hell Wikipedia gets away with doing it.

Yeah I tend to agree that they are tabular data. The header is the date: (Yesterday 15:55) and the data beneath corresponds directly to the header to let us know what was entered under that time. To me that is no-brainer table.

So basically it would be pretty tough to get rid of that extra space? I haven’t gotten a chance to fiddle with it yet.

Great thread, Jason and others. I had a stylesheet for the old forum, but hadn’t gotten around to doing one for the new design. This is great.

I like the way you can choose the location of your user style sheet in Opera, rather than having to burrow in to some godforsaken dungeon folder to bury it forever.

It comes with no instructions that I can find. (Why do these geeks always thing this stuff will be obvious?)