What is SharePoint?

What is SharePoint?

First introduced in 2001, SharePoint was created as a platform from Microsoft to host company data and present it in a way that would make it more accessible and effective to all users across an organization.

It has historically been associated with Intranet sites, managing content and documents.  It has evolved over the years to address more business usage and communication needs.

What’s the big deal?

To give you an idea of the platform’s popularity:

  • SharePoint is currently used by 78% of Fortune 500 Companies
  • It is in use by over 17,000 Companies
  • In all deployment types combined there are over 100 million users
  • 20,000 new users are being added every day!

When you hear the term platform you think of a solid, raised structure that allows things to be placed on top of it which are unique from their surroundings.  That’s basically what SharePoint is.  Organizations use SharePoint to create rich, web-based applications that interact with other systems in the company.

So as you can see, it is a growing and evolving technology.  It is also important to note that SharePoint is not an “End all, do all” solution.  Some actions and processes simply won’t work easily with the platform.  It’s similar to the old proverb, “When the only tool you have is a hammer, everything starts to look like a nail.”

While SharePoint is a very robust and flexible way to expose information, documents, and people throughout an organization, it will not replace everything.

Don’t be intimidated by any terms or phrases you hear, by the end of this course you’ll know everything you need to know about the wonderful world of SharePoint.

SharePoint Site Collections

SharePoint Site Collections

Site collections in SharePoint are something that can be a point of contention between SharePoint afficianados.

Site collections are basically a big basket that contain all sites under a single URL.

One point to make that is pretty key here is that in on-premises versions of SharePoint, site collections have their own content database.

In all other forms, including Office 365, SharePoint Site Collections are basically defined by a URL.  So your (sub)site’s URL would be https://[YOUR COMPANY].sharepoint.com/sites/SiteCollection/[Site]/[Subsite]. Using This helps to keep things separate and organized.

Best Practices

Now a days, most of us in the SharePoint world agree, you should avoid using sub sites for anything besides very specific use cases like a short-term goal or project.  (but even then, use Teams for that!)

Reason being that subsites inherit permissions, and also Permission groups from their parent site. Permission groups should be defined at the parents site.  Also, site collection administrators have full access to files and content in the site they administrate.  This means if you have a user with SCA access, they would be able to access HR files, or other sensitive data.  The user may not care and be trust worthy, but it’s better to prevent that possibility from ever becoming a reality.  Also, this makes searching and content search webparts easier to setup and manage because you can simply set it up to search only within the current site collection.

If you’re looking to setup a Main company site with other sites for departments, you should create a site collection for each department.

Something like this:

Top level site

    • https://[YOUR COMPANY].sharepoint.com/

Department Site Collections

  • https://[YOUR COMPANY].sharepoint.com/sites/BILLING
  • https://[YOUR COMPANY].sharepoint.com/sites/SALES
  • https://[YOUR COMPANY].sharepoint.com/sites/HR
  • https://[YOUR COMPANY].sharepoint.com/sites/IT
  • https://[YOUR COMPANY].sharepoint.com/sites/Marketing
  • etc…

Each site collection will allow you to designate different Site Collection Adminstrators, separate sharepoint/security groups, and content search will function better as well.

This way you’ll not only be able to have clearly defined urls, but you’ll also compartmentalize security and in general have a better time orchestrating and administrating SharePoint.

What is SharePoint Designer?

What is SharePoint Designer?

One of the best tools to work in and around all versions of SharePoint is called “SharePoint Designer.”  It’s a program with a ton of features and functions that allows users to edit, modify, and build different components within SharePoint.

Here’s a list of common tasks done with SharePoint Designer:

  • Create sites & subsites
  • Create a list or library
  • Modify the site layouts with custom coding
  • Create workflows for sites, lists, and libraries

Most of the things list above can be done using a web browser as well. Throughout this course, with the exception of workflows, we will be using the browser to perform those tasks and not SharePoint Designer.


