2

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.

enter image description here

2) Loading sign appears. enter image description here

3) There is a lag the users can see, as the colors are not applied to the left hand nav enter image description here

4) Then the loading icon appears enter image description here

5) And then finally we get the colors from the theme pulled and applied successfully to the left hand nav enter image description here

How can we get ride of the delay..can anything in the code be improve so the delay goes away

2
+100

By my understanding, you aren't getting any SharePoint specific styling for you custom areas because those areas probably have custom id/classes that aren't compatible with the selectors defined by "SharePoint OOB themes" (I am assuming we are talking of .spcolor/.spfont files). If that is the case, you don't have much choice: you will have to make your customizations "aware" of SharePoint default styles.

This means:

  • locating an OOB DOM element that have the style you need.
  • using the developer toolbar to determine the classes/selectors that are giving that element its style.
  • using that information to make it so that your elements will be included by those selectors.

I remember Heater Solomon compiled a list of SharePoint 2010 OOB classes here that you may use as a starting reference.

0

I don't have much idea but may be issue will be resolved on creating custom theme, so no conflicted with other OOB theme.

  • Even when we create a custom theme, that will only get applied when I select that theme, but when OOB Theme is selected then we it would not be able to get applied to the customizations i made on the form. – spStacker Apr 2 '16 at 14:19
0

I disabled the Minimum download strategy feature and now I am not experiencing the delay any more. Now during the partial updates entire page is loading. Strange thing is the load time of the page is faster then it was when the feature MDS was active.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.