Opened 9 years ago

Closed 9 years ago

Last modified 9 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 9 years ago.

Download all attachments as: .zip

Change History (14)

#1 @ryelle
9 years ago

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

#2 @Otto42
9 years ago

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

#3 @iandunn
9 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
9 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
9 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
9 years ago

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

#7 @iandunn
9 years ago

In 842:

Central Theme: Open source the Central theme.

See #565.

9 years ago

#8 @ryelle
9 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
9 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
9 years ago

In 850:

Central Theme: Remove stray character from category template.

See #565

#11 @iandunn
9 years ago

In 851:

Central Theme: Raise the header z-index.

Previously the sidebar was being stacked above the submenus.

See #565

#12 @iandunn
9 years ago

In 852:

Central Theme: Add responsive styles for mailing list container.

See #565

#13 @iandunn
9 years ago

This has been deployed. Thanks Kelly :)

Note: See TracTickets for help on using tickets.