I have created created a custom master page out of seatle.master page. Added following customization's.
- Borders to the left navigation bar
- Boxed Top navigation menu with borders and background color, something like http://red-team-design.com/css3-animated-dropdown-menu/
- Created a div to box around the navigation items
- Div below the Navigation bar
- Borders around the page layout content
- Footer with background color and borders
- Created a div for the footer
The additional styling mentioned above is applied through a custom CSS file.
Now the client also wants to apply OOB theme to the master page, but when I apply the OOB theme to the custom master it gets applied only to the untouched parts of the master page and not to the custom divs or borders that I have added to it; which is obvious.
But I would need to make sure that when a theme is selected the colors belonging to that theme should also get applied to the customization that i have added.
Any suggestions?
EDIT 1: Based on the suggestions from SPArchaeologist. i have created the functionality below. I am calling a function called getTheThemeValue in the document.ready jquery function. In this function i am calling the composed looks list for that particular site and getting the colors from the .spcolor file and applying to my custom elements on the page. Things work fine on the page but having issues when there is a partial update where in there is a delay faced.
function getTheThemeValue() { var dfd = $.Deferred(function () { currentWeb = SP.ClientContext.get_current(); webSite = currentWeb.get_web(); url = _spPageContextInfo.webAbsoluteUrl; } **//get the url of the .spcolor file from the theme applied for the current site** var context = new SP.ClientContext(url); list = context.get_web().get_lists().getByTitle('Composed Looks'); var caml = new SP.CamlQuery(); caml.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Name' /><Value Type='Text'>Current</Value></Eq></Where></Query></View>"); returnedItems = list.getItems(caml); context.load(returnedItems, 'Include(Name,Created,ThemeUrl)'); context.executeQueryAsync( function () { var enumerator = returnedItems.getEnumerator(); while (enumerator.moveNext()) { var listItem = enumerator.get_current(); var linkToColor = listItem.get_item('Name'); var linkToColor1 = listItem.get_item('Created'); linkToColor2 = listItem.get_item('ThemeUrl').get_url(); var nm; // get the colors from the .spcolor file
$.ajax({ type: "GET", url: linkToColor2, 'async': false, datatype: "xml", success: function (xml) { var xmlAttr = $.parseXML(xml); var x = xmlAttr.getElementsByTagName("s:color"); var navigationBGcolor = null; var borderColor = null; var footerText = null; var borderLines = null; var hoverBackGround = null; var selectionBackground = null; var strongBodyText = null; for (i = 0; i < x.length; i++) { s = x[i].getAttribute('name'); switch (s) { case ('TopBarBackground'): { navigationBGcolor = x[i].getAttribute('value'); navigationBGcolor = navigationBGcolor.substr(navigationBGcolor.length - 6); break; } case ('SuiteBarBackground'): { borderColor = x[i].getAttribute('value'); borderColor = borderColor.substr(borderColor.length - 6); break; } case ('TopBarText'): { footerText = x[i].getAttribute('value'); footerText = footerText.substr(footerText.length - 6); break; } case ('Lines'): { borderLines = x[i].getAttribute('value'); borderLines = borderLines.substr(borderLines.length - 6); break; } default: { break; } } } var navColo = "#" + navigationBGcolor; var borderColo = "1px solid " + "#" + borderColor; var navigationBackGround = "#" + borderColor; var footerColo = "#" + footerText; var borderLineColo = "1px solid " + "#" + borderLines; var strongBodyTextColo = "#" + strongBodyText; var selectionBackGroundColo = "#" + selectionBackground; //applying the colors from the theme to the customize section on the master page
$(".Footer").css('background-color', navColo); $(".Footer").css('border-top', borderLineColo); $(".FooterLinks").css('color', footerColo); }); }); } }); dfd.resolve(linkToColor2); //loadDoc(); } }, function (sender, args) { dfd.reject(args.get_message()); }); }); return dfd.promise(); }; $(document).ready(function () { // when the page load it was taking time for the colors from the code to get applied to the master page so i introduce the class .se-pre-con.Now the image loads first time and when the fetching color from the theme and appying to the elements is done in the promise.
$("<div class='se-pre-con'/>").appendTo('body'); $(".no-js #loader").css('display','none'); $(".js #loader").css('display','block'); $(".js #loader").css('position','absolute'); $(".js #loader").css('left','100px'); $(".js #loader").css('top','0'); $(".se-pre-con").css('position','fixed'); $(".se-pre-con").css('left','0px'); $(".se-pre-con").css('top','0px'); $(".se-pre-con").css('width','100%'); $(".se-pre-con").css('height','100%'); $(".se-pre-con").css('z-index','9999'); $(".se-pre-con").css('background','url(/_catalogs/masterpage/StarterBranding/Preloader_2.gif) center no-repeat #fff'); var promiseValue = getTheThemeValue(); promiseValue.done(function (result) { $(".se-pre-con").fadeOut("slow"); }); promiseValue.fail(function (result) { }); Things work fine and i have no issues but when there is a partial update on the page lets say when i click on the document libray there is still between the colors getting applied to the master page customized parts.
Below are the images 1) When i click on the document library.
2) Loading sign appears. 
3) There is a lag the users can see, as the colors are not applied to the left hand nav 
4) Then the loading icon appears 
5) And then finally we get the colors from the theme pulled and applied successfully to the left hand nav 
How can we get ride of the delay..can anything in the code be improve so the delay goes away
