4

What options are there to add specific CSS to all ASPX pages in a single page library? The library is storing Dashboard reports and uses the default document template found at /_layouts/CreateWorkbook.aspx.

Creating a copy of this template and add a CEWP by default might break something for Dashboard Designer but i haven't tried. It would be a lot of work recreating all the dashboards using the new page layout as well.

We're using a custom MasterPage and the elements i would need to hide in this specific library must be available on all the other pages that are not included in this library so the alternate CSS URL is not an option.

The CSS is very simple, we just want to remove the left navigation and the topbar navigation/searchbox to use all the space we can get to the actual report.

<style type="text/css">
.ms-core-sideNavBox-removeLeftMargin{ 
display: none !important; 
}
#contentBox{ 
margin-left: 20px !important;
}
#s4-titlerow{ 
display: none !important;
}
</style>

I'm thinking of using PowerShell to loop through all the pages in my library and add a CEWP webpart to all the pages linking to my custom CSS sheet stored in the style library but this seems like a clumsy way to do it. Updating/republishing a dashboard removes the webpart.

Is it possible to add a reference in the MasterPage to apply CSS to a single location, e.g a document library with something similar to a if/else condition?

Even better, is there any option to add a custom stylesheet directly in Dashboard Designer or embed the CSS in the actual report through Dashboard Designer?

1

We're using a custom MasterPage and the elements i would need to hide in this specific library must be available on all the other pages that are not included in this library so the alternate CSS URL is not an option.

I would add a UserCustomAcion ScriptLink (gets executed on every page)
But you can also add the same script in the MasterPage

  • The script checks the URL (or any Marker in the Page)

    • Injects the CSS file with a document.head.appendChild

    • or does nothing

You can even do without the appendChild and inject but not execute a LINK or STYLE definition from your MasterPage
and set the (rather unknown) disabled property of a StyleSheet to false again to activate it in a page.

Load STYLE but NOT apply it

<style type="text/css" id="MyLibrariesOnly" onload="this.disabled=true">
.ms-core-sideNavBox-removeLeftMargin{ 
display: none !important; 
}
#contentBox{ 
margin-left: 20px !important;
}
#s4-titlerow{ 
display: none !important;
}
</style>

Activate all rules in STYLE definition

if(document.location.href.search('CreateWorkbook')>0){
   document.getElementById('MyLibrariesOnly').disabled = false;
}

or

document.getElementById('MyLibrariesOnly').disabled = document.location.href.search('CreateWorkbook')<0;
  • Wow, this opens up so much possibilities, spent most of the afternoon reading up on this.. in the end this worked out for me, just checking if the URL contains the library name and then add an external stylesheet using document.write instead of enabling/disabling the CSS, but this will go into my oneNote for future use. Thanks! – Christoffer Mar 8 '17 at 15:39
  • Which i now noted that it were loaded after the DOM and are applied last.. I will go with your approach instead. – Christoffer Mar 8 '17 at 15:49
  • ""Wow, this opens up so much possibilities"" Which have only been around for a decade or so... But hey.. Microsoft entered the Front-End world now with SPFx.. So its probably going to be cool now.. doing something with Front-End technologies ;-) – Danny '365CSI' Engelman Mar 8 '17 at 17:37
  • Haha, but with an administrative/serverside background i don't have had the chance to work to much with front-end development and this just made me more interested. :) – Christoffer Mar 9 '17 at 7:09
  • Remain interested, its the spark that creates Learning. Don't worry, 98% of Developers share your serverside-only background. – Danny '365CSI' Engelman Mar 9 '17 at 9:44
1

There are probably many ways to do this, ones better than others.

Sometimes I like to use CSS partial matching (*=, ^=), which allows me to include in a globally referenced CSS file, a couple of styles that are for a specific list/form.

I do this by looking at the form action, e.g.

<form method="post" action="/site1/lib1/Forms/EditForm.aspx?...>


form[action^="/site1/lib1/Forms/EditForm.aspx?ID="] .ms-formtable .ms-formlabel
{
/*styles here*/
}

You can apply this to a single form or all forms.

[att^=val] – the begins with selector

[att$=val] – the ends with selector

[att*=val] – the contains selector

CSS Attribute Selectors

  • 1
    How does this apply CSS to other DOM elements in the page? OP wants change the QuickLaunch and hide the Title. FYI your *= CSS selector checks for a string anywhere in the action, so will fire on anothersite/site1/lib1... as well. The CSS StartsWith notation is ^= – Danny '365CSI' Engelman Mar 8 '17 at 10:11
  • as long as whatever elements that need to be changed reside inside the form tag, this can be used to customize their css styles – Tiago Duarte Mar 8 '17 at 10:14
  • +1 for the selector, I forgot to apply it to this scenario – Tiago Duarte Mar 8 '17 at 10:22
  • If you want more Selector goodies: code.tutsplus.com/tutorials/… and github.com/AllThingsSmitty/css-protips – Danny '365CSI' Engelman Mar 8 '17 at 10:24

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.