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

Live Blogging from the International Sharepoint Conference 2012 : the list

Standard

This week I was at the #ISCLondon Monday-Tuesday-Wenesday and I was asked a while ago by @Mattmoo2 to blog for the event which I did, until I realised at day 2 that I was not blogging to the conference official blog but his own blog.. oh well, I am very nice so I kept writing!

Then I also reported back to my other home back at Sharepoint Shenanigans which kind of made me feel like a blogger-slut going from one blog to another but that’s ok, it’s all for a good cause!

We need a bit of structure don’t we ? so here is below a list of the various blogs I saw this week, mine and others, all in a one page for your pleasure to read.

full agenda can be found here.

  • IT110 – Working with Enterprise Search Part 2 – Neil Hodgkinson

Blog post by Thomas Vochten

  • IT111 – Migrating Content to SharePoint – Kimmo Forss

Blog post by Thomas Vochten

  • IT112 – Custom Solutions and Capacity Management part 1 – Ben Curry, Steve Smith, Spencer Harbar

Blog post by Thomas Vochten

  • IT113 – Custom Solutions and Capacity Management part 2 – Ben Curry, Steve Smith, Spencer Harbar

Blog post by Thomas Vochten

  • IT114 – Planning for the Cloud – Kimmo Forss, Spencer Harbar

Blog post by Thomas Vochten

  • IT115 – Office 365 and Cloud Deployment Part 1 – Kimmo Forss, Spencer Harbar, Mirjam van Olst

Blog post by Thomas Vochten

  • DEV202 – Project Startup Part 2: Customizing Visual Studio to suit your needs – Wictor Wilén, Waldek Mastykarz

 

Blog post by Francois Souyri

 

  • BUS307 – Why do HR always want something different – Rob Foster

Blog post by Francois Souyri

  • IW403 – Solution 1 – Building the travel request solution – Part 3:Planning and building the user interface – Jennifer Mason, Matthew Hughes

Blog post by Francois Souyri

  • IW404 – Solution 1 – Building the travel request solution – Part 4:Reporting and Business Intelligence on travel requests – Darvish Shadravan, Laura Rogers

Blog post by Francois Souyri

  • IW406 – Solution 4 – Building a Records Management solution – Part 1: Building and Using SharePoint-Friendly File Plans – John Holliday

Blog post by Francois Souyri

  • IW409 – Solution 4 – Building a Records Management solution – Part 4: Leveraging Workflow to Maximize the Benefits of In-Place Record Declaration – John Holliday, Agnes Molnar

Blog post by Francois Souyri

  • IW413 – Solution 7 – Building Workflows – Part 1: Introduction to workflow design – Mike Fitzmaurice

Blog post by Peter Baddeley 

  • IW414 – Solution 7 – Building Workflows – Part 2: Using SharePoint Designer to create a workflow in real life – Penny CoventryCathy Dew

Blog post by Peter Baddeley 

  • IW415 – Solution 7 – Building Workflows – Part 3: SharePoint Designer Workflows in Office 365 – Penny Coventry

Blog post by Peter Baddeley

  • IW505 – Working with Mysites and what makes them special – Bob Fox

Blog post by Francois Souyri

  • IW509 – Solution 8 – Working with External Data in SharePoint – Part 1: Working with Dynamics CRM and SharePoint – Nick Swan

Blog post by Peter Baddeley

  • IW608 – Solution 6 – Building a Custom Branded Portal – Part 5: Development Extras – Tips and tricks for CSS and SharePoint – Cathy Dew

Blog post by Francois Souyri

  • IW610 – Solution 6 – Building a Custom Branded Portal – Part 7: How best to deploy your site branding customizations – Cathy Dew, Paul Schaeflein

Blog post by Francois Souyri

  • IW611 – SharePoint Stars in the Minority Report (Kinect ;-) – Daniel McPherson

Blog post by Francois Souyri

  • IW616 – Introduction to Visio Services – Jennifer Mason

Blog post by Peter Baddeley &  Francois Souyri

  • CS701 – Real World: Building a global Business Intelligence Extranet, from End Users to Support and Operations – Martin Hatch

Blog post by Francois Souyri

 

if you know of any blogs that have been reported the conference, let me know and I will add them here.