Create A Better Slider For Office 365 Sharepoint Online 2013 Sites

unsliderYour choices are limited if you’re looking for an attractive slider or slideshow for your Office 365 public site. There is a slideshow web part you can use, but it’s not very attractive and has limited settings. The Bright Banner app from the Sharepoint store is the only 3rd party app that works with anonymous sites and is the easiest option to deploy.But if you want something that combines a modern look and ease of use – something that promotes your content by for example allowing you to overlay text on a background image while still using images in a Sharepoint list, you may want to consider the jQuery “unslider”. It uses jQuery to run the slider and the clever SPServices to pull content from a list. Here’s a demo that shows how text and images can be combined:

http://365.webbrewers.com/SitePages/home.aspx

Mark Rackley came up with the idea of combining the unslider script with SPServices, so this is just a recap of that idea in the context of a Sharepoint Online 2013 public site – with a few bonus tricks of my own – like adding multiple sliders and a filter to select which slides are displayed. It’s ideal if you want to be able to display different messages and quickly edit them without having to create a whole new slide.

The basic steps to install it are:

Create a list to store the slides
Upload the necessary files
Add a content editor web part to a page

Create A List

Use “add an app” to add a custom list called “Slider”
Create 2 fields in the list:
A rich text field called “HTML” (which lets you format the text that overlays the image – there must be some content in this field!)
A hyperlink/picture field called “Picture” and set to the picture setting.
You can upload some test content at this point if you like

 

Admin view of list using “newsletter” style display

Upload Files

This is easiest done using Sharepoint Designer but you can also use the browser tools
Download the unslider script from here » and upload/import it to your site’s Site Assets library
Download the slider script from here » and either upload it to Site assets, or just copy/paste the code into a new js file in Sharepoint Designer.
This file contains all the needed references to external jQuery and SPServices files.

Note that the slider.js file also contains some basic css styling, so that’s where you’d make changes (if you know what you’re doing).

Deployment

Open a page for editing

At the spot you want the slider to appear, insert a content editor web part
Click “add content” and in the web part properties box, add this link in the “content link” box:
/SiteAssets/slider.js

cewp-unslider

Usage

You’ll get the best results if you use images having the same dimensions. Remember, the image is set as a background with the HTML field text overlaying it so you can play around with the positioning of the image and the formatting of the text. In my example, I used a small image pushed to the right and styled up some large text messages in the HTML field. As you can see, you can also add “read more” buttons to the html field.

If you don’t see the slider when you reopen the page, go back to the list and add a few blank lines or some content to the HTML field. That field sets the slider’s height so it can’t be empty!

Advanced – Multiple Sliders
As is, the installed scripts reference one list, so you can only display one slider. You will need to make a few adjustments if you want multiple sliders.
Create a new list as above only name it say “Slider2”
Copy the contents of the slider.js file over to a new file named “slider2.js” (again much easier to edit it directly in SPD)
Look for this line: var sliderList = “Slider”; // Name of the list that contains slides
Change “Slider” to “Slider2”.
In the content editor web part, link to the new slider2.js file.

That’s it!
Advanced – Configuring Slider Options
If you want to change the slider settings like speed,

datasheet-slider

How To Restore An Office 365 Sharepoint Online 2013 Public Site Blog Without Using Code

f0101471Based on the number of “broken blog” threads in the O365 forum, it seems the public site blog provided in O365 is pretty fragile. It’s also not immediately obvious how to restore it. If you deleted any of the blog pages and are able to restore them from a recycle bin, it’s likely you still won’t get the full blog functionality back.Here’s an example of a blog rebuilt from scratch:http://365new.webbrewers.com/Pages/2-col.aspx

And here’s the quick code-free way to get your blog back up and running.
The Easy Part
Create a new public site page and select either the right or left sidebar page layout.
In edit mode, click insert and from the App Part list insert a “Posts” list into the main page area.
Click the web part and select “web part properties” from the ribbon.
Important! In the properties dialog box, change the “view” to “summary view”
Save the page
Click the sidebar zone, insert » web part » Blog » Blog Archives
Below that, insert the Blog Tools web part
Save the page.
Now you should have most of the blog functioning on the page. What’s missing is the categories web part which is a wee bit trickier to get working.

The Hard Part – Categories.

As far as I can tell, the categories web part works by sending a filter to the posts list so only posts in the selected category are displayed. To make the category title a link that triggers the filter requires some complex recoding of the web part and I assume that’s what the mystery script Microsoft may provide you does.If you don’t want to wait for that script and don’t know how to recode a web part,you can recreate the effect without code:

