Change Default SharePoint Site Logo CSS Trick – Great for Office 365!

I was just thinking about this issue one day and realized that I could just override the default image but if the user decides that they wanted to change it later via site settings they could.

Why do I love this trick?

  1. You don’t have to set a Site Logo via Site Settings > Title, description, and logo
    1. For On-Prem solutions I would set this via code
    2. For Office 365 you would typically have to do this manually OR powershell to set it across
  2. It’s pure CSS trickery, no change to any markup!
    1. This will work across the board On-Prem/Office 365…. No code….
  3. Manually setting the Logo you can override this trick
    1. For those subsites that don’t want to inherit the logo they can manually set the logo via the Site Settings > Title, description, and logo
    2. Once the logo is set in the default it will override this trick

Get to the trick already!!!!

Add the following lines of CSS. Only a couple of notes to make this actually work.

img[src*='siteIcon'] { 

display: block; 

-moz-box-sizing: border-box; 

box-sizing: border-box; 

background: url(‘/Style Library/mySiteLogo.png’) no-repeat; /* Path to the site logo */ 

width: 180px; /* Width of new image */ 

height: 236px; /* Height of new image */ 

padding-left: 180px; /* Equal to width of new image */ 

} 

.ms-siteicon-img, .ms-siteicon-a { 

max-height: none; 

max-width: none; 

} 

Only 2 important detail for this trick to work.

  1. You must set the actual image size must equal the information above for this trick to work.
  2. DON’T use ‘siteIcon’ in the filename.

How does this work?

This trick works because it uses CSS to catch onto the <img/> field where the ‘src’ contains ‘siteIcon’. This case catches both the themed site icon on the publishing site and the site icon on the team site. The CSS that performs the replacement of the image comes from https://css-tricks.com/replace-the-image-in-an-img-with-css/ by Marcel Shields. You can read more about that there.

  • Publishing Site Logo

clip_image002

  • Team Site Logo

clip_image004

Advertisements

Hide Newsfeed, OneDrive and/or Sites from the Suite Bar – Ribbon Area for SharePoint 2013

It really is super simple and requires I line of CSS per item. If you want to hit them all or any future ones you could hide the whole element. I’m posting this b/c I was looking for a quick fix to do this and all the blogs make you change master pages or something else wacky. I didn’t have mine enabled and really was being lazy. So here it is.

Hide OneDrive

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’] {

display: none;

}

Hide Newsfeeds 

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’] {

display: none;

}

Hide Sites

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {

display: none;

}

Get rid of them all in one shot

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’],

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’],

#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {

display: none;

}

Get rid of the anything that could possible go in there 

#suiteLinksBox {

display: none;

}

 

There you have it folks – simple css to just pop those items right off the page.

Office 365 Icons

Introduction

I recently came across an interesting blog – http://www.n8d.at/blog/office-365-icon-font-documentation/ which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off for a while but recently needed the icons again. So I went digging inside O365 and I found them. They are there if you want to use them. I’ll show you what classes to use. I also pulled the files which I’ll provide a link to at the end of the blog so you can download them and use them and not have to worry about CDN’s.

I found all the O365 icon inside my O365 Portal.  I downloaded the web fonts and a portion of the css file that has the code for the icons.  Using this approach you would be locked into the current icon. Microsoft is likely to continually update the icon & css, so this set would eventually become stale. If there ever is an official CDN I’d switch to that. If you’re on office 365 you don’t need to link to any fonts or css. You are able to just take advantages of the icons immediately you just need to look at my chart to see the classes or determine the code for the css content. If you don’t understand anything about using web fonts or what office 365 icons are, read the blog I mentioned above. That should bring you right up to speed.

Installation

    • copy the css & font folder to your on prem site
    • link to the css file in your masterpage or page (adjust path as needed)
      
      
  • you can implement one of the icons using something like this below
    
    
  • i have additional styles for color, font size, and spacing. view the source to check that out

Explanation of the Grid

  • the orange tiles are icons that are available by using the css:after { content: ‘code’; } or if you copy the supplemental css above
  • the blue tiles are icons that have classes in O365. you can use those classes in directly on your o365 site without attaching any styles or fonts
  • the black tiles are dead, meaning they don’t show or are not in the font package but may be in the official css and have not been purged.

The concept of using fonts for icons is nothing new and if you are not exactly familiar with that check out Font Awesome or Glyphicons. The concept is that fonts will scale nice, the are light weight and fully loaded once when you hit the site. You can easily resize them and re-color them. No need for messing around with images.

