Tag Archives: forums

Styling the WordPress forums


Bored: I was bored again so decided to work on the forum styling a bit more, i also decided to write a Greasmoneky script that works alongside the style. Again, only really any use to Firefox users (unless you know how to inject HTML and JS into a page), but it does have a couple of useful functions.

Pages: Places page links in the thread listing title column, so you can click straight through to whichever page of a thread you like.
Version: Added version 3.0 into the thread form (i’ll remove it when it’s no longer needed).
Thread Status: Moved the thread support dropdown into it’s own row of the form table.
Replies not Posts: Updated the “Posts” column on thread listing to show as “Replies” instead and updated count accordingly.

Changes overall, script & style, are to aid in moderation tasks on the forum, i’m quite chuffed so far, even with hacky work… 🙂

I can’t force Automatic to work on the forum and update it, but i certainly can write hacks for making the pages more enjoyable to use…

// ==UserScript==
// @name           wpforums
// @namespace      https://t31os.wordpress.com
// @description    testingstuff
// @include        http://wordpress.org/support/*
// ==/UserScript==
var $;
(function(){
	if (typeof unsafeWindow.jQuery == 'undefined') {
		var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
		GM_JQ = document.createElement('script');
		//GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
		GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
		GM_JQ.type = 'text/javascript';
		GM_JQ.async = true;
		GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
	}
	GM_wait();
})();
function GM_wait() {
	if (typeof unsafeWindow.jQuery == 'undefined') {
		window.setTimeout(GM_wait, 100);
	} 
	else {
		$ = unsafeWindow.jQuery.noConflict(true);
		letsJQuery();
	}
}
function letsJQuery() {

	$('<option value="3.0">3.0</option>').insertAfter('select#wp-version option[value="-1"]'); 
	$('select#wp-version option[value="0"]').text('Other'); 

	$('h2 span.button').removeAttr( 'class' ).css('float','right');
	$('h2 span a').html( 'Start Thread' );
	
	var thread_status = $('.form-table tr td:nth-child(2) p:nth-child(3)').html();
	if( thread_status ) {
		$('.form-table tr td:nth-child(2) p:nth-child(3)').remove();
		var new_row = '<tr><th>Status</th><td class="thread_status">'+thread_status+'</td></tr>';
		$( new_row ).insertAfter('.form-table tr:last-child');
	}
	// Change posts heading to replies
	$('.widefat tr th:nth-child(2)').text('Replies');
	// Now some post count jiggery 
	$('.widefat tr td:nth-child(2)').each( function() {
		// Get the reply count
		var thread_post_count = parseInt( $(this).text() );
		// If the count is more than 30 we have more then 1 page.
		if( thread_post_count > 30 ) {
			// Append the title column with a new element
			$(this).prev('td').append('<span>&nbsp;&nbsp;</span>');
			// Work out the amount of pages
			var thread_pages = Math.ceil( thread_post_count / 30 );
			// Get the URL of the thread
			var thread_link = $(this).parent().find('td:first-child a').attr('href');
			// Figure out where the query string starts
			var query_string_pos = thread_link.indexOf("?replies=");
			// Check for the query string
			if( query_string_pos ) {
				// Clone the link, keeping only the base url
				var thread_page_link = ( thread_link.substring( 0 , query_string_pos ) );
				// Counter
				var i = 1;
				// Loop to build page links
				for( i = 1; i <= thread_pages; i++ ) {
					// Hard-coded limit of 25 pages
					if( i > 25 ) break;
					// Var to hold link code
					var page_link = '<a class="page-numbers" href="'+ thread_page_link +'/page/'+ i +'">'+ i +'</a>';
					// Append link to title element created earlier
					$(this).parent().children('td:not([class])').children('span').append( page_link );
				}
			}
		}
		// Reply count is the posts count minus one, simples
		var thread_replies = ( thread_post_count - 1 );
		// 0 replies, hyphen is easier to spot, ie. a thread with no replies
		if( 1 > thread_replies )
			$(this).text( '-' );
		else
			$(this).text( thread_replies );
		return;
	});
	$('.post pre').click( function() { 
		// If the pre element has no style attribute
		if(! $(this).attr('style') ) {
			// Store current width in var
			var pre_w = $(this).width();
			// Set position to absolute
			$(this).css({ 'position':'absolute' });
			// If width is now reduced there's nothing to be done, so reset the change
			if( pre_w > $(this).width() )
				$(this).removeAttr('style');
			// Else no reset, insert dummy element to push content back down, matching the original element
			else 
				$('<pre style="border:0;height:' + ( $(this).height() ) + 'px;">&nbsp;</pre>').insertAfter(this);
		}
		else {
			// If style is already applied, then we're resetting, remove style
			$(this).removeAttr('style');
			// Remove dummy element
			$(this).next('pre').remove();
		}
		return false;
	});
	// Stop deleted post links from being clickable (so i don't mistakenly follow any spammy links) 
	$('li.deleted .post a').click( function() { return false; });
}