Go to site contents » categories » list settings » views and make sure you have a view which contains a plain text title field (ie iwthout a hyperlink).
Open your blog page in edit mode and from the App Parts, insert a categories web part in the sidebar.
Edit the web part and select the view that has the plain text title field.
Save the page.
In edit mode, open the web part context menu (from the little down arrow at top right)
Click Connections » Send Row Of Data To and choose “Posts”.

filter

In the dialog box that opens, confirm that you want to send a row of data and then select from the options in the “provider” and “consumer” field names. Translating the Microsoftspeak, the “provider field” is the field you want to use for the filter and the “consumer field” is the matching field on the receiving end. In this case, the category list “Title” field corresponds to the “Category” field in the posts list, and when the filter is applied onlyposts with that category name in its category field will show,

filter2

Click Finish and save the page.
Your categories web part should now include a small filter icon that will filter the posts displayed based on the category chosen. Not as neat as a linked category title, but it works and you don’t need to delve into the code.

The Last Part

Your blog should now be fully functional and you can start using it. If you find you get web part errors on the single post page or you have any other questions, feel free to post a questionin my forum or contact me here.
I hope this was useful!

Improve the mobile view for Office 365 Sharepoint Online public sites.

?It’s all about width…Microsoft has a come a long way in improving mobile accessibility in 2013 Sharepoint sites by replacing the archaic table layout stucture used up until SPO 2010. In the public site’s settings, under master page, you can pick the device channel master page that works best for you. Your site will then detect the screen size being used and switch over to the selected mobile master page, which in turn will adjust the size and positioning of elements to improve the visual experience.
Unfortunately, they haven’t gone far enough. Most list and library web parts still generate tables that are used for layout and tables can’t easily be resized when viewed on a small screen.
There isn’t much you can do about that, but one thing you can control is if your site content includes fixed widh elements such as tables or Adsense ads or other script generated elements. To fix these requires some simple manual adjustments to your site’s stylesheet to eliminate horizontal scrolling.
The simpler the better
To reduce the amount of adjustments needed, it’s alway a good idea to “think mobile” when you create your pages. Here are some general guidelines:
Don’t use tables in your page content (they can’t be resized easily)
Try to only use 300px or narrower Adsense boxes.
Try to avoid floating elements wherever possible: if you wrap text around an image for example, the text will respect the float and probably end up getting squished into a narrow column.
Keep layouts as simple as possible.
Media queries to the rescue

In a nutshell what css3 media queries do is allow you to specify DIFFERENT CSS RULES FOR DIFFERENT SCREEN WIDTHS. The mobile rule is nested within a special @media rule. If for example you wanted to hide a wide Adsense ad for iPhones, you’d add this to your stylesheet:
@media screen and (min-width:320px;) and (max-width:719px;) {
#myadsensead{display:none;}
}
What that does is say”for screen viewing on screens between 320px and 719px wide, don’t show the element with an id of myadsensead”.

Using media queries you can remove or hide elements, change widths, or pretty much do anything that css rules can do -but targeted at a specified screen width.

Remove a domain from Office 365

?A common complaint about O365 is the bizarre way Microsoft handles domain removal and the tenacity with which they hold onto YOUR domain. It should be as simple as clicking the “remove domain” link but the instructions tell you to first remove any association with the domain. If even after changing users and web site over to the default domain STILL doesn’t work, you’re left, like me, wondering why they make things so difficult and why after the correct way to do it has been pointed out to them so many times, they don’t fix the instructions. All they seem to offer is an arcane powershell routine that still might not work!The answer is painfully simple: DELETE ALL USERS. And I mean ALL USERS – including the original id that created the account. To do that, you will have to create an unlicensed admin user and use that to delete the original user.
Keep in mind, deleting a user trashes the associated mailbox, so you have to plan for that.

If this process can’t be made easier by improving the poorly designed ui, then at least the instructions should be corrected. There’s really no excuse for putting users through this much grief just to remove a domain. After all, your domain is owned by you, not Microsoft and they have no right to prevent you from doing what you want with it.

Wrap text around a web part in Office 365 Sharepoint 2013

By default web parts fill the entire zone making it difficult to control your page layouts. One way to position other content next to a web part is to add a css float to the web part. To do that:
Insert your web part on the page
Click the web part to select it and click “Edit Html Source” in the ribbon.
Add a class to the first div in the highlighted section – something like “class=”floatleft” …..

060414_1436_wraptextaro1

 

Right after the end of the highlighted web part bit, paste in your text and save the page
Open the style sheet under “Site” in the ribbon
Add the following rule: .floatleft{float:left;}
Optionally add a margin to separate the elements: .floatleft{float:left;margin-right:20px;}
Save the stylesheet.

