Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Welcome to the TCO14 WordPress Responsive Frontend Theme Build Prototype Challenge! The goal of this project is to build a clean WordPress theme from scratch utilizing mobile first framework Bootstrap 3.

This is the 2nd part of this new theme build, we previously built the backend functionality needed to build the frontend pages.

Please follow the Competition Task Overview and let us know if you have any questions



Final Submission Guidelines

Competition Task Overview

The goal of this challenge is to build the frontend look and feel of the TCO14 theme based on the provided storyboards. You need to create your theme over the provided wordpress theme.

We are using Wordpress 3.3.1  for live server, so please make sure your submission including scripts and plugins must work properly in this version.

Keep in mind that we will be using Bootstrap 3 in completing all the frontend templates/pages. Anything that will be rendered in the frontend should be in compliance with Bootstrap 3.

General Rules

  • Test in all the required browsers.
  • Watch word typos in every place including the source code. Make sure they have correct meaning.
  • DO NOT render any CSS properties from JavaScript functions.
  • Theme development should be mobile first.
  • All pages will be in full browser width
  • Height of the page will depend on its content, so there will be no fixed height. This is applicable for main content and the sidebars.
  • Footer will NOT be in fixed position

Theme Requirements

Changeable Logo
The provided theme has backend support for changing theme's logo. The displayed logo in the frontend should use this.

Menu

  • Primary, Secondary, and Tertiary navigations should be created under one Menu name only.
  • This should be compliant with Bootstrap 3 Navbar. Pull down menu should be taken in consideration but on the active page still shows the nav layout like in the storyboard, you are open to make work around on this.
  • Register nav item will be on the right side of the Primary nav, though this can be hardcoded and not part of the actual WP Menu function

Page Template

  • The following are the only page template to chose from when creating a page
    • Default Template - this will be index.php and this will have a full width page template
    • Left Sidebar - a template that has sidebar on the left
    • Right Sidebar - a template that has sidebar on the right
    • Two Sidebars - a template that has sidebar on the left and on the right
  • Single page of regular post type (single.php) will have a template that follows the template of the designated "Blog" page

Sidebar

  • The theme will be having dynamic sidebars and we will be using SMK Sidebar Generator
  • Each page has an option to define what sidebar to appear on the left and/or on the right aside and this should be implemented in your theme.

Responsive Guidelines

  • Extra small devices (mobile phones with width of less than 768px)
    • logo will be on top left
    • navigation button trigger is on the top right
    • register button will appear on the left part of the navigation button trigger
    • see the provided mobile_1_Home_Menu.png as reference for the logo placement, register and navigation button trigger, and navigation style structure
    • whenever applicable, the following will be stacked over each other in just one column and in particular order: left sidebar, main content, rigth sidebar 
    • footer layout reference: mobile_1_Home.png
  • Small devices (tablets with width of equal or more than 768px)
    • logo, navigations, register button, and footer will be similar from the provided storyboard
    • if the page template has only 1 sidebar (either left or right), the sidebar will contain 4 units (.col-sm-4), and the main content will have 8 units (.col-sm-8)
    • if the page template has both left and right sidebar, left sidebar will have 4 units, main content will have 8 units, and right sidebar will stack under them or 12 units.
  • Medium devices (desktop with width of equal or more than 992px)
    • logo, navigations, register button, and footer layouts and design will be inherited from small devices
    • if the page template has only 1 sidebar (either left or right), the sidebar will contain 4 units, and the main content will have 8 units (inherited from small devices)
    • if the page template has both left and right sidebar, left sidebar will have 3 units, main content will have 6 units, and right sidebar will have 3 units
  • Large devices (large desktops with width of equal or more than 1200px)
    • logo, navigations, register button, and footer layouts and design will be inherited from small devices
    • if the page template has only 1 sidebar (either left or right), the sidebar will contain 4 units, and the main content will have 8 units (inherited from small devices)
    • if the page template has both left and right sidebar, left sidebar will have 3 units, main content will have 6 units, and right sidebar will have 3 units (inherited from medium devices)

