Challenge Overview

Welcome to Solar Power Report WordPress Theme Challenge!

For this challenge we need you to create Solar Power Report Wordpress Theme with the main pages and interactions outlined below. This theme must support responsive layout when viewed on Desktop and Tablet/Phone platforms (Landscape and Portrait Layout) using CSS3 Media Query technique.

Read more details  about Requirements and Click Flow below.



Final Submission Guidelines

Important!

- All content should be editable, there should be no hard coded content in the template files.

- We are encouraged you to use CSS3 Media Query instead of device detection for this UI Prototype submission. So, when we resize your UI Prototype in desktop browser, tablet or mobile width breakpoints must adjust fluid layout.

- Use CSS3 Media Query to load different styles for each page and don't build different HTML for different device/layout.

- We do not provide Tablet layout storyboard, the general rules are:

- Header and Footer can follow the Mobile storyboard.
- Make the center content of the body similar to desktop layout.
- Hide the left sidebar.
- Move down the right sidebar. “Subscribe...” will have 100% width, while “Forum posts”, “Feeds”, and “Most popular posts” are in 3 column.
- Use your best judgments to show fluid layout on Tablet view. Make sure the page layout are not messed up.

- We also need to make sure all graphics inside your UI Prototype submission look sharp when viewed on Retina Device!

- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.

- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.

- Matching the storyboards (as close as possible) across the required browsers.

- Ask in the challenge forum as early as possible if you have some questions or clarifications.

Overall Requirements:

1. Ad Space
- There are four ad location in this theme, these are:
-- In the header
-- On the left sidebar.
-- In the middle of the body content.
-- On the right sidebar when the newsletter is replaced (see the wireframe for reference).
- Use WP widget to enter the code for these ad space. For this challenge, it is okay to enter an image tag on the widget as placeholder.
- There should be a way to enter a separate ad code in the header and body locations for different views. One for Desktop and Tablet view, while the other one for Mobile view.

2. Social Icons
- You can use third party plugin or write your own way via a theme options for us to enter URLs and icons to use of our different social media accounts.

3. Navigations
- use wp_nav for the header and footer navigation items.

4. Footer area
- There should be a way to enter the copyright text.
- There should be a way to upload image logo and enter URL for the “Powered by” section.
- Ideally, these options should be editable in the theme’s option page.

5. Right Sidebar

5.1 Subscribe to our Newsletter
- Use third party plugin for the functionality.

5.2 Forum Posts
- This is a feed that comes from the forum outlined below in this requirement.
- Limit the feed items to 10.
- This section is a carousel if there are more than 2 items. This carousel is not auto-move.
- Clicking the dots will slide should slide to the next/previous item.

5.3 Feeds
- This is a feed that comes from a custom URL that can be set in the theme’s options page.
- Limit the feed items to 10.
- This section is a carousel if there are more than 2 items. This carousel is not auto-move.
- Clicking the dots will slide should slide to the next/previous item.

5.4 Most popular post
- This is a feed that comes from the most popular blog posts.
- You can use plugin to define most popular posts.
- Limit the feed items to 10.
- This section is a carousel if there are more than 2 items. This carousel is not auto-move.
- Clicking the dots will slide should slide to the next/previous item.

6. Sign up/Sign-in:

6.1. Sign in:
- See “D02A ~ Sign-in.jpg” for reference
- User should be able to login by using the normal way (username+password). In case of an error, the field should show an error style. See “D02B ~ Sign-in.jpg” for reference.
- User should also allow to login using social media accounts, user plugin for this functionality.
- Once logged in, the modal should be closed and the “Sign In” and “Sign Up” button located at the top left will be replaced by the user info. See “D04C ~ Solar Lease Tool.jpg” for reference on the style of user info section.
- If user clicks on “Forgot Password” or “Sign up now”, the modal will display their corresponding screens.

6.2. Sign Up:
- See “D02C ~ Sign-up.jpg” for reference.
- Required fields should show error style when they are blank.
- User should also allowed to register via social media accounts.
- Registered user should have the lowest role in wordpress.
- Prevent the user with lowest role from accessing WP-Admin.