— Original content below —

I had been feeling a little burnt out and bored today, so decided i’d revamp the Stylish template i’ve been using on the WordPress forums.

For those of you who don’t know what Stylish is, it’s an extension (or add-on if you prefer) for Firefox that allows you to apply any(pretty much) Firefox supported CSS selectors to any webpage, or a series of webpages (using a prefix).

Using Stylish means you can hide unwanted ads, restyle an area that you don’t like, or outright re-style a website, all with some basic (or complex if you like) CSS via an easy to use extension. A small box is shown on screen and changes can be previewed before saving, it’s faster than testing your own CSS on a local site as the preview button applies the custom CSS there and then.

Anyway, moving on, i spent some time writing some CSS to restyle the forum, so i don’t find it so frustrating to look at (seeing the same thing over and over does get naturally boring).

I am posting about this simply to offer the code to other Firefox users, who might be able to appreciate having a different look whilst using the forum, first though, let me show you some comparison images check out the pics, so you can decide if it’s really for you (of course testing the style takes only a few moments, and you don’t necessarily have to use Stylish, although frankly, using Stylish makes the task much easier).

WordPress Forums Thread Styling
WordPress Forums Thread Styling

WordPress Forums Thread List Styling
WordPress Forums Thread List Styling

WordPress Forums Profile Styling
WordPress Forums Profile Styling

It’s not a total overhaul, just some minor tweaks and changes here and there. There’s also some changes to the forum profile pages, but you’ll have to try out the style to see how it looks, the jpegs don’t really do the styling any justice at all.