This sounds complicated…
It doesn’t have to be!  No matter what you’re doing within SharePoint there will usually be more than one way to accomplish it.  The SharePoint platform has a lot of features and functions built-in.  Most users will be able to work using that out-of-the-box functionality.  What using the designer allows you to do is customize your site, list, library, or workflow’s function in a way that is tailored to the work process you’re using.

Do we really have to use it?
The only reason you’ll ever have to use it would be building a custom workflow—which this course will explain and demonstrate later on.  If you don’t see the need to build a custom workflow, then the answer is no, you don’t have to use it (but it doesn’t hurt to know what it is and can do.)

The Layout of SharePoint 2013

The Layout of SharePoint in Office365

For a first-time user, it is overwhelming.  You’re bombarded with links, pictures, icons that scream “Look at me, look at me!” and it seems that there are a thousand things going on.  Don’t let it phase you!  Lets break it down right now.

Starting at the top you’ll see a bar running along the top of your screen.  It will look something like this.

That “waffle” icon on the left is your App Launcher.  Click that to reveal all of your available apps.


The App Launcher

You’ll see a list of app icons.  Here’s a breakdown of what they do:

The good news is that (in most cases) this app launcher will be at the top of every page and site you go within the Office365 environment.  We’ll now take a minute and go over the major players on this list.

  • OutlookThis is your outlook (email)  mailbox web access link.  You can click this and get instant access to your email.  This link only appears when your company has Office 365 as their SharePoint provider.  Chances are, if you don’t see it, that means you have access to your email through another means.  The good news is, regardless of what kind of SharePoint you have, you’ll be able to get your email through Outlook or a similar email program.
  • OneDriveOneDrive is basically your documents store in the Office365 cloud.  If you have the app installed, you’ll have a link within your windows file explorer, as well as have the option to save your files within the desktop version of the Office suite (Word, Powerpoint, Excel, etc.) This is an extremely valuable and crucial tool that I reccommend EVERYONE use.  Using OneDrive, rather than your desktop or a flash drive allows you to access your files anywhere you have an internet connection from the office portal.  You can also share direct links out with others, granting them the ability to view and even edit them.  If you ever lose your computer or get a new one, you can simply open OneDrive, and all of your files will be there.
  • TeamsTeams is a newer feature of Office365 that allows threaded communication between team members.  Mostly anyone can create a team, which comes with it’s own discussion-style forum.  As you type you can mention other users with @Username, which will send them an email message and Teams alert. This is a pretty powerful tool that you’ll most likely find extremely useful.

  • The Alert BellClick on the bell to show alerts from Office365.  This will show you all of your latest notifications including meetings, reminders, email, and more.

The Gear Menu

The gear menu is a list of actions that pertain to the current site and, if applicable, the app you’re currently viewing.  We’ll go over each of the actions below, as well as further in-depth in other posts.

  • Office365 Settings
    • This link takes you to a page with information on you subscription and other information regarding Office365.
  • Add A Page
    • This creates a page and takes you into the SharePoint page design view.  We’ll go through that in a later post!
  • Add an app
    • This brings up a page that lets you choose an app to add to SharePoint.  Apps are things like document libraries, lists, calendars and more.
  • Site Contents
    • Takes you to a page showing all apps and subsites within the SharePoint site you’re currently viewing.
  • Library/List Settings
    • If you’re on an app when clicking the gear menu– whether a document library or list, you’ll see this link which will take you to the settings page for the app.
  • Getting Started
    • Shows tips and useful info on working within SharePoint
  • Site information
    • Displays details and information about the current site
  • Site Permissions
    • Displays the permissions for the current site, with an option to share the site with another user.


  • [Your User Name]

    This link will give you three options.

    • My Profile
      This is your personal profile, you can modify the info on it so that others in your company can see what you do, what you’re knowledgeable about, and other things.  This is part of SharePoint’s social features.
    • My Account
      This link takes you to the sames place as Office 365 settings in the Gear menu.
    • Sign Out
      This signs you out of Office365 entirely.