Where I found the files

Fonts

https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg

https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.eot

https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.ttf

https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.woff

CSS

https://prod.msocdn.com/16.00.0791.004/en-US/css/shellg2corecss_f727a58f.css

Download Files Here

Screenshot of all the possible icons –> see full preview site above for a live example

1

2

3

4

5

6

7

8

Download Files Here

Thanks for checking this out

Working with SASS style sheets in Office 365 / SharePoint 2013

My new favorite thing is creating all my style sheets with SASS. SASS makes writing my style sheets faster, easier, cleaner, and more reusable. Don’t ask me why I chose SASS, but I liked it just a little better than LESS even though they are very similar.  You can go do research for yourself and decide which you’d like to use.  SASS – http://sass-lang.com/ LESS – http://lesscss.org/.

SASS is nothing new however it is very difficult to work with when using with SharePoint 2010/2013 .. or Office 365. Why is it difficult? Because SASS needs to be compiled to CSS and none of your typical SharePoint tools do that.

 

Current Scenarios:

  1. If you are working on O365 you might be working with SharePoint Designer which won’t do anything for you.
  2. Maybe you have Visual Studio you can use Web Essentials or Mindscape Web Workbench. Both of these will compile the SASS to CSS
  3. You can use a stand alone compiler like Koala, Propos, & Scout (for Windows) … but configuring them to work can be tricky.
  4. You can use an online compiler – SassMeister | The Sass Playground! , but then you will be doing a lot of copy / pasting / uploading.

 

This article is going to show you how to use Sublime Text 2 on your desktop, to write and compile SASS, which will automatically be saved to O365. No copy / paste or uploading needed!

 

General Approach

  • Map network drive to O365 site
  • Use a desktop editor to create SASS
  • Use a desktop compiler to create the CSS
  • Use Scout to monitor CSS changes locally and copy file to network drive

 

Pre-Requisites

1. Java v7 – http://www.java.com/en/download [Scout has issue with any other version, https://github.com/mhs/scout-app/issues/173]

2. O365 Site

 

Step 1 – Install Sublime Text 2 & SASS Builder

1. go to http://www.sublimetext.com/2 and download and install

2. go to https://github.com/jaumefontal/SASS-Build-SublimeText2 (Follow Instructions there skip to step 3)

Installing Ruby

Install Ruby library (for windows) – http://rubyinstaller.org/downloads/

  • check box to add Ruby executables to your PATH

Start Command Prompt with Ruby

 image

In the console type the following

  • gem install sass
  • IF you get this error

image

Take a deep breath – you need to download the cert and add it to your RubyGem’s certificate directory.

image

  • go to that folder in windows in windows explorer
  • open up a subfolder rubygems\ssl_certs
  • copy the AddTrustExternalCARoot-2048.pem to the rubygems\ssl_certs
  • Retry “gem install sass” –SUCCESS!

image 

Installing SASS Build System

The easiest way to install this package is through Package Control.

1. Download and install the Package Control Plugin. Follow the instructions on the website

2. Open the command panel: Control+Shift+P (Linux/Windows) or Command+Shift+P (OS X) and select ‘Package Control: Install Package‘.

image

3. When the packages list appears type ‘SASS‘ and you’ll find the SASS Build System. Select to install it.

image 

4. Set the Build System to SASS,  In Tools –> Build System –> SASS

image

5. Now you can compile your SASS files! Launch your build with Control+B (Linux/Windows) or Command+B (OS X).

**NOTE** if you are not getting you are not getting colors on your SASS – click the bottom right corner and set the Language as SASS

image

 

Step 2 – Map Network Folder to O365

The key to this part is to first log into your O365 site w/ Internet Explorer. I then go to any folder and click the button to Open with Explorer. Then I can usually successfully map the network drive.

PRE-REQUISITES – Your site must be in the trusted sites. I actually add a few *.microsoft[sites] http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx

IE > Tools > Internet Options > Security > Trusted Sites [click sites button]

image 

1. Log into your site with Internet Explorer – be sure to check ‘Keep me signed in’

image

2. Open up any document library [might look different. this screenshot from small resolution virtual machine]

image

3. Next, do the standard map network drive per your Operating System. I’m running Windows 7.

basically right click on Computer and click Map Network Drive

image

4. Enter in the site url w/ any subfolder you want [root is fine]. I also check connect using different credentials.

4.1 Enter in your O365 credentials

image

5. SUCCCESS !

image

Step 3 – Install & Setup Scout

For this you will need to create a local working folder for all CSS. for example I will create a folder on the desktop called ‘MySassExample’