Clear The Float.
When you use a float, all subsequent content that can fit in the available space will be moved next to the floated object. If you want to end the float at a certain point and resume the normal flow of the page, add this:

060414_1432_wraptextaro2

Here’s an example of the effect:
http://365new.webbrewers.com/home/protected-page

Access hidden Office 365 Sharepoint Online site locations with windows explorer.

When you open a site in windows explorer, you’re actually exposing the root of the site which can be useful if you need to add a file to the root or view your sitemap etc. Frustratingly though, Msft has hidden various directories from view. The _catalogs directory, for example, which contains all the critical stylesheets, master pages etc can’t be accessed this way. If you don’t want to struggle with Sharepoint Designer, here’s a trick to reveal all user accessible files in explorer:Open network places (or location or whatever your os calls it) and click “add a network place”
TIP: if you get an access denied error, make sure you’re logged in via IE.

To access the root of the site:

Enter https://-public.sharepoint.com/

For a specific directory:
Enter https://-public.sharepoint.com/_catalogs
For a 2013 site you’ll then need to open the master page directory and select the folder for your region (eg en-us)
Once you’ve established a network place you can navigate to it and open the css files in notepad.
After making your changes, you will have to save the file locally, open 2 explorer instances and drag it over to the appropriate sharepoint directory because you can’t save directly to sp (for some reason).
Now you can work directly with critical site files without having to deal with the perennial browser glitches and slowness of the user interface.
Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Centering content area and fixing page width in Office 365 Sharepoint Online 2013 public site

center-contentOne of the stranger design choices in the layout of 2013 public sites, is the”narrow”, left aligned page content area in the Oslo template. Nothing makes a site look more unprofessional or unfinished than awkwardly aligned content areas. It creates a terrible first impression and even though Msft must be aware of the issue from the many complaints about it they’ve seen in the community forum, it still hasn’t been addressed.That’s amazing considering a couple of lines of css code would fix it. The cause appears to be simple: Microsoft allowed space for the right sidebar the Berlin template uses, but then forgot to correct that in Oslo which has no right sidebar. You can see in this demo example how it’s supposed to look »
To get your site looking like that by centering the content areaand fixing the strangely narrow width, add some css rules to your site’s stylesheet
Under “Site” in the ribbon when editing a page, open the stylesheet

At the top, add this, adjusting the pixels to suit:
.contentwrapper div {margin-left:auto !important;margin-right:auto !important;}
div#contentBox{min-width:885px;} *See note below
Page Layouts
The above should address the content areacontainer, but if you are using a page layout comprised of different sections, you may also need to target those sections to get a balanced look. You can get the relevant classes/id’s by looking at the page source code or using a browser developer tool. Here are some examples of the many classes in use:
div.fullPageLayout-inner{min-width:685px !important;}
Header/2 column layout: div.layout-col.twoRowTwoColumn-bottomLeft, div.layout-col.twoRowTwoColumn-bottomRight {width:50% !important}

Blog Pages
If you use the 365 blog, you may notice the right sidebar still overlaps the post content area after applying the fix above. That’s because, unfortunately, Msft still uses html tables for layouts in the blog pages, so a different fix is needed. To complicate things further, Chrome and other webkit browsers don’t treat tables the same way as other browsers…To target just the post content and the table it’s contained in without impacting other tables on the site in MOST major browsers, add this to the stylesheet:
ul.ms-blog-postList, .ms-blog-MainArea .ms-fullWidth table {min-width:750px !important;margin-right:20px !important;}
Adjust the width to suit of course.

Impact On Mobile Site Design
You’ll need to consider the impact of adding a”min-width” rule on your mobile design, if that’s important to you. Take a look at this article for some tips on how to improve mobile views in 365: Improve the mobile view for Office 365 Sharepoint Online public sites.

If you have a question about this or any other Office 365 topic, please visit my forum. I’m also available for consultations or development work!
And if you found this helpful, feel free to share it socially byclicking one of the icons up top!

Emails Not Arriving in Office 365 Exchange? Beat The SPF Trap!