Pages
In general, use the available shortcodes to populate the content of the following pages, DO NOT create special template just to create specific feature of a page. In any case, refer to TCO13 site for reference on content that is not specifically mentioned here.

  • Home
    • use full width page template
    • use [tco_carousel] and [tco_sponsors] shortcodes to populate the content
    • see 1_Home.png for design reference
  • Overview
    • Latest Happenings
      • use the template with the right sidebar
      • use [tco_recent_blog_posts] shortcode for rendering the content for the "Latest Happenings" section
      • see 5_TCO Blogs.png for reference style for left content part
      • see 2_Leaderboard.png for the sidebar style, layout, and format. 
        • Forum widget will list 10 items
        • All other pages that has sidebar layout will use this page' sidebar style, layout, and format
      • see http://support.sharethis.com/customer/portal/articles/446558-custom-buttons for customizing the sharethis buttons
    • Onsite Events
    • Competition Rules
    • Registrants
      • use the template with the right sidebar
      • use [tco_registrants] shortcode to render the table data. This shortcode renders data, part of your task here is to add pagination and Search Handle functionality
      • see 6_Algorithm Leaderboard.png for reference on the style of left content part
    • Sponsors
    • Win TCO Trips
  • Algorithm
    • same style as seen in 3_Studio Rules.png but without the toggle functionality and the toggle icon
    • Algorithm Schedule
    • Algorithm Rules
      • use the template with the right sidebar
      • Copy text style will be similar to the style found in 3_Studio Rules.png including the toggle functionality
      • table styles will be similar to 6_Algorithm Leaderboard.png
      • use [tco_schedule] shortcode to populate the schedule tables
      • use [table] shortcode for rendering the "About The Prizes" table, use third party EasyTable plugin for this 
    • Algorithm Advancers Leaderboard
    • Algorithm Final Results
  • Design
    • use the template with the right sidebar
    • same style as seen in 3_Studio Rules.png but without the toggle functionality and the toggle icon
    • Design Schedule
    • Design Rules
      • use the template with the right sidebar
      • use http://community.topcoder.com/tco13/design/design-rules/ for content reference
      • Copy text style will be similar to the style found in 3_Studio Rules.png including the toggle functionality
      • table styles will be similar to 6_Algorithm Leaderboard.png
      • use [tco_schedule] shortcode to populate the schedule tables
      • use [table] shortcode for rendering the "About The Prizes" and "Percentage of Placement Points" tables
    • Design Leaderboard
      • use the template with the right sidebar
      • use http://community.topcoder.com/tco13/design/design-leaderboard/ for content reference
      • see 2_Leaderboard.png for reference on style for this page
      • use [tco_leaderboard] shortcode to populate the leaderboard table
      • Leaderboard Tab should be functional
      • add Pagination and Search Handle functionality
  • Marathon
    • all pages under this track should match the style with their counterpart pages in Algorithm
  • Development, First2Finish, and Studio pages
    • all pages under this tracks should match the style with their counterpart pages in Design
    • First2Finish is formerly known as Mod Dash
  • Blog
    • for demo purpose, use the template with the left sidebar
    • see 5_TCO Blogs.png for style reference
    • this page will list blog posts ordered by date, sticky post should be taken in consideration.
    • there should be pagination support
    • single post page layout will depend on what is the selected template for Blog page
  • Registration Modal
    • use Bootstrap modal but style it similar to the provided storyboard
    • Register button should only visible if the user is not logged in and if the user has not yet registered
    • to check if the user is already registered or not, you need to make AJAX request to https://www.topcoder.com/tc/eventreg with event ID parameter, see the provided reference-js-script.js for example request
    • to login and to register, you also need to make AJAX request, see the provided reference-js-script.js for example request
    • there should be NO hardcoded messages in the js script, all messaging text should be controlled in WP Admin, you can add fields in theme options for this.

Shortcode Reference Guidelines
see the provided ShortcodeReference.pdf for documentation

When building this prototype, competitors should work toward the following goals:

  • Ensure your generated or output HTML codes display correctly in all browsers. It is your responsibility to make sure they display and function correctly.
  • Ensure you submission template and generated codes are clear of HTML and CSS Validation error and warning.
  • Make sure your submission template and generated HTML codes are in compliance with Bootstrap 3

When reviewing this prototype, Reviewer should look at:

  • If a Client was to implement this Theme - did it work at first without major Final Fixes?
  • Did the submitter provide adequate installation notes?
  • Overall - would the client be able to use this Theme with some minor fixes?
  • Functionality is the highest consideration in this challenge, please use your best judgement.


Submission Deliverable

  • All the pages and items mentioned in the Competition Task Overview section
  • Your submission must be a single zip file containing all the files necessary to view and run your submission properly (i.e.images, css, php, and javascript files.)
  • A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, it's categories, and more.
  • You must include any necessary plug-in files along with the necessary configuration settings.


Specific WP Plugins/HTML/CSS/Javascript/Browser Requirements

HTML/CSS Requirements:

  • Your HTML code must be HTML5 compliant
  • 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 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.

Javascript Requirements:

  • All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that  are free, publicly available and do not have copyright statements or   author recognition requirements anywhere in the code.
  • You are allowed to use the jQuery JavaScript library for  this contest.
  • Label all JavaScript hacks with explanations so others will understand.

Wordpress Plugins and Helpers

  • You are allowed to use open source WordPress Plug-ins and/or Helpers.
  • Document your plug-ins and/or helpers and what they are used for.

Browsers Requirements

  • IE8+
  • Latest FF Mac & PC
  • Latest Safari Mac & PC
  • Latest Chrome Mac & PC
  • Android Tablet
  • Android Phone
  • iPhone
  • iPad

Documentation Provided

  • WP Theme

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30040854