6.3 Forgot Password
- This will be similar style with Sign In modal.
- The field should only contains email address and Submit button.
- The functionality of this feature should be working, the user should receive the reset password  link.

7. Search
- The search field has capability to select or limit the search scope by selecting a particular post category, see “D01D ~ Homepage (Landing).jpg” for reference.

Page and Functionality Requirements:

1. Homepage (Landing Page):
- see “D01A ~ Homepage (Landing).jpg” for reference.

1.1. Top section
- The columns for “Solar Basics”, “Our Mission”, and “Solar News” will have their content comes from their respective page.
- Title, Image, and Read More should link to their respective page.

- You can use an Excerpt field or a Custom Field to enter the content for the teaser text.

1.2. Learn More with our Videos
- When clicked it will animate just like in the provided wireframe to reveal the video section, see “D01B ~ Homepage (Landing).jpg” for reference.
- Use custom post type to define the content of the video items/post.
- Hovering on any video thumbnail will show a tooltip to display the whole title of the video post, see “D01C ~ Homepage (Landing).jpg” for reference.
- Clicking any video thumbnail from the right part of this section will replace the main content of this video section.
- List all available video post type.
- Clicking “Back to Home” will animate back the video section to hide it and reveal the previous content.

1.3. Stories
- These are recent blog posts from their particular category
- Column title should be linked to their Page counterpart.
- Post Title and Read More links to the post detail page.

2. Solar Installers
- This is another custom post type.

2.1. Directory:
- This is a regular page that will show the list of installers who do solar installation.
- See “D03A ~ Solar Installers.jpg” for reference.
- Each of the installer listing will show the “Installer name, their location (address), services they offer, customer rating and comments (numbers). 
- The “View Profile” button, Installer title/name, and Image thumbnail will be linked to the Installer Details page.
- “Show Map” also links to the Installer Details page but anchored to the map section.
- “n Comments” also links to the Installer Details page but anchored to the comment section.
- The check icon indicates that the installer is verified. It will be the admin that makes an installer verified or not.
- User will also have the ability to sort as shown in the wireframes except for the “Most Valued” option.
- User should be able to filter the list by doing a search on the left side part of the main content by:
-- Search by name/location - user can type-in on the text field to filter by name or location keyword.
-- Search by distance - Location field is a auto-suggest field, Name field is a keyword string, and Miles is a slider with a value of 1 to 300. We should be able to update the Miles minimum and maximum value in theme options page.
- New Solar Installers will have the ability to “Register” with the site to create a free listing within this directory!
- Pagination should be functional.

2.2. Installer Details Page:
- When a user select one of the installer from above screen, we then show the installer details.
- See “D03B ~ Solar Installers.jpg” for reference.
- Only logged in user should be allowed to submit a review. If the user is not logged in, make the “Customers review” occupy 100% and making the “Write a review” section hidden.

2.3. Get Listed
- Only logged in user should be allowed to access this page. If the user is not logged in and clicks on the “Get Listed NOW” button, it will load the Registration modal. Then after registration, the user will be redirected to this page.
- Page layout should be similar to “D03B ~ Solar Installers.jpg”.
- The following are the fields needed for the Installer profile:
-- Title/Name
-- Images, limit to 3 photos. The first image should be set as its profile or featured image.
-- Brief introduction (WYSIWYG editor)
-- Website URL
-- Social Media URLs
-- Google map location address
-- Company details (WYSIWYG editor)

3. Solar Lease Tool:
- See the provided JS solar tool for reference on the computation and generated report for reference. You can use the codes from this provided prototype.
- Users who are logged in can have the ability to create multiple bids, while users that are not logged in can only create up to 2 bids.
- Users who are logged can save their bids, you can create custom post type for this requirement.

3.1 Add Bid
- See “D04A ~ Solar Lease Tool.jpg” for reference.
- The mapping of fields are as follows:

- Bid name is title.
- Company is company name.
- Select option: we don’t have this in the provided prototype but we need to include this.
- Down payment: this can be removed.
- Length : this is years of lease
- Discount rate and electricity rate escalator you can find them in the black/dark bar.

