Left navigation intranet is so last year!

Standard

I have always been a defender of using the “OOB” Out Of the Box tool of a product before it comes to adding some custom code to it. However, let’s be honest, for years SharePoint was not great at it when only using out-of-the-box features. I even gave a talk in the past where we discussed how to gain the love back from users.

Image result for sharepoint team siteIn the SharePoint world, “Team site” was the default layout for any SharePoint Intranet for years, and still are. Left navigation being super boring, especially when more than 15 links and scrolling 2 meters down the page! So most companies ended to customise their site so much that the next version of SharePoint meant to do it all again.

But with the latest SharePoint modern sites and pages, it’s sleek, minimalist,  MODERNSITE.pngclean and .. well, not clunky anymore! SharePoint owners are now super excited to use them as their intranet pages.

There is just one problem:

we haven’t been told how to use these as the “top level page” of an intranet. The first page that user will see when they click on the SharePoint homepage: https://mydomain.sharepoint.com.

Thanks to this blog article by Jimmy Hang and reading the comments, I have summarised how to do so. And I can confirm to have repeated the steps in 3 different tenants, therefore, no, Microsoft did not remove the ability to use these “workarounds.”

  1. Delete Top Site

    the top site collection of SharePoint already exists (as a boring team site), go to SharePoint admin and delete it (if empty ;-).

  2. Recreate top site collection without selecting a template

    Do not select any template, use the option “Custom / select template later”

    selecttemplate.png

  3. Create a modern communication site anywhere

    Create a new site from the new SharePoint Admin Center or from the “SharePoint” site list, if this option is not disabled for your tenant.

    SaveTemplate.png

  4. Enable to run custom scripts on self-service sites on your tenant

    Preferably from PowerShell for quasi-immediate effect.

    Connect-SPOService -Url https://mydomain-admin.sharepoint.com -credential me@mydomain.onmicrosoft.com
    Set-SPOSite -Identity https://mydomain.sharepoint.com/sites/CommunicationTemplateOnly -DenyAddAndCustomizePages 0
  5. Save this communication site as a template

    Adding /_layouts/15/savetmpl.aspx after the site URL

  6. Open top site collection

    When prompted for a template, upload the template file to solutions, activated it.

  7. Create the site using that template

  8. job done!

But remember, if Microsoft decides to change only one small parameter in the root site or the template, it may break, so don’t do it in a live environment.

Advertisements

I like the new Office 365 MyApps resizable icons

Standard

 

So I can resize some icon and minimise the ones I don’t use much, instead of hiding them fully.

Resize_MyAppsO365_My_Apps

Shame that we still cannot deploy custom icons to all users in one go, there is quite a lot of request about this in UserVoice so hopefully it will be developed:  Allow the admin to pin custom tiles to the app launcher for all users in the tenant

Other suggestion to improve the App Launcher, some not always clever but other would be great to have: Apps and App Launcher UserVoice.

 

 

#CSS Change the style of the View Selector in lists/libraries breadcrumb

Standard

As part of a site branding exercise the breadcrumbs that is displayed when a list or library is open on a view was causing issue. When hovering the current view name its font was bigger and the CSS was not obvious to target.

not good hover:

view_notgood2

(font is larger and little down arrow is moving to the left 2 pixels)

good hover: 

view_good2

Having spent a good hour on that single issue and Googled for solution, here is my finding for later reference.

/* keep same font and position when hovering on view name  */
.ms-ltviewselectormenuheader .ms-viewselector{
 padding-bottom:0px;
 padding-left:5px;
 padding-right:3px;
 padding-top:2px;
 margin-right:0px;
}
.ms-ltviewselectormenuheader .ms-viewselectorhover A{
 border:0px !important;
 font-family: Verdana, Helvetica ;
 color: #0060ad;
 font-weight: normal;
 background-color: transparent;
 font-size: 9px;
 text-decoration: underline !important;
 background-image: none;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:3px;
 padding-top:2px;
 margin-right:0px;
}
/* down arrow to select view */
.ms-ltviewselectormenuheader .ms-viewselector-arrow{
margin:0px 5px 2px 0px !important;
}

References:

SharePoint 2010 Branding and Customization Resources « Branding « Sharepoint « The SharePoint Muse

Standard

I short note to bookmark this article by Marcy Kellar as she regularly updates the links to anything you need to know about Sharepoint Branding and Customisation (with an S in England ;-) Resources.

SharePoint 2010 Branding and Customization Resources « Branding « Sharepoint « The SharePoint Muse.

How to apply CSS effect in “old” browsers

Standard

