xpecto – Free SharePoint Online Theme
xpecto is a simple, clean and fully responsive mobile friendly Coming Soon/Landing page theme for SharePoint Online. The theme is lightweight and contains an easy to customize countdown clock in the top section and five more editable sections below.
A landing page, as its name may suggest, it is just a single page divided it into separate sections which allows you to promote a specific product or action and increases your viewership by targeting a particular audience. In this case, xpecto theme will allow you to create a nifty countdown SharePoint page, which of course could be used for other purposes depending on your web developing/SharePoint skills.
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.
xpecto theme is intended to help SharePoint Online newbies with the site branding and customization of public-facing websites. More work might be necessary if not required.
Installation
Download the xpecto.zip 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” and then click on “Themable” folder. Upload first the master page xpecto.master, provided in the xpecto package, 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. Make sure you publish the master page.
Next, upload the page layout xpecto-Home.aspx under the same Themable 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.
Next, go to “Site Contents” and click on “Style Library” (Site Settings >> Site Contents). Under “Style Library” create a new folder called xpecto. Under the newly created xpecto folder create three new folders: css, images and js and upload the contents provided in the xpecto package. Make sure you publish all the files or even better try to change the permissions for xpecto folder so Anonymous Users have read access by clicking on Library tab, then hit the “Library Settings” button and then click on “Permissions for this document library” link. Make sure you have “View Items” rights for Anonymous Users.
Once you’re done uploading all the files go to “Site Settings” and under “Look and Feel” click on “Master page”. On the “Site Master Page Settings” make sure you have xpecto 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 xpecto page layout, edit the page and from the “Page Layout” option under Page tab select the xpecto Page Layout.
Once the xpecto Page Layout has been selected, fill out the necessary sections with the mock-up content provided in the html folder. So, for the Intro Section use the home-intro.html and for About Section use the home-about.html and so on. Add Content Editor web part for each section so you can Copy&Paste the HTML code provided for each section.
Countdown Clock
To change the countdown clock open xpecto.js located in the js folder and modify line 73.
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!
Theme Features:
– Coming Soon/Countdown/Landing page
– Clean, Modern and Responsive Web Design
– 1 custom Master Page
– 1 custom Page Layout
– jQuery javascript
– Font Awesome Icons
– 7 HTML Page Templates
– Ideal for any screen resolution (automatically adjusting to different screen resolutions)
– Simple & Easy to Deploy and Customize
– Compatible with modern browsers (tested successfully on Chrome, Safari, Firefox, IE9+)
– Developed for SharePoint Online (O365) Publishing Sites
Download Free xpecto Theme for SharePoint Online
Loading ...
Many thanks for this beautiful and useful theme. I would appreciate if you be so kind to tell me/us how to paste HTML files into web par zones as, if we add Content Editor web part, the frame and title of Content Editor are showing on page/photo? This make a page not useful at all.
Many thanks for help.
SharePoint 101. Change the Chrome Type to none, so the Title and the Content Editor frame border will not show up. This is another “smart” SharePoint “feature”. Edit Web Part >> Appearance >> Chrome Type = None.
Thanks Luis, looks great. A couple of things:
1) Where are the other 6 html pages located? Are they page layouts?
2) Is it normal to be prompted if I want to accept non-secure info every time I open the page? I don’t get that with the OOTB themes.
Thanks
Carl,
1) Check the “html” folder in the package for the 6 html pages.
2) It is the SSL. Make sure you don’t reference any files outside your SP Online and also, make sure you reference all the links using the root-relative links (/), not http://mysite.com/…
very great work, thank you very much
Great theme. Is it possible to see a demo site? I’m looking to use it for our corporate intranet.
I’m a relative newbie to Sharepoint, so I’m probably missing something. The instructions above seem to push the theme files into the root of the site collection, which is fine, but when I try to apply the theme to a publishing site that is a subsite of the collection, the CSS/JS, etc doesnt load. My guess is it has to do with the relative paths in the .master file, but I am not sure. Should the theme function on subsites, or just the root sites of a collection?
Could not get this to work on SharePoint Online. I created a new Page under “Pages” library called test. Reviewed the page and saw that it looked OK, but the frame of SharePoint Online was around the outside of the page. Not clear what the HTML files are for and where they should go? I guess under “Pages”?????
John, please follow the steps properly. Once the xpecto Page Layout has been selected, fill out the necessary sections with the mock-up content provided in the html folder. So, for the Intro Section use the home-intro.html and for About Section use the home-about.html and so on. Add Content Editor web part for each section so you can Copy&Paste the HTML code provided for each section.
Also, keep in mind you might waste your time branding a SharePoint Online Public Website. Microsoft dropped the Public Website feature from SharePoint Online as of January 2015. Customers who currently use the SharePoint Online Public Website feature will continue to have access to the feature for a minimum of two years.
Sharepoint Online features must have changed since this article was first published. Under Site Settings, Web Designer Galleries, I see ‘Master pages’, but not ‘and page layouts’. However, Sharepoint does seem to recognize the files as .master and .aspx — I didn’t have to explicitly specify the content type.
Also, I don’t see “Style Library” (Site Settings >> Site Contents). Should I create the css, images and js folders under the themable folder, too?
Thanks for the article!
My apologies. I started over with a “publishing site” and the instructions match what I see on the screen. Still learning….
Very helpful. thanks for sharing.
How do I remove the countdown portion now that the time has passed?
Thanks
Hpub, remove/comment out line 43 thru 48 on xpecto-Home.aspx
From most everything I have read, the SharePoint community does not recommend adding new or editing Master Pages in SharePoint Online (Office 365). I would like to know if you or your customers have had any issues with using Custom Master Pages in SP Online?
Im having a little of an issue as the background image headerBG.jpg will not show up once I publish, if I open in edit mode then the page shows the background image. Any ideas as to how to fix this.
Sharepoint Online features must have changed since this article was first published. Under Site Settings, Web Designer Galleries, I see ‘Master pages’, but not ‘and page layouts’. However, Sharepoint does seem to recognize the files as .master and .aspx — I didn’t have to explicitly specify the content type.
Also, I don’t see “Style Library” (Site Settings >> Site Contents). Should I create the css, images and js folders under the themable folder, too?
This is a great work and easy to implement template. Thanks for that.
I wanted to change few things in master page (like showing or hiding top navigation), I published the changed but it is not reflecting at all. Any thing, which I am missing.. Please suggest !