How to create a 100% fully custom branded Community?

Question

I want to create a 100% fully custom branded Community like the one shown in this demo

https://developer.salesforce.com/blogs/developer-relations/2013/10/communities-plus-site-dot-com.html

The community in the above demo has a very 'custom' look and feel (e.g. with the tabs presented not as the usual Salesforce tabs, more as buttons with rollovers, in the top right of the screen, lots of rounded corners etc). The presenter only walks through adding a 'Support' tab but doesn't discuss how the overall look and feel was achieved.

What is required to achieve this? Does it need custom CSS or is there a setting on a Community to make it look like this? Any pointers to the right documentation will be highly appreciated.

Answer 1

You will need to set up site.com or force.com sites to brand your community.In case of site.com you will use CSS files to apply styling and also do some data binding through standard buttons provided .Go through site.com documentation to deep digger.

In force.com sites you will need to create custom Visualforce inorder to achieve this .The VF will carry necessary branding and controllers can be written to set up data binding .

You will use community network class and site.login() methods to login into the community portal .You can dig into more with documentation shared in the developerforce blog you referred

Answer 2

There was an excellent session at Dreamforce 14 by Scott Geosits on the different ways that you can brand and style a community: Branding and Styling Your Salesforce Community.

You can create a community that is coded to the point that it is not known to the end user that it is even a community when looking at the page. As Mohit stated, you can use Visualforce to achieve this.