Firefox users who have stylish, click your Stylish icon (toolbar by default), and select “Write new style -> Blank Style”, give the style a name (this isn’t important, so give it any name you like), then paste the following code into the bottom area, and click “Save”, or if you prefer click “Preview” to see the style in action.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://wordpress.org/support/") { 
/* 
	Used across several pages 
*/
	body { 
		background-color: #fff!important;
		background-image: url('https://t31os.files.wordpress.com/2010/05/75086759.gif')!important;
		background-repeat: no-repeat!important;
		background-position: top left!important; 
	}
	p.login { font-size:120%!important;line-height:3em!important;padding-top: 3em!important }
	p.login small { font-size:100%!important }
	
	#pages { white-space:nowrap!important;}
	
	#pages .page-numbers, 
	.topicnav .page-numbers { color:#666!important;padding:6px 10px!important }
	
	#pages a.page-numbers, 
	.topicnav  a.page-numbers { background-color:#fafafa!important; }
	
	#pages a.page-numbers.prev,
	.topicnav a.page-numbers.prev,
	#pages a.page-numbers.next,
	.topicnav  a.page-numbers.next	{ background-color:transparent!important; }
	
	#pages span,
	.topicnav span { background-color:transparent!important;border-color:transparent!important }
	
	.bbcrumb { font-size:inherit!important;margin-top:1em!important;display:block!important; }
	.topicnav .col-6 { padding:0!important; }
	.topicnav p { margin:0!important; }
	.topictitle h2 { padding:0!important;margin:.8em 0!important; }
	h2.post-form { display:none!important; }
}
@-moz-document url-prefix("http://wordpress.org/support/forum") { 

	h2 > span.button { float:right!important;margin:0!important;line-height:1.1em!important; }
	#pagebody .button { -moz-border-radius:2px!important;border:none!important;background:none!important }
	#pagebody * { font-size:100%!important; }
	#pagebody h2 { font-size:2em!important }
	#pagebody h3 { font-size:1.65em!important; }
	#pagebody h4 { font-size:1.5em!important }
	
	.forumlist table { 
		background-color:#f9f9f9!important;
		border:1px solid #ccc!important;
		line-height:1.5em!important; 
	}
	.forumlist .widefat * { font-size:inherit!important; }
	.forumlist .widefat td+td,
	.forumlist th { text-indent:.8em!important; }
	.forumlist th { border-bottom:none!important; color:#888; padding:0!important }
	.forumlist td { border-bottom:none!important; padding:0!important }

	.forumlist td.num { white-space:nowrap!important }
	.forumlist td.num:last-child { padding-right: 1em!important }
	.forumlist table th,
	.forumlist table td { background-color:transparent!important;line-height:2.2em!important; }
	.forumlist table td:first-child { padding-left:.5em!important; }
	.forumlist table a { outline:none!important; }
	.forumlist tr { background-color: transparent !important; }
	.forumlist tr > :first-child { padding:0!important }
	.forumlist .widefat tr > :nth-child(2) { text-align:center!important }
	.forumlist thead { background-color:#eaeaea!important }
	.forumlist .form-table { border-bottom:none!important; }
	.forumlist .form-table td > :not(p),
	.forumlist .form-table th > :not(p) { margin:.5em 0!important; }
	.forumlist .form-table tr+tr { border-top:1px solid #ccc }

	tr.alt { background-color: #fff!important; }
	tr.sticky { background-color: #FFFDE4!important; }
	tr.sticky.closed { background-color: #FFFcd0!important; }
	tr.message_active { background:#f1f1f1!important; }

	.postform { margin:2em 0 0!important }
	.postform fieldset > p { text-align:center!important; }
	.postform tr:nth-child(2) p { display:none;margin:.5em .5em .5em 0!important; float:left!important; }
	.postform tr:nth-child(2) p+p { display:block!important }
	.postform tr:nth-child(2) p+p+p { float:right!important }
	.postform tr:nth-child(3) p { display:none!important; }

	.postform input:not([class="ed_button"]),
	.postform select,
	.postform option { line-height:2em!important; }

	.postform textarea, 
	.postform input,
	.postform select { -moz-border-radius:.2em!important;border-color:#ccc!important }

	.postform input:not(.ed_button):not(#postformsub) { padding:0!important;text-indent:.5em!important; }
	.postform textarea { padding:.6em!important }

	#wp-version { width:10em!important; overflow:visible!important;white-space:nowrap!important }
	#wp-version option { width:auto!important; text-indent:.5em!important; }
	#wp-version option:empty {height:2em!important}
	#topic-paging { float:none!important;clear:both!important}

	#resolvedformsub { margin-top:1em!important}

	p.submit { padding:.5em 0!important; }
	p.submit #postformsub { padding:.5em!important }

	#profile-menu li:first-child { border:none!important}
	#post_content {  }
	#ed_toolbar { margin-bottom:0!important; } 
	.ed_button { font-size:100%!important;line-height:2em!important;padding:.8em!important;margin:0 .4em 0 0!important }
	#ed_pre { font-family:inherit !important}
}

@-moz-document url-prefix("http://wordpress.org/support/profile") { 

	#pagebody * { font-size:100%!important; }
	#pagebody h2 , 	
	#pagebody h3 , 
	#pagebody h4 { margin:0!important;padding:0!important;font-family:Georgia,Times,"Times New Roman",serif;font-weight:normal!important; }
	#pagebody h2 { font-size:2.2em!important }
	#pagebody h3 { font-size:1.65em!important; }
	#pagebody h4 { font-size:1.5em!important }

	.wrapper { margin:0 auto!important; }
	.wrapper .col-12,
	.wrapper .col-6 { 
		width:auto!important;
		margin:0 auto!important;
		padding:0 14px!important;
		float:none!important;	
		clear:both!important;
		line-height: 3em!important;		
	}
	.wrapper .col-6 { 
		border:1px solid #ccc!important;
		margin:0 14px 3em!important;
		padding:0!important;
		background-color:#fafafa!important; 
		clear:both!important;
	}
	#pagebody .topictitle h2 { margin:0 0 .5em!important; }
	.topicnav p { margin:0 0 1em!important;float:none!important;text-align:center!important }
	.topicnav .col-12 p { text-align:left!important;line-height:1.6em!important }
	
	#profile-menu { 
		line-height:2.5em!important;
		text-align:center!important;
		margin:0!important;
	}
	#profile-menu li { padding:0!important;margin:0 0 .2em!important;border:none!important; }
	#profile-menu li a { padding:.2em 1em!important;border:1px solid #dadada!important;background:#f9f9f9;display:block!important; }
	#profile-menu li.current a { color:#fff!important;border-color:transparent!important;background:url("http://s.wordpress.org/style/images/download-tab-bg.png") repeat-x scroll left bottom #D54E21!important; }
	#profile-menu li:not(.current) a:hover { cursor:pointer!important }

	#useractivity { display:none!important; }

	.user-recent ol { 
		clear:both!important;
		padding:0!important;
		margin:0!important;
	}
	.user-recent > p { 
 		padding:0 1em!important;
	}
	.user-recent h4 { 
		clear:both!important;
		border:none!important;
		color:#888!important;
		border-bottom:1px solid #ccc!important;
		background-color:#EAEAEA;
		line-height:2.2em!important;
		text-indent:.7em 
	}
	.user-recent li { 
		line-height: 1.5em!important;
		list-style: none!important;
		text-align: right!important;
		margin:0!important;
		padding:.2em 1em!important;
		height:3.5em!important;
		clear:both!important;
		border-top: .1em solid #fff!important;
		border-bottom: .1em solid #dfdfdf!important;
		background-color:inherit!important;
	}
	.user-recent li:last-child { border-bottom:none!important; }
	.user-recent li a { display:block!important; }
	.user-recent li a, .user-recent li span {clear:both!important;float:left!important;text-align: left!important;}

	.user-recent .freshness { clear:both!important;font-weight:bold!important }
	#pagebody .user-recent li { font-size:.9em!important }
	#pagebody .user-recent li a { font-size:1.2em!important;line-height: 1.5em!important; }
	
	#userlogin { color:#888!important;background: #EAEAEA!important;line-height:2em!important;border:none!important;-moz-border-radius:0!important;border-bottom:1px solid #ccc!important; }
	
	#theuser { padding:0!important;background:#fafafa!important;-moz-border-radius:0!important;width:100%!important }
	#theuser * { margin:0!important;padding:0!important; }
	
	dl#userinfo { position:relative!important;width:80%!important;padding:.6em 0!important; } 
	#useravatar { margin: 1em!important; }
	#useravatar .avatar { width:4.3em!important;height:auto!important;border:none!important }
	
	#userinfo dt { line-height:1.4em!important;font-weight:normal!important;width:8em!important;text-align:left!important;margin:0!important }
	#userinfo dd { line-height:1.4em!important;margin:0 0 2px 0!important;display:block!important;white-space:nowrap!important; }
	
	#profile-form {
		margin: 0!important;
		padding: 0!important;
	}
	#profile-form h3 { margin: 0!important;line-height:2em!important; }
	#profile-form table { border:1px solid #ccc; width:100%!important; background: #fafafa!important;margin: 0 0 1em!important; }
	#profile-form table tr { background: transparent!important; } 
	
	#profile-form th { text-indent: 1em!important;color:#808080!important; } 
	#profile-form td * { font:inherit!important }
	#profile-form th, 
	#profile-form td { 
		border:none!important;
		border-bottom: .1em solid #ccc !important;
		padding:0!important;
		line-height:4em!important;
		height:4em!important;
		vertical-align:middle!important;
	}
	
	#profile-form label { padding:0!important; } 
	#profile-form table input { padding:0 0 0 .5em!important; } 
	
	#profile-form select, 
	#profile-form table input,
	#profile-form option,
	#profile-form ul,
	#profile-form li, 
	#profile-form label { 
		line-height:2.5em!important; 
		margin:0!important;
	} 
	#profile-form p { line-height:1.5em!important; margin:0 0 1em!important; }
	#profile-form ul { margin:0 0 1em 1em!important; }
	
	#profile-form ul,
	#profile-form li { list-style: none inside!important; }
	
	p.submit { border:none!important; }
	th sup.required { float:right!important; margin-right: 1em!important; }
}

@-moz-document url-prefix("http://wordpress.org/support/topic") { 

	p.submit { padding:1em 0!important; }
	p.submit #postformsub { padding:1em!important }
	#topic-paging { margin:0!important }
	
	#pagebody { width:960px!important;margin:2.4em auto!important; }	
	#pagebody * { font-size:100%!important }
	#pagebody h2 { font-size:2em!important }

	#pagebody .wrapper { width:auto!important;margin:0!important; }
	#pagebody .col-10 { width:76%!important;margin:0 1.2%!important; }
	#pagebody .col-10 input { 		
		-moz-border-radius:5px!important;
		line-height: 2em!important;
		margin:0 .5em 0 0!important;
		padding:0 .5em!important;
		color:#464646!important;
		text-decoration:none;
		text-shadow:0 1px 0 #FFFFFF;
		background:url('http://s.wordpress.org/style/images/white-grad.png') repeat-x scroll left top #F2F2F2!important;
		font-size:1em!important;border:1px solid #bbb; 
	}
	#pagebody .col-10 input:not([class*="ed_button"]) { 
		text-transform:capitalize;
	}
	#pagebody .col-2 { padding:0!important;margin:0!important;width:20%!important; }

	#pagebody .post p {margin-bottom:1.5em!important}
	#pagebody .post p:last-child {margin-bottom:0!important}
	
	li.postitem { float:none!important;border:none!important;padding:0!important;width:100%!important;margin:0 0 1em!important }
	li.postitem.bozo { background-color:#ffffcc!important; }
	li.deleted { border-color:#f1aaaa!important;background-color:#FFE1E1!important; }

	.post { margin:0!important;padding:.6em 1em!important;font-size:inherit!important }
	.post p:last-child { margin-bottom:0!important; }
	.post pre , .post code { margin:0 0 10px!important;clear:both!important }
	.post blockquote { padding:7px 10px!important;border-left:10px solid #dadada!important; }

	.threadpost,
	.threadauthor { 
		float:none!important;
		margin: 0!important;
		width:auto!important;
		padding:0!important;
		background-color:#fafafa!important; 
	}
	.threadauthor {
		color:#888!important;
		border:none!important;
		overflow:visible!important; 
		line-height:2em!important;
		background-color:#f5f5f5!important; 
	}
	.threadpost { line-height:1.6em!important; }
	.deleted .threadauthor a { display:inline!important;color:#900!important; }
	.deleted .threadauthor p { border-bottom-color:#f1aaaa; }
	.bozo .threadauthor p { border-bottom-color:#f1f199; }
	
	.threadauthor br { display:none!important }

	.threadauthor p,
	.threadpost p { width:auto!important}

	.threadauthor p { margin:0!important;padding:.5em!important; }
	
	.deleted .threadauthor p { background:#f1aaaa; }
	.bozo .threadauthor p { background:#fafaa1}

	.threadauthor p small { float:right!important;margin: 0!important; }
	.threadauthor p > strong { /* author name*/ }		
	.threadauthor p small a + a + a { 		
		padding:.5em!important;
		text-transform:uppercase;
		background:url('http://s.wordpress.org/style/images/white-grad.png') repeat-x scroll left top #F2F2F2!important;
		border:1px solid #bbb!important; 
	}
	.threadauthor p small a:nth-child(7) { 
		background:url("http://s.wordpress.org/style/images/download-tab-bg.png") repeat-x scroll left bottom #D54E21!important;
		border-color:#900!important;
		color:#fff!important; 
	}
	.threadauthor .avatar { 
		display:block!important;
		float:left!important;
		height:2em!important;
		width:2em!important;
		margin-right: .5em!important; 
	}
	
	.threadauthor .authortitle { margin:0 1em 0 0!important; }
	
	.deleted .post p::after { content:""} /* Adds content, for testing whilst styling */
	
	ol#thread { margin:0 0 0 0!important; }
	ol#thread li:first-child { margin-top:0!important; }
	
	#resolvedformsel, 
	#resolvedformsel option { font-size:120% }

	.topicmeta * { margin:0!important;padding:0!important;font-size:inherit!important; }

	.topicmeta ul { margin:0 !important; }
	.topicmeta h4 { margin:0!important;border:0!important;line-height:2em;background-color:#f5f5f5!important; }
	.topicmeta .tags { margin-top:1em!important; }
	.topicmeta .tags p { background-color:#fafafa; }
	
	.topicmeta h4,
	.topicmeta ul, 
	.topicmeta fieldset { padding: .5em!important;background-color:#fafafa; }

	.topicmeta li { padding:0!important;line-height:2em!important; }
	.topicmeta li.resolution-flipper { padding:0!important }
	.topicmeta a.rsslink { background-position:right center!important;display:block!important }

	.topicmeta a[href$="/favorites"]::before {content:"View "}

	.topicmeta #tag,
	.topicmeta #tagformsub,
	.topicmeta #resolvedformsub { padding:0.5em!important;-moz-border-radius:4px!important; }
	.topicmeta #resolvedformsel { margin:0 0 .5em!important }
	.topicmeta #resolved select { line-height:1.7em!important;padding-left:0.2em!important }
	.topicmeta #resolved option { line-height:1em!important;padding:0.5em!important; }
	
	.topicmeta .tags p { padding:.5em 1em!important;margin-top:.5em!important; }

	.post-form { clear:both!important }
	.post-form tr {background:none!important}
	.post-form th {display:none!important}
	.post-form td {padding:10px 0!important;text-align:center!important}
	.post-form p {margin:0!important;border:0!important;text-align:center!important}
	.post-form textarea { background:#fff!important;width:90%!important;margin:10px 0!important;border-width:5px!important;border-color:#e7e7e7!important;padding:.5em!important; }
	.post-form textarea:focus { }

	form.postform table { background:#fafafa!important; }
	form.postform table p { line-height:3em!important;margin:0 28px!important;text-align:left!important }
	form.postform table p code { background:#fff!important;line-height:1.3em!important;padding:.6em .5em!important;-moz-border-radius:8px!important;margin-right:-5px!important }
	#pages { text-align:right!important;display:block!important;float:none!important;margin:0 auto!important;width:100%!important }
	div.col-4 { margin:0!important;padding:0!important; }
	p#pages { margin:0!important;display:block!important; }
	div.col-3 { margin-left:0!important;width:100%!important; }
	div.col-3 p#pages { text-align:center!important; }
	
	.admin { clear:both!important;color:#fafafa!important;text-align:center;padding:10px!important;margin:0 0 10px 0!important;background:#fafafa!important; }
	.admin a { 
		-moz-border-radius:5px!important;
		line-height:2em!important;
		margin:0!important;
		padding:.5em .7em!important;
		color:#464646!important;
		text-decoration:none;
		text-shadow:0 1px 0 #FFFFFF;
		text-transform:capitalize;
		background:url('http://s.wordpress.org/style/images/white-grad.png') repeat-x scroll left top #F2F2F2;
		font-size:1em!important;border:1px solid #bbb;
	}
	.admin #topic-move { padding-top:10px!important;color:#000!important; }
	.admin #topic-move select { margin-right:10px!important}

	#ed_strong { margin-left:10px!important}
	.ed_button { font-variant:small-caps!important}
}

@-moz-document url-prefix("http://wordpress.org/support/view/no-replies") {
	tr.closed { display:none!important }
}

Try it out, let me know what you think. Feel free to post a comment, no registration needed, and it’s always nice to hear back from visitors.