040314_0230_emailsnotar1After setting up O365 Exchange email, and either dutifully adding all the dns records MSFT requires or allowing MSFT to create them if on the Small Business plan, many people report that they stop receiving messages from web site contact forms or other 3rd party services that use their domain in the from address. The messages don’t go to junk – they just disappear. The usual support response is to whitelist the email address/domain, check with the isp and send ndr’s. That might help if the emails are actually reaching Exchange. But it’s likely they are not – and are getting blocked by an isp because the instructions MSFT provides for creating an SPF dns recordare inaccurate or at best, incomplete. The record may be specifically excluding any server but their own from sending emails. This may be an even more significant problemif you have a Small Business tenant and elect to use MSFT’s nameservers, because the provided spf record can’t be edited.What is an SPF record?
An SPF record helps isp’s and receiving email services detect “spoofed” emails. “Spoofing” is the practice of sending emails using someone else’s domain in the from address in an attempt to beat spam filters and get the recipient to trust the email. Changing a “from” address is easy, but changing the server address the email is sent from is not – so an spf record can be used to let the isp know whether or not a server or ip address is allowed to send email using a particular domain.
The Trap
That’s a good thing but it has a potential downside. An SPF record can be formatted to EXCLUDE any other email server or ip address – in which case an isp that checks your SPF record will reject emails from servers you haven’t specifically authorized to send email from your domain.
Unfortunately that’s exactly what MSFT’s recommended SPF record does.
“v=spf1 include:outlook.com ~all ” tells an isp: ONLY EMAILS ORIGINATING FROM OUTLOOK.COM ARE ALLOWED TO USE THIS DOMAIN.
The “~all” EXCLUDES any other server or ip so when your web site or other email sending service send emails from their own server, not outlook.com, an isp may reject their messages.
A typical example would be emails generated by a WordPress site contact form. The originating server would be the site hosting server. If its address is not included in the spf record it will get sent but likely end up in a black hole and never received.

The Fix
The MSFT instructions should tell us to add “include:outlook.com” to an existing SPF record, or make sure to add an SPF record that includes ALL the sending services that may be using a domain. So if you manage your own dns and send emails from services that use your domain, get their ip address or server name and add them to your SPF record. You can only have one SPF, so format it as follows, substituting in your own information:
v=spf1 mx ip4:109.123.124.162/32 ip4:198.91.81.8/32 include:sendgrid.netinclude:zoho.cominclude:outlook.com~all
What that tells an isp is emails sent using my domain from ONLY those 5 locations are legit – which is exactly what you want.
Small Business Tenants Using MSFT’s Nameservers

If you’re not managing your own dns, you won’t be able to edit the spf record MSFT automatically created for you. You can still fix the problem but it will require switching nameservers and manually adding/editing the records MSFT provides.

Add A Site Description To Office 365 Sharepoint Online 2013 Public Sites

Yep – removing the site description was another of those 2013 public site “upgrades”…. Has MSFT ever heard of SEO?? The 2010 asp placeholder for this element doesn’t work in 2013 sites, and there probably isn’t a predefined one, so if you want to add a site description below your site title, you’ll have to hard code it in manually.For that we’ll need to:Open the site in Sharepoint Designer (2010 or 2013).
Open All Files » _catalogs » masterpage and open the html file that’s linked to the master page you’re using (eg oslo.html)
Hunt down this element: h1 id=”pageTitle” class=”ms-core-pageTitle”

031514_2232_addasitedes1

AFTER its closing h1 tag, add the tag and description you want to use eg:

h2 My site description /h2

TIP: If you want to be able to style the description (and who wouldn’t?), add a class eg h2 class=”desc”
h2 class=”desc”>…….
Save the file
To publish it, go to site settings » galleries » master page and layouts and click “publish a major version” from the context menu.
The Result:

031514_2232_addasitedes2

Now you can both let site visitors know what your site is about AND make it a little more relevant and appealing to search engines. If you have any questions, please ask them in my forum »

Add Additional Levels To Office 365 Sharepoint 2013 Site Navigation

If you want to add more levels to the drop down or quick launch navigation in a Sharepoint 2013 site, you can do it by making a small change to the master page in use. This technique should work for any type of site (public/private) in any tenant.
Open the site in Sharepoint Designer
Click all Files » Catalogs » Master page
Master pages can’t be edited directly anymore so open the associated HTML MASTER PAGE FILE (which will usually have the same name eg. oslo.html).
Find “MaximumDynamicDisplayLevels=”2” in the grayed out code under “SPM:<Sharepoint:SPNavigationManager”
Change the “2” to how many levels you want.

031714_2010_addaddition1

Save the file, check it in and publish a major version (if checked out) or go to site settings » galleries » master pages and page layouts and publish it from there.
The Result:

031714_2008_addaddition2

Left Navigation
If using a left hand nav (or quick launch), follow the same process only of course with the appropriate master page – Seattle or Berlin.

041314_0433_addaddition1

Questions?
Ask away in my forum.