Nu SharePoint 2010 uit is en Microsoft erg bezig is met cloud moet er toch een simpel stukje zijn om SharePoint 2010 naar je eigen hand te zetten. Ik heb het eenvoudig gehouden voor jullie. Check it and let me know. Laat een reactie achter.
Het belangrijkste wat je nodig hebt:
- SharePoint Designer 2010
- Internet Explorer 7 of hoger
- FireFox met FireBug
Zorg dat je in de “Hoofd Site” onder de Style Library je CSS en images plaatst. Maak een nieuwe MasterPage aan in _catalogs/masterpage. Hieronder is de orginele code die in bijvoorbeeld nightandday.master staat. Deze code staat tussen <head></head>
[CODE] <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/controls.css %>" runat="server"/><SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/nightandday.css %>" After="corev4.css" runat="server"/> [/CODE]
Hier onder is de aangepaste code die ik toegevoegd heb.
[CODE] <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/axsys.css %>" runat="server"/> [/CODE]
Het belangrijkste dat ik verwijderd heb is After=”core4.css” . Dat heb ik gedaan om te voorkomen dat de hoogte en breedte automatisch worden gewijzigd door een javascript. Zo kun je dus beter je hoogte en breedte beheersen. Voor de rest kun je eigen vrij je gang gaan. Dus je kunt <div> <table> toevoegen waar je wil.
Het stylen is verder een “trail-and-error” traject. In beide browsers kun je met behulp van F12 elementen bekijken om te zien wat er wordt gebruikt in het CSS-bestand.
Tot nu toe heb ik het vrij eenvoudig gehouden.
[CSS] /*********************************************** **** aanpassingen in CSS **************************/ body { margin:0px auto 0px!important; } body.v4master { background: #10123B url(../../../Images/background.jpg) no-repeat fixed center!important; /* background: #21374c url(../../../Images/background.png)!important; overflow:auto !important;*/ background-color: #21374c; width: 1280px!important; height: 100%!important; } body #s4-workspace{ background: transparent!important; /* background: #ffffff url(../../../Images/title-1.jpg) no-repeat center!important;*/ /* overflow-y:auto; overflow-x:auto; position:relative; left:0px; overflow:visible !important;*/ width:1280px !important; height:auto!important; } #s4-mainarea { background:#ffffff; } #s4-bodyContainer, #s4-ribbonrow { background: transparent!important;} .s4-title { background: transparent!important; } /******** **** einde aanpassingen *********************** ***********************************************/ [/CSS]
Wat doorgehaald is of voorzien van /*[style]*/ wordt niet meegenomen in de style. Verder leef je helemaal uit. Ik maak gebruik van 2 schermen. Scherm 1 heeft een resolutie van 1920 x 1200. In het PDF bestand zie je screenshots.
|