Applies to: SharePoint 2013, Office 365

One of the most common requests from organizations using Office 365 and/or SharePoint 2013 for public interface is how to provide customers a different user interface from SharePoint!
Implementing a custom look-and-feel for your public sites is a popular demand, and you are not alone.
The first customization in Office 365 public interface is changing the appearance of the top menu bar.
It is currently recommended that you do not develop and implement custom master pages.  At the same time, out-of-the-box features for changing look-and-feel are not enough.  Many users don’t want any limitations and don’t want to simply just use one of existing site templates.
The following solution is using JavaScript, CSS and JQuery, and it does not touch SharePoint master page, site template, CSS or any other SharePoint component.
You need to create a simple html file outlining your menu bar, as well as including CSS and JavaScript references within your html file.
If you want to change the existing user interface, you can either create your own CSS or overwrite an existing one.
Demo: Look at the existing menu bar created for AA Softech site.  You can also take a look at more sample menu bars created at Sample Client.
Inplementation steps:
Do it in 30 minutes:
No installation! Simple instruction:
1- Use the existing html file that contains the menu bar, as a template. Go to Download ,enter your info and select SampleMenuBar from Product list.
After adding you info, you should see the following link.
Sample Manu Bar Download link
Then change the CSS/JavaScript links to your own file references.
2- Upload the html file to your Office 365 document library.
 Upload to your Document library
3- Capture the URL of the uploaded html file.
capture URL
4- Go to each page that you want to add custom menu bar to and add Content Editor Web part.
5- Change the link of Content Editor Web part to point to the URL you have captured in step 3.
6- Save the web part and save the page. You’re done!
Now the SharePoint standard top menu bar is replaced by the new HTML-based menu bar.
More customization?
Do you want to change color, font and general style?
1- Get the CSS file from AA Softech and update the font, color, or any other styles; or you can create your own CSS with these attributes specified.
2- Update html file you have uploaded to document library in step 3 above and point to your own CSS.
3- Repeat step 2 to 6 in above.
Still need help?
Contact us. We can build your menu bar, along with full site customization, for you.
Feel free to check out some Office 365 customization we have done at Sample client.

Leave a Reply

Your email address will not be published. Required fields are marked *

clear formPost comment