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:

Syncfusion Metro Studio: An Awesome Resource for Icons, Tiles, and UI Elements

Syncfusion Metro Studio is Awesome!

If you’ve ever struggled to find some basic images to use for icons, tile images for the Promoted Links Web Part, or any others, I wanted to share a resource that I use almost daily when building solutions and styling pages in SharePoint.

Syncfusion’s MetroStudio has thousands of wire frame and flat icons you can use for FREE.  You can even create custom icons with text, resize, change the shape, and colors.  It’s an awesome program that I’m sure most of you will find very helpful!