Avicia – Free SharePoint Online Theme
Following the increased number of requests for a SharePoint Online theme I decided to develop a simple, modern and easy to deploy responsive design theme freely available to any SharePoint enthusiasts who want to give SharePoint Online (Office 365) a try.
SharePoint Online can be purchased as a standalone offering or as part of an Office 365 suite where you could also get access to Exchange, Lync, the Office clients and web apps.
If you work in this business, that is web development, I’m very positive that your clients/employers want a mobile version of their website, and you, no doubt, as an up-to-date professional would go straight for a responsive layout. That is why I decided to spend a little more time, and few more beers, to build a responsive design theme that will make your life much more joyful.
As I mentioned above, this theme is intended to give SharePoint Online newbies a taste and an easy introduction on how to brand public-facing websites built around SharePoint Online. More work might be necessary if not required.
Download the Avicia.zip file and extract the files.
Assuming you already have a SharePoint Online/Office 365 public site created, go to Site Settings and under “Web Designer Galleries” area click on “Master pages and page layouts”. Create a new folder called Avicia. Of course you could call it whatever you like but for the purpose of this tutorial I will refer to as Avicia folder.
Inside Avicia folder create three folders called: css, images and js. Next, upload the necessary files provided in the Avicia package.
First, upload the main CSS file, Avicia.css under the newly created css folder. Click on the Files tab on the ribbon, and click “Upload Document”. On the pop-up window make sure you select “Design File” for the Content Type and hit Save button.
Same rules for all the design files (css, images and js).
Make sure you publish each updated design file by selecting from the drop-down menu “Publish a Major Version”.
Next, upload Avicia.master right under Avicia folder by selecting Files tab on the ribbon and then “Upload Document”. On the pop-up window make sure you select “ASP NET Master Page” for the Content Type, give your master page a name and a title, select version 15 and hit Save button.
Now, you need to upload the three page layouts provided in the Avicia package. Make sure you’re under Avicia folder, click on the Files tab on the ribbon, and click “Upload Document”. On the pop-up window select “Page Layout” Content Type, give your page layout a name and a title. For the Associated Content Type select “Page Layout Content Types” for the Group and “Article Page” for Content Type Name. Do the same for all three of them.
Once all Avicia files were uploaded and published, click on Settings icon and pick “Site Settings” from the drop-down menu.
On the “Site Settings” page click on “Master page” link under “Look and Feel”. Once on the “Site Master Page Settings” make sure you have Avicia master page selected as Default and for “Any Mobile Device” and click OK button. I don’t recommend changing the System Master Page, just leave the default on.
To assign Avicia page layouts edit the page and from the “Page Layout” option under Page tab select the necessary page layout.
For home page select “Avicia Home”. For all other pages select “Avicia Main”. If you need a two column page select “Avicia 2 Column Page” layout.
Also included in the Avicia.zip package there is an optional “html” folder where you will find the HTML code used as content filler for the mock-up pages.
If you want to see what I used for testing the theme, just copy the HTML code and paste it in to the necessary content editor web part.
There might be better ways to handle the files on SharePoint Online but for this tutorial I hope I hit the nail in the head.
If you like the theme don’t forget to leave a comment or maybe you would like to show your appreciation and buy me a beer! Thank you and stay tuned for more SharePoint branding goodies!
Avicia Theme Demo