Challenge Overview

Welcome to 72 hrs CS-TC Help Center Wordpress Theme Build Contest. We just completed a storyboard to get the inital flow for the large TopCoder-CloudSpokes Help Center. For this contest, we need your help in transforming an UI Prototype responsive  to new Wordpress theme build.

Page Requirements
Below are the required pages from UI Prototype


General Rules :

  • Please visit http://community.topcoder.com/studio/help/ for similar site
  • Resources can be downloaded on forum
  • This theme will be installed on different Wordpress instance as fresh theme, so these help pages will be not part of new TC/CS site
  • Create new theme, use an appropiate folder and theme name that will represent this theme. we provide latest TC/CS theme that can be used as baseline
  • This fresh theme should only contain required assets 
  • header, footer, and main navigation should be handled by existing CSS and JS files
  • Please reuse existing header and footer functionality (header.php and foote.php)
  • See [nav-explaination.png] and and  [navigation.xls] file to understand about navigation
  • 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.
  • Ensure you submission clear of HTML and CSS Validation error and warning
  • Watch word typos in every place including the source code. Make sure they have correct meaning
  • Layout (background) should be fluid, depend on browser width
  • Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
  • Please provide animated Glowing link for clickable text
  • Modal window should be center aligned.
  • Clicking overlay area (outside of modal window) should close modal window
  • Current Help Center Home UI Prototype support mobile view, and please keep this functionality
  • 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

 

Overall Theme :

  • Left side navigations (Sections, Topics and sub topics) should be as menus that would be configurable from wp-admin. Please ensure the items order can be re-configured from WP-Admin ->Appearance-> menus
  • Please add New "Community Members". current UI prototype does not have it. see attached CommunityMembers-newsection.docx. Topics under this new section will be displayed in all section below a simple divider  
  • Sections, Topics and sub topics should be as native Wordpress "Page" post_type, and admin should be easy to add/edit/delete topics/subtopics.
  • Please ensure images, table, heading text, paragraph, em, strong displayed properly.
  • FAQs can be as new Custom Post Type, but FAQs should be easy to be tied to related sections
  • Breadcrumb sould be implemented
  • Using child template is recommended, so they will be called by get_template_part() Wordpress function
  • Using WP-Paginate is allowed for pagination
  • Zebra style should be implemented by JS

 

Home Template :
This is main page in the help-center, it will be a gateway for the user to proceed to other sections of the help-center
Current 
help-home.html support mobile view. please keep it as is
HTML source : help-home.html

  • This page will play a very important role in the help-center
  • Please replace Rotate (slideshow) images/banners with single banner, see attached .docx file
  • Left-side navigation contain mainly five sections to start with; they are Design, Development, Data/Algorithms, Copilots/Reviewers, and TopCoder University.
  • Banner should be as image. Clicking on any sections below banner will change the banner 
  • Clicking on any sections left-side navigation will display Section template that will be  described below
  • Clicking on "FAQ" text will display FAQ Home that will be described below
  • Clicking on any sections on FAQ widget will display FAQ template that will be  described below
  • Hide "Submit Tip Now" for now, and don't remove modal window functionality



Sections Landing Page Template :
This template is for all five section pages and all five section should work fine
HTML source : help-section-design.html and help-section-copilot.html
, we only provide two sections for now, but please provide contents (pages structure) for all five sections by assigning same template.

  • Left side navigation will display topics and also sub-topics within current section. each section will have different topics and subtopics
  • Banner should be as image element and banner on this page is different to banners at home page
  • Should support grid and list view layout, and layout changes will be by JS instead of open another page
  • There are Video thumbnails at right-side. All Videos will hosted on youtube should be configured from wp-admin, and video should be played in modal window. current UI Prototype does not have this functionality. admin only need to set VideoID of youtube
  • "Latest" Area next to banner should be replaced with "Get Started" and also remove the date. Items will be 1) Guide for New Competitors and 2) Visit the {section} FAQs where {section} is current section where we are now

 

Topics Template:
HTML Source : help-topics.html

  • Below the topic summary, we will list all the Sub-topics within that topic. clicking on any Sub-topics will open related Sub-topics
  • Should Support both grid and list view as well as Provided UI Prototype


Sub-Topics Template:
HTML Source : help-sub-topics.html

  • Please remove videos column at bottom area, so this template only contain two columns (related and resources)


Search Results Page:
HTML Source : help-search-result.html

  • Autocomplete on search box should work via AJAX and data should be from JSON
  • Please show an animated loading icon below search box while data is being loaded. see [autocomplete-loading .png]
  • Click on the magnifier icon in the search bar will display this search result page
  • Clicking on sections above search result (or next to "Search Result" title) will refine searching process by filtering section={section}


FAQs Landing Page :
Output : help-faq-home.html

  • Replace "Ask a Question" with new "Community Members" section. see attached .docx file
  • Clicking on  any "FAQs section" will open FAQ detail page below

 

FAQ detail :
Output : help-faq-detail.html

  • Hide Favorite icon and its counter for now. we will implemented it later
  • pagination should work, and please provide a lot of dummy content to ensure pagination work properly


Member Tips :
Not Required for now



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: 30036436