Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Welcome to  96 hrs TopCoder - CloudSpokes – Blog Template - WP Theme Build Contest.  We are going to move current http://www.topcoder.com/blog/ site to new site

General Rules :

  • Resources (include XML of current blog) is provided in forum
  • Update provided theme
  • Please create new CSS and JS files for this template
  • Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
  • Please provide animated Glowing link for clickable text
  • Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
  • Don't break any existing functionality
  • Ensure you submission clear of HTML and CSS Validation error and warning
  • Please leave any existing issues on provided UI Prototype, This prototype is being fixed by the winner
  • Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
  • Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example : http://www.cloudspokes.com/,http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
  • Splitting to child templates is recommended, and they will be loaded via get_template_part(). ie : blog-loop.php, sidebar-blog.php
  • Please exclude menus from your exported XML fine, because it will make menus duplicated since we have fixed menu on our sandbox server

 

���Blog Template :
URL : http://siteurl/blog

  • Thumbnails should be configured as Featured image from wp-admin
  • Category list below "Welcome" should be as menu that is configurable from wp-admin, and current category should be highlighted
  • All Widgets in sidebar should be managed as widget from wp-admin
  • Caption below image should be inserted as "caption". please ensure style match to storyboard
  • Social bookmark/sharer below content or excerpt should work fine, we recommend you to use free license plugin
  • Floating Bookmarks Social bookmark/sharer should be implemented

 

Sidebar��� :

  • Build as template part, example : sidebar-blog.php
  • As usual, sidebar should be registered from functions.php so admin can easy to add other widgets later
  • Search form should work fine
  • Subscription form should send data via AJAX, and "thanks for subscription our blog" message should replace entire form. Please validate email by JS before sending via AJAX
  • "Download:" banner should be as native HTML/text widget
  • Category list on sidebar should as widget that is displayed in carousel, using free license plugin is accepted
  • Category list should support touchswipe on mobile view
  • RSS icons next to category name should link to corresponding RSS category
  • Popupar posts list on sidebar should work fine and should as widget, using free license plugin is accepted
  • Clicking "show more" will load next 5 popular post items via JS

 

Landing template :
URL : http://siteurl/blog

  • Pagination (Next,Prev) should be implemented
  • Clicking Show More button on mobile view will load next items via AJAX

 

Single template :
URL : http://siteurl/blog/{postname}

  • Disquss comment system (plugin) should work fine on this template
  • Tags should be implemented

 

Category Template :

  • If current category is one of categories below "Welcome" on mobile view, then please display it as default. see [06_M_Categories_page.png]
  • If no matches blog found, please show message as designed in storyboard
  • Pagination (Next,Prev) should be implemented
  • Clicking Show More button on mobile view will load next items via AJAX

 

Search Result Template :

  • If no matches blog found, please show message as designed in storyboard
  • Pagination (Next,Prev) should be implemented
  • Clicking Show More button on mobile view will load next items via AJAX

 

Thumbnails :

  • Thumbnail should be as {featured_image}
  • Thumbnail has two version, one for desktop view and another is for mobile view. since size is different, i think we need to use add_image_size Wordpress Codex for both size
  • If featured image is not configured, then please display simple placeholder image as default, we'll relace it later

 

Specific Wordpress Requirements

In addition to following Wordpress standards and best practices, please note the following requirements.

  • General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
  • Make proper use of the Wordpress Menu system.
  • Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
  • Use sidebars when appropriate. We should be able to add widgets to sidebars.
  • Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.

 

Specific HTML/CSS/JavaScript Requirements

  • You MUST use HTML5 and CSS/CSS3
  • Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
  • Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
  • No inline CSS styles - all styles must be placed in an external stylesheet.
  • Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
  • Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
  • Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
  • Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
  • Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

  • IE 7+
  • FF 7+
  • Safari 5+
  • Chrome Latest
  • Chrome / Safari on tablets / phones


Final Submission Guidelines

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30038174