2013-09-19

In the last article of this series, I alluded that more could be done in SharePoint on Web Applications with the aid of PowerShell. Most developers and admins of SharePoint 2013 are familiar with the PowerShell’s take-over of the “STSAdm-like” functionality of creating and maintaining SharePoint; however, what I am exploring are some in-roads into the branding of Web Applications through ad-hoc CSS and jQuery and JavaScript.

I will discuss two interesting applications I found using CSS  with PowerShell:  Hiding Selection Panes in the “Composed Looks” option of Site Settings, and applying styles to all displayed Master Pages.  Also I will will explain how to add  jQuery or Javascript to pages on the fly.

I recently read Heather Solomon’s most excellent article on “When to Use SharePoint 2013 Composed Looks (a.k.a. Theme)” http://goo.gl/XRZrzf. In that article, I spied a piece of CSS code to disable the “Composed Looks” to prevent MasterPage and Design Changes.

The CSS works by preventing the left selection panel of the Composed Looks from displaying.  With no selections available for changing the masterpage, font, color scheme or background image, the functionality is greatly decrease.  I liked the code and embellished it slightly to prevent the user from going to the “Try It Out” Screen. As a result, the screen I display is a dead-end except for the Top Navigation Menu.

My CSS file called “DisableComposedLooks.css” reads as follows:

form[action*="designbuilder.aspx"] #sideNavBox {
display: none;
}
form[action*="designbuilder.aspx"] .ms-designbuilder-navbutton-container{
display: none;
}

When running from PowerShell to disable the changing of “Composed Looks” for an entire Web Application, I found I also needed an “UnDo” CSS file and additional logic.  I  called this file “RenableComposedLooks.css” and it reads as follows:

form[action*="designbuilder.aspx"] #sideNavBox{

display: visible;
}
form[action*="designbuilder.aspx"] .ms-designbuilder-navbutton-container{
display: visible;
}

Here is the PowerShell I cobbled together with the undo segments commented out:

#UpdateSuiteBrandingBarforNonAdminWebUsingCSSFile

cls
$ca = Get-SPWebApplication 

foreach($spweb in $ca){
##Disable the Left Panel of Composed Looks
$htmlstring="<div class='ms-core-brandingText'>"
$htmlstring +="<span style='color:White;font-size:medium;font-weight:700;'>"
$htmlstring +="SharePoint-ComposedLooks(Disabled)</span></div>"
$htmlstring += "<style>" + (Get-Content C:\_ps1\css\DisableComposedLooks.css) + "</style>"

##Change Back to Boring
#$htmlstring = "<div class='ms-core-brandingText'>SharePoint</div>"
#$htmlstring += "<style>" + (Get-Content C:\_ps1\css\ReEnableComposedLooks.css) + "</style>"

$spweb.SuiteBarBrandingElementHtml = $htmlstring
$spweb.Update()
}


(My CSS files are located in my “C:\_ps1\css” folder–adjust to your settings to where you store your file.)

The following is an image of my  “Composed Looks”  Selection Screen where I hide the change selections and the “Try It Out” link:

(I realize that nothing is safe from a CSS Expert but this seems a reasonable  start to lock down the ability to change “Composed Looks” on a Web Application.

Do you really want “Rainbow Ponies” or “Team Colors with the Mascot” on your production site? Changing just the masterpage alone could cause changes in the site’s functionality that could throw users into a panic.)

Should you want to try your luck with some jQuery or JavaScript simply replace the Style tags “<Style>” and “</Style>” with “<Script>” and “</Script>”. Then use “Get-Content” to return a “.js” file.

(Be very careful that the syntax is correct in the jQuery , Javascript or the CSS File or the PowerShell script may not complete.)

Also, perfect your scripts in a development environment–unless you are one of those that “Test Rarely and Only in Production“.)

In my next article, I will craft my PowerShell script into a function with a “resetCSS” parameter for testing and reverting the CSS.  This will function like the old “Content Web Editor” on my development environment.

(Please remember that this is kind of a “Shotgun” approach in that it is applying CSS or a Script to all Site Collections and Sites in a Web Application.)

Happy SharePoint PowerShelling,

Stephan

About the author 

Stephan Onisick

Stephan Onisick works as a SharePoint Developer with Analytical Mechanics Associates contracted to the NASA International Space Station in Huntsville, Alabama. He lives in Huntsville with his beautiful wife Janet and 20-month old Shih Tzu named Michael.