- The right part by default don’t have any “bids”. Once a user clicks on the “Add” button, the bid information will be added to the right part tool.
- See “D04B ~ Solar Lease Tool.jpg” to “D04D ~ Solar Lease Tool.jpg” for the functionality of each fields.
- If user clicks on the “chart” icon, will display a chart in a modal. See “D04J ~ Solar Lease Tool.jpg” for reference.

- If user clicks on the “x” icon, it show a message popup similar to “D04G ~ Solar Lease Tool.jpg”. If user clicks “Ok” on this message popup, it will then remove the “bid” in the right side section.
- The “?” icon when hovered it will show a tooltip or popover message.

3.2 My Legal Preference
- See “D04E ~ Solar Lease Tool.jpg” for reference.
- Clicking any option will highlight the selected option as shown in “D04F ~ Solar Lease Tool.jpg”.
- Clicking “Cancel” will show a message popup. See “D04G ~ Solar Lease Tool.jpg” for reference. If user clicks “Ok” on this message popup, it will then clear/reset the options.
- Clicking “Add” button will add the new “bid” to the right part section, see “D04H ~ Solar Lease Tool.jpg” for reference.
- Each questions/items are sortable by drag and drop, see “D04K ~ Solar Lease Tool.jpg” for reference.

4. Solar Basics:
- This is a regular page that will list blog posts with “Solar Basics” category. See “D05 ~ Solar Basics.jpg” for reference.
- Each post title, featured image, and read more text are linked to the post details page.

4.1 Detailed Solar Basic page
- The post detailed page will be similar to the layout of “D06B ~ Solar News.jpg”.

- All stories will have the option to comment, use disqus plugin for this feature. The storyboard doesn’t show the comment section, you can place the plugin at the bottom of the page.
- “Back” link redirect back to Solar Basics page.
- “Prev” link will navigate to the previous post with Solar Basic category whenever applicable.
- “Next” link will navigate to the next post with Solar Basic category whenever applicable.
- “Share” will show options to share the current page/post, you can use plugin for this functionality.

5. Solar News:
- This is a regular page that will list blog posts with “Solar News” category. See “D06A ~ Solar News.jpg” for reference.
- Each post title, featured image, and read more text are linked to the post details page.

5.1 Detailed Solar News page
- See “D06B ~ Solar News.jpg” for reference.

- All stories will have the option to comment, use disqus plugin for this feature. The storyboard doesn’t show the comment section, you can place the plugin at the bottom of the page.
- “Back” link redirect back to Solar News page.
- “Prev” link will navigate to the previous post with Solar News category whenever applicable.
- “Next” link will navigate to the next post with Solar News category whenever applicable.
- “Share” will show options to share the current page/post, you can use plugin for this functionality.

6. Solar Mission:
- This will be a regular page to show the Solar Power Report mission. See “D07 ~ Solar Mission.jpg” for reference.
- There should be a way to manage the teams, a custom post type would be ideal.
- All custom post with a “co-founder” status or role will be placed at the top of the page, the rest goes to the bottom section.
- There’s no need to display a detailed page for each post item.

7. Solar Forum:
- We will be using a wordpress plugin for this page (most likely https://bbpress.org/).
- The look and feel of this forum should match the provided storyboard (D08A ~ Solar Forum.png up to D08D ~ Solar Forum.png).
- Users who are not logged in don’t have the ability to post comments or questions.

SUGGESTED PLUGINS:

- Redux for theme options
- ACF for custom fields
- Graph: Suggest plugins which would be useful for both the line and bar charts for full functionality:

- Example line chart: http://nvd3.org/examples/line.html
- Example bar chart: http://nvd3.org/examples/discreteBar.html

 

CODE REQUIREMENTS:

HTML5
- All HTML code should pass W3C HTML5 validation.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.

CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- All CSS code should pass W3C CSS3 validation.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.

Javascript
- 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 AngularJS for this challenge.

Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.

Browsers Requirements
- Safari Browser on Desktop (Mac & Windows)
- Firefox Browser  on Desktop (Mac & Windows)
- Chrome Browser  on Desktop (Mac & Windows)
- Safari Browser on iPad Standard/Retina (Landscape & Portrait View)
- Safari Browser on iPhone Standard/Retina (Landscape & Portrait View)

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30048477