Avicia Theme for SharePoint 2013
Following many requests to convert our popular responsive Avicia Office365 theme to SharePoint 2013, I have finally found the time to do it. Not an easy ride, since I had to go through the painful SharePoint 2013 installation on a virtual machine. But now that SP2013 is perfectly rolling I started to actually enjoy it. So, expect few more SharePoint 2013 branding goodies soon.
So, download the latest version of Avicia theme, follow the installation steps for the Office365 which are the same for SharePoint 2013 here. The only difference for SharePoint 2013 installation is the SP2013 folder added to the theme where the master page and the three page layouts were converted to SharePoint 2013.
Also, in order to use the Two Column page layout (Avicia-2Col.aspx) you need to create a new content type called 2ndPageContent.
So, first, head over to Site Settings and create a new column by clicking the link “Site columns” under “Web Designer Galleries” and click Create.
Use 2ndPageContent for the Column name, use the existing group “Page Layout Column” and hit OK.
Next, go back to Site Settings, click on “Site content types”, click on “Article Page” under “Page Layout Content Types”. On the next page at the bottom click on “Add from existing site columns” and add 2ndPageContent to the right pane and click OK. Now, you will have two Rich HTML Fields on the same page.
Download Free Avicia Theme for SharePoint 2013
Avicia Theme Demo
Loading ...
Awesome Theme! I was just wondering how the Submit Form work on your Contact Us page? Where does the form data go and how can I access it or tell it where to go?
Thanks
Hi, Very nice theme, but seems impossible to implement. I’m using office 365 small business and trying to use this as public website. None of your screenshots looks like what i get… and M$ seems impossible to create a nice way to design pages.
Any ideas?
Claes, you’re looking at the wrong version of the theme. This theme is for SharePoint 2013. And here is the theme ported for Office365: https://topsharepoint.com/avicia-free-sharepoint-online-theme
I love this theme, however I would like to add the left side navigation back in. How can I do this? I’ve been working on this for two days, and I can’t figure it out. Any suggestions would be great.
Thanks
I have followed the instructions, and upon selecting the master page, it doesnt change to Avicia.
One more thing, I do not have the Page Layout when editing my home page, btw, I have Wiki Home Page enabled
I have already changed it to Avicia, however, no scroll bars, broken images/design is shown. I have published my images. js, css, and every other files in the zip.
Any help is appreciated, thanks.
Goms, can you get to the css or js folders? Type in your browser these addresses to see if you have access to the folders: http://YourSPSite/Avicia/css/Avicia.css or http://YourSPSite/Avicia/js/main.css
And why would you have Wiki Home Page enabled? These themes are ONLY good for SharePoint Publishing sites! Please follow the steps properly.
I’ve completed all the steps. When I add a new page and selected one of the layouts, the images and css seem to be missing. The format is completely out of place. What am I missing?
Thomas, read the above comment for Goms. Can you get to http://YourSPSite/Avicia/js/main.css
Here’s my page http://serverName/sites/MySiteName/Pages/Main-1.aspx. The http://serverName/sites/MySiteName/Avicia/js/main.css is not found. Interestingly, the logo is not found because its url is http://serverName/_catalogs/masterpage/Avicia/images/logo.png. The actual logo is http://serverName/sites/MySiteName/_catalogs/masterpage/Avicia/images/logo.png.
Sorry, I’m a newbie to Sharepoint. There must be an obvious setting that I missed.
Many thanks for your help,
Thomas
Thomas, it looks like you set up the theme on a sub-site. It all depends on where you created the Avicia folder with all the necessary folders and files.
Can you get to the main.css this way? http://servername/sites/MySiteName/_catalogs/masterpage/Avicia/css/Avicia.css
Also, make sure you publish the files after uploading.
The Avicia folder was created inside Master Page Gallery. All the necessary Avicia folders and files are the same as your installation guide…avicia\css, avicia\images, avicia\js, etc. Yes, I can reach the file with http://servername/sites/MySiteName/_catalogs/masterpage/Avicia/css/Avicia.css. Yes, all the pages have been published. I just checked, the theme is set on the main site.
Thanks, Thomas
Luis, I think you’re correct. I think this is what happened.
It all has to do with how I created the Site on the Create Site Collection page. The URL setting has three options
– /sites/
– /my/personal/
– /
The default is /sites/ which I selected. When a site is created, all the references have to be /sites/MySiteName/. I’ve change the *.master and all the *.layout pages from “/_catalogs/masterpage” to “/sites/MySiteName/_catalogs/masterpage”. That fixed all the reference problems. Had I selected “/” in the URL setting on the Create Site Collection page, I may not run into this problem.
Thomas
Thanks Luis! Looks great.
I just wanted to understand how to bleed the main navigation (as a publishing page) with team sites so that the branding/look & feel are the same. As well, is there a way to have a left side navigation activated or is that the whole point of this theme?
Thanks again!
I have a problem in displaying Avicia Them in internet explorer. The website is not display correctly. But in Firefox and Chrome it is perfect. There is an error message in the bottotm of the internet explorer and by double clicking the error it shows two errors;
Object expected
main.js
Code:0
Object doesn’t support this property or method
init.js
Hi Tomas, I have the same problem. When you said: I’ve change the *.master and all the *.layout pages from “/_catalogs/masterpage” to “/sites/MySiteName/_catalogs/masterpage”. ” Could you tell me… How do yo do?
BR
Alfonso.
Hi Luis. Thank you so much for the effort you put into this theme for the community. Never enough thanks said.
I have attempted to apply this to my intranet and have noticed that the responsiveness is fine when re-sizing the site but if I go to view a page with webparts on it, I loose the footer region.
Are there any limitations with using a responsive design with a Team site that has publishing enabled? Do you have to use a custom publishing page layout for all pages in order to inherit the design?
Thanks again for your work and your comments.
Kind Regards,
Tim
I applied this theme on a DEV SharePoint 2013 site (http://devsp/admin) using the included instructions. When I go to the admin site I can see the Avicia theme has been applied, but I now cannot select the options button to get to Edit page or Site Settings, or any of the options you would normally see.
I see the blue bar at the top, with Newsfeed, SkyDrive and Sites on the left side. On the right side, where the options button would normally be its just a blue bar with no text or options. Right underneath the blue bar on the right I see Share and Follow, that’s all.
Tried using this in my test SP2013 on prem site. I followed the instructions exactly as layed out and read the comments section about access the files and I can get to them all fine. The page loads but as soon as I apply the home page layout, it breaks the site with the following error. Any thoughts as to why this is?
Could not load the assembly ‘Microsoft.SharePoint.Publishing,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c’. Make sure that it is compiled before accessing the page.
Hello! I love this! I am trying to edit the home page now with your HTML content but I cannot figure out how to get some of it to go into that grey band and below the grey band. What am I missing?
Also.. in Chrome, what I do manage to put in has a pale grey bakground that belongs behind the first row of icons. That seems to move up and down the page. In IE, I do not see that movement.
Worked around this by removing the gradient.
When I try to add this to a subsite the everything works fine. Except the top Nav has items stacked.
Nav1 Nav1.a Nav2 Nav2.a Nav3
Nav1.b Nav3.a
Nav1.c Nav3.b
IS there anyway to get the Nav to be like this:
Nav1 Nav2 Nav3
Nav1.a Nav2.a Nav3.a
Nav1.B Nav3.b
This is a great theme and I’ve used it a few times now, but I’m still stuck on adding in the left side navigation – has anyone worked it out yet?