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):
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:
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.
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…
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.
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!
Very detailed post, thanks for posting it. I’ve been having a play with Spry recently and am hopeful of a good output. I’ll have something I can publish soon I hope
Great post – have you integrated security trimming with moo tools or are these links hardcoded.
I would love to get more detail.
Thanks Peter. The navigation links are actually hard coded with no security trimming. I suppose that’d be possible though. 🙂
Would it? How would one go about editing security trimming?
I am trying to create new .aspx page under the SharePoint site. I am followed the given steps.
1.Create Web Application in VS2008 and new page(called Demo.aspx) under it.
2.In code behind implemented the OnPreInit() method.
3. In aspx page place the and deployed in LAYOUTS/Test/Demo.aspx.
4.Signed the assembly and deployed in GAC.
I think I am following the step to use custom aspx page under sharepoint environment.
Still It throw error..(Content Controls are allowed only in content page that reference the master page)….
You help will be highly appreciated….
When I include mootools.js in my masterpage the html editor stops working. Did you had the same problem? How to solve it?
btw: nice looking landing page
Good Post and thanks for sharing your practice. Can you please provide me more details on Navigation. Because I’m also going to plan to design navigation with MOOTOOL.
I tried to use the accordian for navigation in my MOSS 2007 master page but it’s not working.
I basically used the same code that was in the demo. I’m referencing the mootools.js and demo.js correctly.
What could I be doing wrong?
What were the tweaks you did for the navigation?
Can you suggest a framework that actually works and the best way to implement it?
With the Moo Tools, the menu is not collapsing at all, so I can see the sub items as well.
The side menu will not contain any links within the Sharepoint website. Strictly links to external websites. Hopefully this will make it a bit easier
Thank you! just what I need to read right now…
Толстой тоже писал, но только не все его читали 😉
i’m so happy that i saw this blog. that post was so cool. thanks again i saved this blog.
are you going to write similar articles?
if you want a great wedding decoration, just fill them up with lots of flowers and laces.,
Everyone loves what you guys tend to be up too. This sort of clever work and coverage!
Keep up the excellent works guys I’ve added you guys to blogroll.