Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#565 closed defect (bug) (fixed)

Add responsive styles for

Reported by: iandunn's profile iandunn Owned by: iandunn's profile iandunn
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: good-first-bug


WordCamp Central wasn't designed to be responsive, but we can make it adapt well enough by just adding some media queries.

Attachments (1)

meta-565.diff (20.4 KB) - added by ryelle 10 years ago.

Download all attachments as: .zip

Change History (14)

#1 @ryelle
10 years ago

I'm interested and have time to tackle this. Can the theme be open sourced?

#2 @Otto42
10 years ago

Version 0, edited 10 years ago by Otto42 (next)

#3 @iandunn
10 years ago

That's on my list, but it needs to be audited and probably cleaned up a bit first. I can't guarantee I'll have time to do that anytime soon, though.

Since it's mostly just adding CSS, one way to do it would be to use a browser extension like Stylebot (chrome) or Stylish (FIrefox) to create custom rules for the site, and then paste those here. If you need any markup changes, just paste those too and I can merge them at the same time.

#4 @samuelsidler
10 years ago

Since we have someone that wants to work on it, can we get it audited sooner? Seems like it shouldn't be too hard to audit a theme and I bet @ryelle could do some of the clean up along the way. ;)

#5 @nacin
10 years ago


Not vouching for the security of the regular expressions in get_the_link_url() and make_tweets_clickable() methods in functions.php. The former has a fishy character class, and the latter is full of fishy character classes.

wcpt_wordcamp_title() was unescaped in an attribute in a few situations. This is now fixed and live.

Is otherwise good.

#6 @iandunn
10 years ago

Awesome, thanks. Both of those were dead code, so I just removed them.

#7 @iandunn
10 years ago

In 842:

Central Theme: Open source the Central theme.

See #565.

10 years ago

#8 @ryelle
10 years ago

meta-565.diff is a large patch :) This has the base style changes, along with some other tweaks. I needed to move the sidebar out of the #container div in a few templates. There's also now a js/navigation.js for the mobile menu toggle.

Details of the style changes:

I grabbed the base of these styles from Responsive TwentyTen, and adapted the custom sections as needed.

The header is pretty simple, the menu drops below the logo at "tablet" size, and then switches to a toggle button at 500px. Footer is also straightforward.

For the front page, the slider drops down below the content at tablet size, then disappears at "phone" size. The 3 columns squish a little at tablet size, but drop down to one column at 660px.

Archives, single posts, and single pages keep their sidebars at tablet, but drop to one column, again at 660px.

Single WordCamp pages were trickier, and still a little weird. At tablet they're basically the same, but at smaller sizes the bottom 3 column drops to 2 (website & info side by side), with Past WordCamps below. At phone size they drop to one column. The banner image looks strange at phone size, but that's just how that image is cropped.

#9 @iandunn
10 years ago

  • Owner set to iandunn
  • Resolution set to fixed
  • Status changed from new to closed

In 848:

Central Theme: Add responsive styles.

Fixes #565
props ryelle

#10 @iandunn
10 years ago

In 850:

Central Theme: Remove stray character from category template.

See #565

#11 @iandunn
10 years ago

In 851:

Central Theme: Raise the header z-index.

Previously the sidebar was being stacked above the submenus.

See #565

#12 @iandunn
10 years ago

In 852:

Central Theme: Add responsive styles for mailing list container.

See #565

#13 @iandunn
10 years ago

This has been deployed. Thanks Kelly :)

Note: See TracTickets for help on using tickets.