Streamlined CSS editing: direct save from browser to SharePoint

I love love love live CSS editing. Any time I can cut out an app switch, save and reload, I am all over it. Using a mapped network drive and a browser, I can bypass SharePoint Designer and/or an external code editor and write CSS straight to the SharePoint content database. Woot!

This post is long, but this is one of those situations where it takes a lot more to explain it than to do it.  Then sprinkle in four browser clients to cap it off.  🙂

What is live CSS editing?

Many browsers and tools allow you to modify CSS and see the changes instantly, as if the code was actually a part of the web site. The changes are not permanent and do not affect anyone’s view of the web site except your own.  Live CSS editing is incredibly useful for debugging, trying out changes, tweaking values to get the perfect layout and even writing completely new CSS.

The Setup

Here is what you need:

1) SharePoint 2013+ and/or Office 365

Sorry, no SharePoint 2010 love for this technique.

2) A browser with live CSS editing and save functionality

I prefer Firefox due to elegance and simplicity of the live CSS editing and file save features. For those of you drinking the Firefox haterade, try to give it a go for a little bit. For those of you who can’t install apps on your computer, check out Firefox Portable (runs FF off a USB drive). For those of you who can’t plug a USB drive into your computer, sorry I have no alternative solution.  🙁

Chrome and Safari also offer live CSS editing with a save functionality. IE does too but of the four browsers it has the clunkiest interface and workflow.

3) A computer with a mapped network drive to your SharePoint site

SharePoint 2013+ on-premises

  • Mac OS X 10.10 (Yosemite) or OS X 10.11 (El Capitan)*
  • Windows (anything from the past two decades)

*OS X versions tested at the time of this writing. Future OS X versions will also likely connect.

Office 365

Windows only (at the time of this writing).

Mapping a drive

Windows

There are detailed instructions online for how to create a mapped drive for your particular operating system. How to: Map a network drive to the SharePoint 2013 Master Page Gallery on MSDN provides links for each PC operating system, in the bulleted list towards the bottom of the page.

Mac

Mapping a network drive WILL NOT allow you ADD files to SharePoint. It will however allow you to edit those files once they have been added through other means. Connect to shared computers and file servers on a network on Apple’s support site outlines how to connect to a server via address (second section). The connection will be maintained during the active session on your computer. If you want to automatically connect to the server every time your use your Mac, check out How to Automatically Connect to a Network Drive at Login in OS X.

Where should the drive map to?

I am a root kind of girl and I don’t bother with drilling down to map to the Master Page Gallery or the Style Library.  Everything can be accessed if you just map to the root of your site.  For example: http://mytotallyawesomesharepointsite.com or http://mytotallyawesomesharepoint.com/site/default.aspx

4) A CSS file

For Windows you can create it using the browser live CSS editing functionality (Firefox only). For Mac or other browsers with a PC the file needs to be already created, which can be as easy as using the browser to add a new file via the Document Library options in the ribbon.  The file can be empty, it just needs to exist.

Just existing doesn’t mean the SharePoint site is using the CSS file.  In addition to having the file, you need to link to the file via a Master Page, Page Layout, Alt CSS URL setting or some sort of injection.

The Process

  1. Open your SharePoint site in your browser.
  2. Right click in the web page and select Inspect (Firefox and Chrome) or Inspect Element (Safari). For IE hit the F12 key to bring up Developer Tools.
  3. Navigate to:
    • Firefox: Style Editor
    • Chrome: Sources
    • Safari: Resources
    • IE: CSS
  4. If you are in Firefox and need to create a new file, select the New button in the lefthand sidebar. Once the file is saved (steps 7-8 below) be sure you hook in the CSS file via methods mentioned above under 4) A CSS File.
  5. Locate the CSS file you want to modify or stay in your new file if you just created one in Firefox.
  6. Create CSS rules and/or make changes to existing CSS rules. Code as much as as long as you like, just remembering the old adage to save early and save often.  If your browser crashes before you save, you will lose your changes.
  7. Pull up the save file prompt:
    • Firefox:  Select the Save link that appears to the right of the CSS file name.
    • Chrome: Right-click in the code window and select Save As.
    • Safari: Hit Ctrl+S (Cmd+S) for the universal save command.
    • IE: Select the save icon (disk image) in the left side of the tools area.
  8. In the save dialog, navigate to your SharePoint site via the mapped network drive and select the CSS file to override (if it already exists) or pick a place to create the new CSS file (if applicable).
  9. Continue to edit your CSS.  When you save the file again:
    • Firefox and Safari will automatically overwrite the CSS file you pointed to in step 8.
    • Chrome will require another Save As action as listed in step 7.
    • IE will prompt you again for where to save the file as listed in step 7.

And now you are editing and saving CSS from your browser directly to the SharePoint content database.  With every save you protect your CSS changes and don’t have to copy anything out to route through SharePoint Designer, an external code editor or manual file upload via the browser. This cuts time, steps and simplifies the workflow so you can focus on writing CSS instead of jostling around code bits and files.

Throughout the whole process, Firefox offers the most comprehensive solution, followed up by Safari.