SharePoint

SharePoint-elementen verbergen met CSS

10 mei 2012

CSS staat voor ‘Cascading Style Sheets’. Met CSS stijl je de elementen in de pagina op een centrale plek. In deze post laat ik zien hoe je met CSS elementen in de Ribbon kan verbergen.

De site SharePoint 2010 CSS Reference Chart geeft je een overzicht van de stijlelementen binnen SharePoint. Met CSS kun je elementen verbergen voor bezoekers van de site.

In twee vorige posts heb ik een voorbeeld gegeven hoe je met het CEWP de CSS lokaal kan overschrijven.

[listdot]

[/listdot]

CSS overschrijven met het CEWP gebruik je als er alleen op die specifieke site een aanpassing nodig is. Als een wijziging nodig is op meer plaatsen maak de afweging om een custom-CSS te maken en in de masterpage naar de CSS te verwijzen. Het verbergen van elementen is niet het zelfde als rechten toekennen aan een gebruiker. Als er verwacht wordt dat een bezoeker een bepaalde actie niet mag doen of ergens niet bij mag los het dan op door die gebruiker de juiste rechten te geven.

Om de hele Ribbon met CSS te verbergen neem de volgende code op in de html-source van een CEWP:

[sourcecode language=’css’]

[/sourcecode]

Om een specifiek element op basis van zijn ID te gebruiken moet je voor elke punt een ‘\‘ plaatsen en beginnen met een ‘#‘.

Om de knop Nieuw Item (element ID: Ribbon.ListItem.New.NewListItem-Large) te verbergen plaats de volgende code in de html-source van een CEWP:

[sourcecode language=’css’]

[/sourcecode]

In de MSDN-bibliotheek is een handig overzicht van alle elementen die standaard aanwezig zijn in de Ribbon: Default Server Ribbon Customization Locations. Elementnamen vind je ook rechtstreeks in de HTML van de site. Bij het overschrijven van één element werk het door de code rechtstreeks in de HTML-source te plaatsen van het CEWP. Bij het verbergen van meerdere elementen gaat dit niet soepel.

Het CEWP past de HTML aan zodat de oplossing niet werkt.

Om meerder elementen te verbergen schrijf je code in een txt-bestand. Plaats deze in een bibliotheek in je site.

En plaats de link van het tekst-bestand in de eigenschappen van het webpart.

 

 

 

 

 

 

Een voorbeeld van het tekst-bestand kun je hier kopiëren.

Het voorbeeldbestand verbergt elementen in de Ribbon op een lijst in het tabblad ‘items’, een element in de Ribbon in het tabblad ‘Lijst’, het iccontje ‘Nieuw’ van een lijst-item en het element in de lijst om een nieuw item aan te maken.

In het voorbeeld verwijzen de getallen naar de lijn-nummers van de code.

 

 

 

 

 

 

 

 

De cloe van het verhaal: als je weet wat het element is kun je het verbergen in de User Interface!

Een paar geweldige voorbeelden:

[listdot]

[/listdot]

 

You Might Also Like

Geen reacties

Plaats een reactie