3

I created some autohosted apps ( for Office 365) and by default there's a script setStyleSheet(); that makes the app look like the rest of the page. This is something I want but I would also like to override a few things, for example I want the same border color around text boxes as on the rest of the page but instead of the white button make it blue (among other things).

I don't want to remove the call to setStyleSheet() because then I would have to style every single element of the app, I can't add a reference to a custom stylesheet in the masterpage because the app is in an iframe. I prefer to not have a bit of <style></style> elements in each app.

What's considered the best way to do this?

Thanks in advance.

Edit

Like I mentioned the app is loaded in an iframe so whatever stylesheet reference I add to the masterpage won't get picked up.

By default the app is blended in with the rest of the page look and feel with this script

<script type="text/javascript">
    // Set the style of the client web part page to be consistent with the host web.
    function setStyleSheet() {
        var hostUrl = ""
        if (document.URL.indexOf("?") != -1) {
            var params = document.URL.split("?")[1].split("&");
            for (var i = 0; i < params.length; i++) {
                p = decodeURIComponent(params[i]);
                if (/^SPHostUrl=/i.test(p)) {
                    hostUrl = p.split("=")[1];
                    document.write("<link rel=\"stylesheet\" href=\"" + hostUrl + "/_layouts/15/defaultcss.ashx\" />");
                    break;
                }
            }
        }
        if (hostUrl == "") {
            document.write("<link rel=\"stylesheet\" href=\"/_layouts/15/1033/styles/themable/corev15.css\" />");
        }
    }
    setStyleSheet();
</script>

Sure I can load another stylesheet there but I wanted to check if this is the intention or if there are any other (new) smarts around branding in SP2013 for this case?

1

The way I achieved in my project was as follows:

  • Editing this part in head section in my master page

    <SharePoint:CssRegistration ID="CssRegistration1" Name="Themable/corev15.css" runat="server" />
    <SharePoint:CssRegistration ID="CssRegistration2" Name="/Style Library/css/general.css" runat="server" After="corev15.css" />
    

General.css is an own css that exists in the site Style Library. So in that css write the style you need to overwrite as !important.

For example, you could use this class to overwrite the grey border in "Find a File" textbox in a document library

.ms-InlineSearch-Outline-Empty
{
    border-color: #FF0000 !important;
}

The .ms-InLineSearch-Outline-Empty is a class that belongs to SharePoint. Search the ones you wanna change and change it!

  • 1
    !important is not always necessary. It depends on when your CSS is being loaded. – user2536 Jul 30 '13 at 8:41
  • Hi, I updated my original post a bit – Peter Jul 30 '13 at 12:43
  • Then, why don't you try to use JQuery approach? something like var $currentIFrame = $('#IDOfTheIFrame'); $currentIFrame.contents().find("head").append($("<style type='text/css'> .my-class{border-color: #HEXCOLOR}; </style>")); You can put this code in the master page – Alvmad Jul 31 '13 at 11:49

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.