Rather a bookmark to myself, I found this useful link dated back in 2009 but still in use, I wanted to show some opacity filter (RGBa) on a DIV Background but my client had mainly IE7 browsers.

This tool will convert RGBA or HSLA into –ms–filter (for IE8) and –filter (IE6 & 7)

image

 

Click the image to open the RGBa & HSLa CSS Generator for Internet Explorer on KIMILI.COM

Steps to format a SP2013 site differently depending on the device

Standard

 

This week I was doing some research on how to design to use the new Sharepoint 2013 “device channels” feature which allows designers to show a different MasterPage per device (link), as opposed to just enabling a unique mobile format for all devices.

How to make this

imagelooks like that image took me a good part of the day !

I found a bit of help in various places and will say that JussionSharepoint probably has the most comprehensive steps however he doesn’t discuss designing the Master Page and Layout Page in HTML which is now the recommended way in SP2013, Sonja’s Sharepoint2013 blog also has some valuable reading, but because my brain tends to think in a bullet list kind-of-way so here are my quisksteps on the subject.

[warning] I was going to describe all the steps to configure so that you can navigate your site with a mobile device. However while I was doing so I couldn’t figure out why it still didn’t work on the homepage of my 2013 environment. So here are the pre-requisite before attempting any design. [/warning]

Pre-requisites

1- only works with Publishing Feature enabled

image

2- only works with Mobile Brower View Feature disabled (otherwise it takes over)

image

3- finally (this one too me even longer to figure out!) only works if Wiki Page Home Page feature is disabled.

image

So now that we got that figured out, we can proceed to the customisations.

My 5 or 6 Steps

1) First of all you need to be able to access your Sharepoint site from an HTML editor (I used Notepad++) , so you need to map your computer to the Sharepoint site as a network drive.
2)

Open Site Designer

image

3)

Create mobile master page

imageimage
(use Design Manager to add snippets of code to your HTML file that you will open from your client HTML editor and save again)

4)

Create a new Channel for the mobile device (here you can see iPhone)

image image

5) Edit Site Master page settings
image
to assign the Channel to the mobile Master page
image
6)

Optionally …. Create new Layout page, however in my case it showed an error in Design Manager:

image

To fix:

  • click on the link shows you the error, it seems that Sharepoint is creating a blank Layout page with a few errors as a duplicate <head/>
  • Edit the HTML and correct it by deleting <head /> on Line 10
    image
  • and <title> to </head> on Line 26.
    image
  • Save the HTML and go back to Sharepoint, within a few second it would have converted succesfully
    image

(same as for Master Page use Design Manager to add snippets of code to your HTML file that you will open from your client HTML editor and save again)

I said Optionally for step 6, because there is not point creating a LayoutPage just for a certain device unless you are designing a site specific for a device OR you are going to create a page for each device.

Now open the site in Chrome or IE9 and you can change the user-agent so that it simulates you browsing from a mobile device. My preference at the moment is “User-agent Switcher for Chrome”.

Other tips to share

A few things I experienced that I would place in the “good to know” :

– rename the alternative MasterPage for a channel and it will break all channel (ie I renamed the masterpage for iPhone only, the home page errored when opening it using the defaut channel (IE or Chrome), until you edit the MasterPage settings and fix the missing MasterPage for that channel you renamed.

– after I edited the HTML of the Master page a few times, for no reason there was a large blank space that would be added between some DIV elements, even though they were not showing in the code. I had to remove the .master, it will get re-created form the .html within the same second but fixing the blank lines.

Conclusion

Now I have to say I am not impressed… Basically it would be great to build a LayoutPage for each device so that when you load the page one device A it will be LayoutPage A that opens. This way the webpart zone that have been defined horizontally for computer devices could be changed vertically for phone devices.

But that’s not the way it works, because each webpage uses a LayoutPage and that one is not dependant on the channel. The Master Page is the one that depends on the channel however MasterPage do not hold Webpart Zones but the Content Place Holder for the Layout Page.

Therefore there is still some good design work to do if you want to have a full any-devices-friendly sharepoint site.

In the meantime I will play more with the Mobile Browser View features that turns a site into mobile as it may just be the answer.

Of course it will not be adapted to all devices, and what would be nice is to use this feature “most of the time” and for a couple of page to create a layout that uses our special channel Master Page, but since both cannot co-exist it’s a no go for now.

Note to self: hide "add document" and "add item" from Sharepoint site in 2 seconds

Standard

Add this to your custom site CSS :

<style type=”text/css”>
#WebPartWPQ2 .ms-addnew
{
display:none;
}
</style>

Hideme