Configuring Bind Tuning Themes
Basics of Installing Bind Tuning skins in Hosted Environment
After ordering a bind tuning skin for the Office/365 environment (or any multi-tenant hosted
environment where you have no access at the server/farm level), you will get two templates one which
installs a bunch of style sheets into the Style Library and the other than adds master pages to whatever
sites the solutions are activated for.
The overall process for installing differs depending on whether or not the Publishing Infrastructure is
enabled on the site collection. Basically if the publishing infrastructure is enabled on the site collection
then most all the work can be done at the top level of the site collections and then “pushed” down to all
the subsites.
Note that when using the Bind Tuning themes the configurable and role driven top level navigation
structure that is available on many of the SP Marketplace themes can be used but we are
recommending that it not be used and the new releases of SP Marketplace products (particularly the
Sharepoint 2013 products and Release 4 of the 2010 products will not support the SPMP custom Top
level navigation structure)-- the quick launch (renamed current navigation with Publishing
infrastructure) should be used for navigation within a site.
Process with Publishing infrastructure enabled
All the below steps are done at the top level site for the site collection:
1. Site Settings – Under Site Collection verify that the SharePoint Server Publishing
Infratstructure is Active. If not activate it.
2. Site Settings – under Site Actions – Manage Site Features then Activate the Sharepoint
Server Publishing feature.
3. Upload and activate the two Bind Tuning solutions (e.g. Zeus.SPO.wsp and
ZeusPackage.SPO.wsp)
4. On the top level site in the site collection go to Site Settings- under Site actions -Manage
Site Features
a. Activate the Bind tuning feature Name Package (e.g. Zeus Package)
b. Activate the Bind Tuning feature Name Theme (e.g. Zeus Theme)
5. On the top level site, View all Site Content, then Open the Style Library, then the bind
tuning folder (for example, Zeus), and make sure all files under that folder are checked in
and approved. In some situations all the Bind Tuning files end up checked out. In that
case you need to check them in (as Major Version), then optionally if required- publish as a
new version and then approve each file. This depends on whether or not the Style Library
is setup to require approvals, i.e. require content approval for submitted items. Note be
sure to open the Images folder and checkin those files also.
6. Site Settings then Master pages and page layouts, there you will see new master pages as
a result of step 4. Download a copy of the primary Bind Tuning master template( e.g. for
Zeus it would be Zeus.Master , for some of the other options like SPC that provides lots of
master page options pick the one that matches your needs (e.g, Home_Sidebar.Master).
Downloading a copy probably may require that you first check it out but usually the bind
tuning master pages will be draft form in the Master page library. After Downloading the
copy you can Discard the Check Out as we are going to change the name before we upload
the modified master page basically for safety purposes.
7. Rename the master page in your local folder to SP_Name or any other name you would
like to use to uniquely track this about to be modified master page.
8. Edit the renamed Master page, Notepad can be used or Sharepoint Designer or any other
line editing tool. Make the following changes
a. Using notepad scroll down abit and you will see the following code just before the
</head> tag.
The code in the box above is bind tuning’s way to include the Jquery library. Since this
code invokes a Jquery version that is not compatible with the JQuery version we use,
delete this block of code and replace it with the following two scriptlinks which will use
our JQuery and SPservices javascript routines which are in the JQuery library. Once this
is done the resulting master page will only be usable with SPMP products since it
requires a JQuery library.
<SharePoint:Scriptlink runat="server" Name="~site/JQuery/jquery-1.8.2.min.js"
Language="javascript"/>
<SharePoint:Scriptlink runat="server" Name="~site/JQuery/jquery.SPServices0.7.2.min.js" Language="javascript"/>
For Sharepoint 2013 the above reference to Jquery.spservices should be changed to
jquery.SPServices-2013.01.min.js (and double check that the JQuery Library has
Jquery.SPServices-2013.01.min.js and not only without the .min).
b. If you want to use Bind Tuning Quick launch accordion (hover type) then find the
following tag
<div class="s4-notdlg" id="MenuV"> and replace it with
<div class="accordion s4-notdlg" id="MenuV">
This may not work on all bind tuning templates but it does on some. Sometimes you
may have to search for just id=”MenuV” and then add accordion to the class element.
c. If you want to use the SPMarketplace accordion for quick launch then search for the
following tag:
<div class="s4-notdlg pane w100"><asp:ContentPlaceHolder ID="LeftZone" directly
above that </div> which preceeds that tag insert javascript below or look for the
following set of lines and insert after </Script>
JQuery(function ($) {
<script type="text/javascript">
jQuery(function($) {
$('#MenuV .MenuBar
ul.root').BindMENU({MenuStyle:$('#MenuV').attr('class'),Orientation:"Vertical"});
});
</script>
Lines to insert are:
<script type="text/javascript">
jQuery(function($) {
$('#MenuV .MenuBar
ul.root').BindMENU({MenuStyle:$('#MenuV').attr('class'),Orientation:"Vertical"});
});
</script>
<script type="text/javascript">
//$(document).ready(function() {
if(document.location.pathname.indexOf("usageDetails.aspx")==-1){
$("div.menu-vertical>ul.root>li.static>a").toggle(
function () {
$(">ul", $(this).parent()).show("fast");
},
function () {
$(">ul", $(this).parent()).hide("fast");
}
);
$("div.menu-vertical>ul.root>li.static>ul.static").css("display","none");
var s = $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent();
var p=s.parent();
p.find('ul').css("display","");
}
// });
</script>
This technique will work for some Bind Tuning Themes but not all. Works for Zeus,
Metro but not for SPC. This modified section should then look like:
For Sharepoint 2013 replace the above with the following (similar to what has to be
done for SPMP Seattle master page.
<script type="text/javascript">
if (document.location.pathname.indexOf("usageDetails.aspx") == -1) {
$("div.ms-core-listMenu-verticalBox>ul.root>li.static>a").toggle(
function () {
$(">ul", $(this).parent()).show("fast");
},
function () {
$(">ul", $(this).parent()).hide("fast");
}
);
$("div.ms-core-listMenuverticalBox>ul.root>li.static>ul.static").css("display", "none");
var s = $("div.ms-core-listMenuverticalBox>ul.root>li.static>ul.static>li.selected").parent();
var p = s.parent();
p.find('ul').css("display", "");
}
</script>
d. If you want to hide the first tab in the quick launch if you don’t have ManageList
permissions, place the following code before the /head tag
<style type="text/css">
/* mainlinks */
.menu-vertical > ul.root > li.static:first-child > .menu-item{
display:none;
}
/* Sublinks */
.menu-vertical > ul.root > li.static:first-child > ul.static {
display:none;
}
</style>
<SharePoint:SPSecurityTrimmedControl ID="sitePerms"
PermissionsString="ManageLists" runat="server">
<style type="text/css">
/* mainlinks */
.menu-vertical > ul.root > li.static:first-child > .menu-item{
display:block;
}
/* Sublinks */
.menu-vertical > ul.root > li.static:first-child > ul.static {
display:block;
}
</style>
</SharePoint:SPSecurityTrimmedControl>
9. For some skins you may want to put a background image in the header in those situations –
look for this Line:
<div class="s4-notdlg" id="HeaderAreaShadow"></div>
And replace it with Img.
An example is the following:
<div class="s4-notdlg" id="HeaderAreaShadow"><img alt=""
src="/Intranet/SiteAssets/Images/intranet%20BG.jpg" width="100%"" height="120"
class="s4-notdlg" /></div>
10. Note: This step should not be required if the Bind Tuning skin was correctly ordered!!! If
you want to remove the language and register icons in upper right corner, add
Style=”Display:None;” to the following two div lines:
<div class="s4-notdlg" id="User"><a href="#" class="User"
id="BindUSER">Register</a></div>
<div class="s4-notdlg" id="Language"><a class="Language selected" href="#"><IMG
border=0 src="/Style Library/Zeus/images/Flags/en-US.gif"></a><a class="Language"
href="#"><IMG border=0 src="/Style Library/Zeus/images/Flags/pt-PT.gif"></a></div>
11. Note: This step should not be required if the Bind Tuning skin was correctly ordered!!! To
remove the Terms and Privacy at the bottom of the page, add Style=”Display:None;” to the
two <span id= lines toward the bottom of the master page. Here are the lines:
<span id="Privacy"><a onclick="return false" href="#" class="Privacy">Read about
privacy</a></span>
<span id="Terms"><a onclick="return false" href="#" class="Terms">Read our
terms</a></span>
12. Now save this modified master page and upload it to the masterpages (Site Settings then
Master pages). When uploading select the content type of Publishing Master Page. After
uploading you will need to check it in, then publish it (since it will be uploaded as a draft,
then approve it. Now it will be available to be used in the site collection.
13. On the top site in the collection- Site Settings – under Look and Feel, select Master Page.
On the Site Master Page Settings page select your just created Master Page for both the
Site Master Page and the System Master Page and check the Reset all subsites to inherit
this site master page setting for both the Site Master Page and the System Master Page.
Checking this option will push this selected master page to all subsites below. If at any
time you want some site with the site collection and the sites below it to use a different
master page, then all you need to do is enable Sharepoint Server Publishing feature for
that site, then select a different master page as described above.
Note that this change will result in hiding the top tab in the Quick Launch for all sites – if that is
not desirable then you need to only select this Master page on the Intranet top level site and
push it to its subordinate sites.
14. If you create a new subsite after this process it may not automatically inherit its master
page so you may need to repeat step 10 – you don’t need to select a new master page just
check the reset all subsites box but beware if you any subsites that have a different master
page they will all be reset below the site you are changing.
15. Sharepoint 2013 – you need to upload the new Master file as an ASP Master File into the
same folder as the Bind tuning master page. In some instances where publish is greyed
out you must then check it out and then check it back in. During the check back in process
you will be able to publish as a major version and then it will show up on the list of master
pages that can be selected.
Process without Publishing infrastructure enabled
For the top level site that you want the Bind Tuning skin. Do the following:
1. Upload and activate the two Bind Tuning solutions
2. In the top level site for the site collection go to Site Settings- under Site actions -Manage
Site Features
a. Activate the Bind tuning feature Name Package (e.g. Zeus Package)
b. Activate the Bind Tuning feature Name Theme (e.g. Zeus Theme)
3. Open the SPMP product site in Sharepoint Designer, then copy the primary master page for
your selected Bind Tuning theme, paste it back and rename the copy to a more usable
name.
4. Edit the renamed Master page. Make the same changes described above for publishing
sites to this master page.
5. Now save this modified master page and in Sharepoint Designer ribbon with Master Pages
selected, highlight the new master page and Set as Default and Set as Custom. These two
actions make this the master page for this site.
6. Now select this master page and make a copy.
7. Open each subsite below this major site and then open in Sharepont Designer. Once in
Master Pages view paste in the copy you made number 6 above and repeat step 5.
The following step is may no longer required since the process above updates the Jquery library used.
Office 365 RSS Web Part – when using Bind Tuning skins their Master pages uses the latest release of
JQuery which now appears to incompatible with the Office/365 RSS Web Part. This can be fixed by
editing the web part (it is currently used on the Home page for the Intranet site as the bottom left hand
(or middle) web part. On the edit properties expand Miscellaneous and then check Use Solution’s
JQuery. This should fix rendering issues with that web part when Bind Tuning skins are used.