1. Download and Install Scout @ http://mhs.github.io/scout-app/

2. Once Scout installs, Open it up and click the + in the bottom left to add a new project

image

3. Navigate to your local working folder

image

4. Under Configure, Stylesheet Directories –> set the Input Folder to your local working folder & the Output folder to your network mapped drive (o365)

I set it to output to the Style Library of my site.

image

5. Click the Play Button

image

 

Step 4 – The Final Step, Verifying it all works!

1. With Scout running, Go to your local working folder.

2. Create a new .SCSS file or open an existing one in Sublime Text 2

3. Create some SASS

image

4. Save, then CTRL+B to build it. You should get the write ~file output.
 image

5. In Scout, you should see …. overwrite .css

Sometimes you need to give it a few seconds to save the file to o365, the network drive tends to take longer to save files

image

** NOTE if you are using an existing file make sure you check it out via SharePoint. Otherwise it won’t save and you’ll see errors in Scout when it tries **

 

Wrap Up

The concludes how to setup Scout & Sublime Text 2 to create and update SASS styles sheets which compile to .css and automatically push to O365. The hardest thing I found is mapping the drive successfully. There are many helpful articles on the different errors you might get trying to do so.  It may seen like a lot of steps to get going, but if you have used SASS or LESS before you know how powerful it is and how much time you might potentially save. This blog was meant to help get this setup and show you how you can get started. There are other programs like Scout, but Scout was the only one that I could get to work the way I liked. There are also other editors that you could use if you don’t like Sublime Text 2. Best of luck!

 

Resources

More on Scout – http://www.impressivewebs.com/sass-on-windows-with-scout-app/

Errors Mapping Network Drive – http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx

SASS – http://sass-lang.com/

Cache Busting Using CssRegistration & ScriptLink in SharePoint 2010

What is cache busting?

Cache busting is way to ensure that the browser will download a new version of your file. This is easily accomplished using a simple technique of appending a ? with some unique characters at the end.

ex:

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

The browser sees this as a different file and will then download and cache this new file. Each time the browser see’s a different string it will download the file and cache it. Some methods use a revision number, a date, random number, or a signature as a query string parameter. Taking a look at the example above you will see a version number is specified at the end of the .css file to do the cache busting.

SharePoint 2010 uses a technique which involved computing a MD5 hash signature of the file and appending a ?rev={MD5HASH} to the link. This technique works very well because the computed hash won’t change unless you change something in the file.  Also the computed MD5 hash will be unique to ensure that the file will appear new to the browser. For all you super technical people, yes MD5 is not guaranteed to be unique, there is a very very small chance of the hash being the same. This technique of the computed MD5 hash signature is used for both CssRegistration and ScriptLink in SharePoint 2010. If you are interested in more detail then reflect into Microsoft.SharePoint.dll –> Microsoft.SharePoint.Utilities –> SPUtility –> MakeBrowserCacheSafeLayoutsUrl

Cache busting for CssLink

When using CssRegistration the files need to be relative to the Layouts folder, more specifically LAYOUTS\1033\STYLES\{CssFile}.

image

image

If you do not keep the files in the LAYOUTS\1033\STYLES then you will receive an error

image

Below is the rendered html output of the CssRegistration tag above

image

You can see that “/_layouts/1033/styles/” is prepended to the ‘Name’ property provided in the CssRegistration tag and your .css file is successfully cache safe.

Cache busting for ScriptLink

When using ScriptLink the files need to be relative to the Layouts folder. Unlike the CssRegistration, ScriptLink has a property called ‘Localizable’.  In the asp tag below I specify Localizable=”False”

If you don’t specify Localizable=”False” then you need to put the files relative to the Layouts\1033 folder.

image

image

Below is the rendered html output of the ScriptLink tag above

image

You can see that the “/_layouts/” is prepended to the ‘Name’ property provided in the ScriptLink tag and your .js file is successfully cache safe.

What if I am deploying files to the Style Library?

In the scenario where you are deploy CSS to the Site Collection style library then there is no automated way of using the SharePoint cache busting from the CssLink, however you can take a look at Chris O’Brien’s posting – Avoiding bugs from cached JavaScript and CSS files in SharePoint. In this posting he has a solution in which he creates a new class inheriting from CssLink and adds his own mechanism of cache busting. He also mentions that there is no equivalent way to do the same for JavaScript files stored in the content db.

Summary

SharePoint 2010 provides an easy way to do cache busting on CSS and JS files stored in the LAYOUTS folder.