That’s the top link bar.  Not much to it right?!

Responsive Resizing of Promoted Links

Responsive Promoted Links App Part

So, previously I wrote about changing the look and feel of the SharePoint Promoted Links app.  If you have modified your promoted links as listed in this article, you’ll see something like this:

Maximized window view:

The problem is that if you resize the window, your tiles get cut off– not a big deal if you have a large enough monitor, but if you’re on a tablet, you’ll lose some links on the page.

Resized window with tiles cut-off:


If you modify the max-width property, and set the width to auto, you get a nice little responsive design-like feel and behavior out of the promoted links.

All tiles shown with resized window:

Here’s the specific code I’m talking about:

.ms-promlink-body {
height: 200px;
width: auto;


Go here for the full source code of the promoted links modifications.

Hide the Ellipses on an App Part

Hide the Ellipses on an App Part

The ellipses are cool.  If you click them you get a nice little menu with actions you can take on the item or file in the same row.  sometimes, you just want to show the content, so you may want to hide them.

Want to hide them?

Drop this code in:

.ms-list-itemLink {
    display: none;

Hide App Part Header Row

Hide the Header Row of an App Part

Here’s a standard Announcement App Part


The header row contains the column headers in the view.  In some cases, you may want to hide this.

Want to hide it?

Drop this code in:

/* Hide Header Row */
.ms-vh, .ms-vh2, .ms-vh-icon, .ms-vh2-nofilter-icon, .ms-viewheadertr .ms-vh-group, .ms-vh2-nograd, .ms-vh3-nograd, .ms-vh2-nograd-icon, .ms-ph, .ms-pickerresultheadertr {
     display: none;

Some Helpful Tips for Using CSS in SharePoint

Helpful Tips for CSS in SharePoint

Below are a list of tips or tricks you can use to make your job of styling a bit easier.

  • Utilize the developer tools.
    If you haven’t already discovered the IE developer tools, you will want to make yourself familiar with it.  Like the name suggests, the toolbar is an important tool and in any web developer’s arsenal used for identification and troubleshooting purposes.  As someone who is trying to customize SharePoint, you will likely be in the toolbar utilizing the  “DOM Explorer” tab.  This lets you explore or select elements from the source file and show the styles that are applied to the object and where the style comes from.My favorite feature is the selector button which allows you to click the object on the page to see the style.  The selector button is in the top left corner of the DOM Explorer and looks like a mouse arrow over a rectangular box (highlighted in yellow).  The style results will show in the right window.You can look through various tabs on the results window.  I use the Styles tab to verify my custom CSS file is referenced and see the inherited styles; the Computed tab to quickly look at the style without all of the inheritance clouding the actual values; the Layout tab to help view and test offset, margin, border, padding, and explicit item size; and the Changes tab to apply style changes test out styles before including them in my custom CSS file.  Any changes you make in the Changes tab will be applied immediately so you can quickly see if you applying the style to the correct element.
  • Don’t be afraid to create multiple style sheets for various purposes.
    The intent of this tip is not to add complexity to your solution, but rather to show you how multiple style sheets can work together to accomplish a business requirement.  We frequently talk to clients who want to be able to print things from SharePoint, without printing all of the branding surrounding the content.  We can achieve this by creating a print.css file which will basically hide all of the master page area, allowing for only the content to be printed.  In the same file, you can control things like page margins, fonts, or even inject a logo or watermark on the page


  • You may need to utilize !important.
    If you have had any experience with styles or style sheets, chances are you’ve run across “!important” trailing behind a particular setting. This parameter gives weight to setting, so even though it may not be the last style applied (remember back to the order in which style sheets are loaded), it will override the setting. SharePoint has a different page lifecycle as compared to a regular aspx page, so there are times where the only way to get a style applied, is to the add this parameter; example below: