I’ve been promising a bunch of people this blog post for the longest time and now I’ve finally got a chance to do a little writeup. This was done probably 4+ months ago as a yearning for a more user friendly intranet portal landing page. Here’s a thumbnail of it (Click for larger size):

Custom SharePoint Portal Index Page

So how did I do it?

Using a Collaboration Portal as a base, I created a totally blank .aspx page and inserted only the bare minimums from Default.aspx for a SharePoint page to be able to run. That’s basically everything above the SPWebPartManager Control in the body of Default.aspx:

 <body scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" style="text-align:center; ">

  <form id="Form2" runat="server" onsubmit="return _spFormOnSubmitWrapper();">

 <WebPartPages:SPWebPartManager id="m" runat="Server"/>


With the prerequisite SharePoint code registers/headers and javascripts calls (is there a better name for this?) in place, I then created a custom table layout for all of my content and placed Web Part Zones into table cells where I wanted to use Web Parts. Sorry, no pictures here.


Next, I copied and pasted from default.aspx all of the  SharePoint controls that I wanted to reuse on my page. This included the Welcome, Global Site Links, and Search Controls.


Navigation


Then for the right navigation into the portal’s sites,  I wanted something that was collapsible as we had nearly 50 sites that needed to be within one click of this main index page. I thought about using the Accordion control of the ASP.net AJAX Control Toolkit but couldn’t figure out how to make it work for some reason. I then tried some moo.fx and was able to get that to do what I wanted pretty quickly and with few tweaks so that’s what I ended up using. I simply placed the javascripts into a folder within my portal where I could easily remember reference it and added this line of code to my page’s <head> section:


 <script type="text/javascript" src="javascripts/mootools.js"></script>


I had placed the moo.fx scripts into http://portal/pages/javascripts/


Company Announcements & Upcoming Events


For these, I took advantage of the Data View WebPart within SharePoint Designer to display the contents of an Announcements List and a Calendar. The Announcements List is also email-enabled so users with the correct permissions like HR would be able to just email their announcements for it to appear on this index page.


The Events Calendar was a little bit more tricky and needed some xsl editing as by default it would also display the time right next to the date. That was a nuisance for all day events in which it would just say 12:00 AM. I think this was fixed by updating the xsl to:


<xsl:value-of select="ddwrt:FormatDate(string(@EventDate) ,1033 ,1)"/>


Unfortunately I forgot what the original xsl was…


Quick Links


These are all static HTML links to sites and pages throughout the portal.


Recent Blog Posts


Super easy, just use the Content Query! Content Query WebPart that is. We had the blogs hosted in the same site collection so we were able to use this to aggregate an X number of blogs and post the newest ones from top to bottom.




Custom CSS


I actually stuck with Default.Master as the masterpage for all of my subsites as that was the best layout for collaborative workspaces but totally redid all of the styles to reflect this company’s branding.  For that I created a new CSS file and went through the SharePoint sites using the IE Developer Toolbar to figure out which styles were being used for what part of the page. Heather Solomon’s CSS Reference Chart was also a huge help. Then I went to the original CSS file that contained the style I was looking for, copied and pasted it into my new Custom CSS file and tweaked it with intentions of just overriding the default ones. Yes, I know this isn’t ideal because both style sheets get loaded and the styles basically get rewritten but if anyone knows of a better feel free to let me know!


Implementing All Of This


I didn’t want to delete the original Default.aspx page in case I needed it for something later on, so I used the Welcome Page setting underneath Site Settings instead. This is at http://portal/_layouts/settings.aspx underneath the ‘Look and Feel’ section. This basically enables you to tell the portal which page to make the default page upon loading this website which I directed to my custom .aspx index page.


For the custom CSS, I went to the Site Master Page Settings page underneath Site Settings again and way at the bottom is where you can define an Alternate CSS URL. I selected the radio button for “Specify a CSS file to be used by this publishing site and all sites that inherit from it.”


That’s about it! Hope this post was useful and thanks for reading!


Advertisement

		
	
										


					

						

							
SharePoint

							

						

						

							
August 10, 2007

							
18 Comments