If you store your files in the ‘Style Library’ or content DB then you have to revert to manual methods or get creative with your own solutions.

SharePoint CSSRegistration or Link?

I must say that I’ve been using <link> for my style sheets for some times now. Until recently have seen the benefits from using the CSSRegstration method and now using that exclusively from now on. Even in my master page where I know the CSS files will only load once I will use it. I was unaware that CSSRegistration had Conditional Expression built in to target other browsers, but now that I know that I have no excuse not to use it.

Using the After property

Most of the time you’ll want to load your CSS file after the core V4 css gets loaded. To do this you’ll use the property After=”corev4″.css”

2012-05-01_2043

You’ll see in image below that the files are appearing after the corev4.css file which is the main SharePoint styling CSS file.

2012-05-01_2201

Removing the After property you’ll see the style0.css applied before the corve4.css and style1.css applied after it.

2012-05-01_2212

2012-05-01_2213

Order of Loading

Take notice to the order that you are setting them in the master page. The style sheets set first in the master page will be applied last on page load.

2012-05-01_2043

When the page loads you can see the output.

Style1.css , then Style0.css

2012-05-01_2046

Using Conditional CSS

The CSSRegstration class has properties to target specific browsers similar to this method. http://www.quirksmode.org/css/condcom.html

2012-05-01_2256

Which renders like this, where the comments will target different browsers.

2012-05-01_2257

You don’t have to enter the IF in the condition, that is done for you. But to access NON IE browsers you’ll have to specify another property to reach downlevel clients. Pay special attention to the ConditionalExpression which is set to !IE, to reach other browsers you need to also specify the RevealToNonIE=”True”

2012-05-01_2356

Doing so will prepare that conditional CSS comments in a way that Firefox, Chrome or other Non-IE browsers can read them.

2012-05-01_2358

Controlling Multiple Loading

On benefit of using the SharePoint:CSSRegistration tag is to handle the issue of loading a CSS file multiple times. As CSS files grow bigger and bigger it can be a problem with page load times if you are loading multiple web parts and using the link tag

By using the regular <link> tag to reference your CSS files each time that gets hit it will load your css to the page.

Using CSS Registration will not do that. take this example below. I’m attempting to register the Style1.css, 2 additional times, and style0.css 1 additional time

2012-05-02_0006

and the output will only load the css files once

2012-05-02_0008

Specifying Current Site Collection Urls

Another benefit of using the SharePoint:CSSRegistration tag is the ability to specify files that live in the Style Library in a Site Collection not located at the root of the domain. What do I mean by that? Consider that we are building a branding solution and we are storing the files in the Style Library of that site collection and say for example that the domain is test.contoso.com

So deploying our solution to test.contoso.com would put the files in at test.contoso.com/Style Library/mycss.css. Now when we register the CSS files using the <link> tag it would look like this

2012-05-02_0024

Say you have sub site collections under another managed path that link would break. For example, consider another site collection called /Sites/SC1. This would be test.contoso.com/sites/sc1 and the masterpage would try to find the file at test.contoso.com/Style Library using that <link> tag above.

That would NORMALLY not be a problem if the branding solution or files were deployed to the site collection at “/” and then at “/sites/sc1”. BUT if you only deploy the branding to the “/site/sc1” site collection the files would only exist in that Style Library for that site collection. So the links to the css would be looking at test.contoso.com/Style Library/mycss.css and be broken because the files are NOT there and the files are at test.contoso.com/sites/sc1/Style Library/SC1.

So as confusing as that may have sounded there is an answer to handle that situation.

1. You deploy CSS and images to the Layouts folder – This makes the files available globally. Any reference to CSS or images should start with  /_layouts/MyDeploymentFolder/myCss.css

2. Use SPUrl to handle the adjustment of the link to the appropriate site collection.

Examining #2 – SPUrl

By using the $SPUrl:~SiteCollection you can specify a parameter which will return the current site collection. Below I’ve embedded into a master page

2012-05-02_2313

This is the result on my root site collection “/”

2012-05-02_2319_001

This is the result on another site collection under a managed path “/sites/sc1”

2012-05-02_2319

So as you can see, using this method you can deploy your css / images to the Style Library and be able to access them using this current site collection url parameter.

This about wraps up the major aspects of using CSSRegistration over Link. To sum up the main benefits we have:

Achieved with Link or CSS Registration

  • Controlling load order
  • Conditional CSS
  • Specify site collection relative style sheets

Achieved with CSS Registration only

  • Preventing loading the same file multiple times