Making Branding and Images Unified for Non Developers

Posted By Posted by: EPM Partners on August 29, 2013

We’ve all had the pain of trying to make images, text and different items in web parts alight to ensure multiple different pages provide a unified display of branding or information. Sometimes if you try to complete this manually via the user interface it can be time-consuming or impossible to replicate exactly.

Recently I designed a solution that helps unify this process to ensure that different pages display formatted information identically without having to modify the custom master page.  The solution involves creating a java script or CSS file and referencing it on the relevant pages. There are some great benefits to complete this as it doesn’t just provide a unified user experience but it also provides a single source to update. This can be of great benefit as most SharePoint and Project server environments have multiples of sites or pages that need to contain the same elements. Instead of editing each site individually with the below solution you can actually update the single file and upload it and the changes will be replicated/rendered via each location the script is called.

In my example I tested a CSS style sheet that removed the navigation pane and a JavaScript file that formatted some images.  For this example I’ll focus on the JavaScript file example. To complete this solution the first step is to design a visual experience you want to push out to different locations on a site or page. The steps I utilised to complete this was:

  1. Insert a Content Editor Web part.
  2. Insert Images into the Content Editor Web part via the Ribbon:
    1. Insert Project Banner.
    2. Insert Project Tiles Pictures
    3. Insert Links via Ribbon to the Project Tile images so that when the image is clicked they navigate to a relevant location.  An example of when this would be used is if you wanted to create a tile effect in Project server 2010 similar to the out of the box functionality Project Server 2013 provides.

Once this is complete we have the base of what is required. You can then click on the content editor web part and within the ribbon select HTLM> Edit HTML Source.

This will then provide you with the HTLM behind the elements you have created via the user interface.  My solution look like:

Project Banner:

<table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width: 100%”><tbody><tr><td valign=”top”><img src=”/PWA/SiteCollectionImages/Photos/KCHomepage-Photos-EPM.jpg” vspace=”2″ hspace=”3″ alt=””/></td></tr></tbody></table>

Project Tiles with links:

<table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width: 100%”><tbody><tr><td valign=”top”><a href=”/PWA/KnowledgeCentre/Pages/Framework.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Framework.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Template-and-Examples.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Templates.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Procurement.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Procurement.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/Project%20Detail%20Pages/PCP.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PortCapacityProgram.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Resource-Library.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Links.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PWA.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a></td></tr></tbody></table>

 

From here you can copy the values that define the location where these sites fit i.e border=0, vspace=”2″, hspace=”3″, cellspacing=”0″, cellpadding=”0″ and style=”width: 100%” to utilise in JavaScript field. The idea is to utalise javascript to render these images.  I created a javascript file as follows:

function renderHeader(){

document.write(‘<table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width: 100%”>’);

document.write(‘<tr><td valign=”top”><a href=”/PWA/KnowledgeCentre/Pages/Framework.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Framework.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Template-and-Examples.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Templates.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Procurement.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Procurement.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/Project%20Detail%20Pages/PCP.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PortCapacityProgram.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Resource-Library.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Links.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PWA.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></td></tr>’);

document.write(‘</table>’);

}

 

//run above js function when this js is loaded

renderHeader();

In effect this JavaScript will render the image that we manually created each time with the same spacing, formatting etc.  Once you’ve created a script to do this you can simply upload it to a common location at the root. In my example I selected /PWA/style library. To keep the solution clean I created a folder in this location called “Scripts”.

Once the script is uploaded it is as simple as referencing this script in the Source HTLM on the page you want to utilise this on.  Navigate to the blank site/page you wish to apply this to and edit the page. Once it’s in edit mode and add a content editor web part and select Edit HTML Source from the ribbon bar.  Then all that is required is to add the JavaScript code to call the relevant script.  An example of this is:

<script src=”/PWA/Style%20Library/Scripts/KC_Header.js” type=”text/javascript”></script><script src=”/PWA/Style%20Library/Scripts/PoMC_KC_Tiles.js” type=”text/javascript”></script>.

This is where the tricky behaviour occurs. After you click ok it will look like nothing has rendered but this is actually not the case. The script is not executed whilst in edit mode or the page is unpublished.  Once you hit Save & close or Publish dependent on the type of site or page you should see the information rendered correctly.

With this design there is one gotcha to note, once you edit the page that has this solution, you need to go back in to the Edit HTLM Source and remove the HTML tables. The reason for this is that SharePoint populates the rendering information. If you don’t navigate back and remove the htlm that SharePoint populates before saving or publishing the page you will see doubles of all the items rendered in the script.

Below is an example of the double rendered information populated by SharePoint:

<script src=”/PWA/Style%20Library/Scripts/PoMC_KC_Header.js” type=”text/javascript”></script><table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width: 100%”><tbody><tr><td valign=”top”><img src=”/PWA/SiteCollectionImages/Photos/PoMC-KCHomepage-Photos-EPM.jpg” vspace=”2″ hspace=”3″ alt=””/></td></tr></tbody></table>

<script src=”/PWA/Style%20Library/Scripts/PoMC_KC_Tiles.js” type=”text/javascript”></script><table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width: 100%”><tbody><tr><td valign=”top”><a href=”/PWA/KnowledgeCentre/Pages/Framework.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-HelmFramework.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Template-and-Examples.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Templates.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Procurement.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Procurement.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/Project%20Detail%20Pages/PCP.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PortCapacityProgram.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA/KnowledgeCentre/Pages/Resource-Library.aspx”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-Links.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a><a href=”/PWA”><img src=”/PWA/SiteCollectionImages/Tiles/Tiles-PWA.jpg” border=”0″ vspace=”2″ hspace=”3″ alt=””/></a></td></tr></tbody></table>

 

To ensure you do not see double rendered items you just need to remove the information SharePoint populated which is highlighted above.

 


Blog Posted In 

Leave a Reply

Your email address will not be published.