I posted about WordPress.com stripping out CSS3 a while ago. Karim Osman, from the Automattic Happiness Team, contacted me a few days ago that they started allowing more CSS3 in custom CSS. This enables me to add a sidebar on all pages when using the Twenty Eleven theme. Below is the code that I currently use:

@media (min-width:1000px ) {
.one-column #page {
max-width:971px;
}

#primary {
max-width:690px;
float:left;
}

#supplementary {
max-width:230px;
border-top:0;
float:right;
padding-left:0;
padding-right:30px;
}

#supplementary.two .widget-area,#supplementary.one .widget-area {
float:none;
width:100%;
}

#colophon {
clear:none;
}

#site-generator {
clear:both;
}
}

It’s not perfect yet, but it works. Everyone can use this code to get a sidebar on larger screens, that will snap to the bottom (where it originally is positioned) on smaller screens.

Thanks Karim, big thanks to the Happiness Team for making this possible!

UPDATE: It’s announced on the WordPress.com blog too: Custom CSS gets an upgrade.

UPDATE: It is now possible to use CSS3 and media queries on WordPress.com.

One of the things that bugged me since the first time I saw Twenty Eleven, is it’s lack of a sidebar on single post pages. To work around that, I tried to add the footer sidebar to the side of the single column layout. That wasn’t too hard, with a few easy CSS overrides (that even work on WordPress.com blogs, with the Custom CSS Upgrade):

.one-column #page {
max-width:971px;
}

#primary {
max-width:690px;
}

#supplementary {
max-width:230px;
border-top:0;
position:absolute;
top:220px;
left:830px;
}

#supplementary.two .widget-area,#supplementary.one .widget-area {
float:none;
width:100%;
}

Problem with this idea is that this will break the responsive design. This code should only be applied on the full size version of the theme. On any smaller screens, the footer sidebar should be shown below the content. Because my CSS uses absolute positioning, there is no way this will scale well. We need a media query here.

It would work if we would wrap the CSS code in a media query like this one:

@media (max-width > 800px ) { /* CSS GOES HERE */ }

Unfortunately, WordPress.com strips out specific CSS3 properties and characters.

Until WordPress.com supports media queries (and with that, other CSS3 goodies) we can’t fix this in a way that scales well. In case you want to attempt this, give the WordPress.com Custom CSS plugin a try. It is very close to the code they use at WordPress.com.