!!!FAST 30 hrs!!!! - TopCoder-CloudSpkes Wordpress Template Build and Merging

Welcome to 30hrs TopCoder - CloudSpokes – Content Pages WP Theme Build Contest.  We are building a NEW website from scratch and we now need you to convert the provided storyboard  designs to responsive wordpress theme using HTML5 and CSS3.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
On this  phase, we will build a responsive wordpress theme from provided UI Prototype.

Resources :
res.zip contain :
- latest theme that need to be updated
- latest TC_APIplugin,
- UI Prototype contain overview.html, case-studies.html, case-studies-detail.html please ensure template will work fine as well as this UI Prototype
- UI Prototype contain challenge-detail-software.html please ensure template will work fine as well as this UI Prototype
 

General Rules :

• Less Templates,Less Custom Field, More Purposes. Keep in your mind we will play more on {post_content} by using WYSWYG editor instead of template creation. this contest will only create 1-2 template(s). So Please ensure your CSS can handle elements/objects that are created from WYSWYG editor (ie:list, table, image)
• The editor must function as expected by our content editors. When then set styles via the rich editor, it should preview and display correctly on the site. This includes inserting images into posts, formatting fonts, positioning text around images, etc.
• Convert provided UI prototype to worpdress template, Please merge to provided wordpress theme
• 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
• 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
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
• Creating "quote" custom_field is accepted since almost all pages have it
• Don't break any existing home,community,challenges pages

 

General Page Template (include mobile view) 
URL : http://siteurl/{pagename} OR (relative)

• This template is for single template of plain Page(s). Please use ‘Overview template’ or something like that as template name.
• Copy/content include two boxes below Real Result section should be part of {post_content}. so everything should be editable from Post Body Editor
• Quote section will always depend on page or quote probably is different for each pages. Example : http://www.cloudspokes.com/what-we-do, http://www.cloudspokes.com/overview
• Grab content of http://www.cloudspokes.com/overview in order to ensure this template work fine
• Related content should work find. There are some methods to display related content by using Wordpress Codex.
• Keep in your mind this template is NOT only for overview page, but also for other pages . Probably upcoming page will use this template. Please Provide Us dummy pages that use this template
• Remove search form for now
• Please use provided TC_API Plugin Most Recent challenges widget. Clicking Challenge title will link to /contest-detail/{ContestID}.

Another Single page Template (include mobile view)
URL : http://siteurl/{pagename} OR (relative)
Reference : http://www.cloudspokes.com/resources

• This is another example how to use ‘Overview template’ described above, since everything should be editable from Post Body Editor. so images, resource title, description will be edited/added from native WYSWYG post_content editor
• Keep in your mind this template is NOT only for resources. Probably upcoming pages will use this template. Please Provide us dummy pages that use this template
• Grab content of http://www.cloudspokes.com/resources to ensure ‘Overview template’ work fine

Case Studies Front Page template (include mobile view)
URL : http://siteurl/case-studies
This site will be similar to http://www.topcoder.com/case-studies

• Please provide fancy mouse hover state (not provided in storyboard)
• Remove search form for now
• Using custom post_type is accepted, and logo should be as {featured_image}
• Clicking the logo will display introduction box with animation (transition). introduction box will shift down all the icon below

Case Studies Single Page (include mobile view)
URL : http://siteurl/case-studies/{slugname}
Storyboard : [{D} 03B ~ Case Studies - More Details (S0).png, {M} 03B ~ Case Studies - More Details (S0).png]

• Sidebar Content is relative, sometime admin will add hyperlink image/banner there, OR maybe add two youtube players OR maybe just add video thumbnai OR another add HTML content.
• logo is as {featured_image}
• Big Image/Banner is relative and is as part of {post_content}, sometime admin will add another image size, will add two images. Please ensure admin can manage it easily
• Remove search form for now
• Quote content is depend on case study item, and should be easy to be editable
• Video Player is only an illustration in order to show you that admin can embed video youtube/vimeo there, so player should NOT match to storyboard.

Challenge Detail Page
We also provide separate UI Prototype for challenge detail. please convert and merge it to main wordpress theme :
URL : http://siteurl/challenge/{contestID},

• You need do rewrite_url (NOT Redirect) so it will send request to http://siteurl/challenge/?contestID={contestID},
  maybe something like this : add_rewrite_rule ( '^challenge/([^/]*)/?$', 'index.php?pagename=challenge&contestID=$matches[1]', 'top' );
• Use existing get_contest_info($contestID) PHP function to fetch data from API

 

Specific Wordpress Requirements

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

• Provide actual sreenshot to represent theme
• 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