Fixing Scrolling Issues in WicketPixie

Out of the box, Chris Pirillo’s WicketPixie theme (the one you see on this site and his) feature some nasty scrolling issues. It’s very choppy and slow, and makes some sites nearly unreadable! But, the problem isn’t foreigners, it’s CSS elements with fixed attributes.

For comparison, scroll from top-to-bottom on both my website and Chris Pirillo’s. The difference should become fairly apparent!

Naturally, WicketPixie features two fixed elements. The background and the bar along the top. This means there are two steps in solving the scrolling issues, neither of which are very hard at all.

The first is going to the Design tab and viewing the WicketPixie options. Make sure Background Image Position is set to scroll, not fixed. Pixie was quite stubborn when I was changing this and it required a few attempts before the options actually saved. Be warned that the checkbox at the bottom of the options page becomes checked mysteriously regardless of your current settings. Be sure to uncheck it if you require before saving your options.

The second is slightly harder, but still no problem. It involves editing some CSS, which cannot be edited through the standard Theme Editor, but must be edited through FTP due to it’s location in wicketpixie/css/screen.css. Find the CSS for #topbar (it’s near the top!) and comment it out. This is done by adding /* before the # in #topbar and a */ after the } at the end of that block. This is so your changes can be reverted easily.

Next, paste the following anywhere in that same CSS file.

#topbar {
	position: absolute;
	top: 0;
	float: left;
	margin: 0;
	width: 100%;
	padding: 5px 0 19px;
	background: url("../images/topbar-bg.png") repeat-x 50% 100%;
	z-index: 999;
}

And voila! Your scrolling issues should be fixed.

Update: Zavrion has uploaded the edited screen.css file. Download it and upload it to WicketPixie’s css folder to apply the CSS changes above. Download!