Styling Headers in the QuickLaunch, SP 2010

I finally have time to really dive into 2010. I will post my notes on how I accomplished individual things as I learn them.

QuickLaunch Headers

Of course, 2010 just can’t use the same styles as 2007, so once again starts the great search to find what class or classes affects what. I only wasted an hour today finding out how to target the headers within the quicklaunch. Use the style below in your custom css to target the headers:

Here is the before and after images:

Advertisements

Styling webpart data with the Data View Web Part

One of the things that as been driving me crazy is the inability to selectively style webparts. On the home page of my company’s intranet, I have several webparts pulling content in, and they all look the same. I primarily wanted to make the announcements web part look different. I tried every hack I could think of to find some kind of unique hook to attach some styling to. I would change the title style and then watch it change ever title on the page. I have been trying to find uses for the data view web part and so I thought, maybe I can use that to pull in the announcements and then style them…

Long story short, it worked. Using the dvwp I was able to pull in the announcements list, set what fields to display, and then individually style the display of those fields.

First, I created a page layout. You can’t add the dvwp to pages directly unless you create a page based off a page layout and then detach that page from the page layout in SPD before you work on it. On the page layout in Sharepoint Designer, I selected a web part zone, clicked on Data View in the toolbar, and then selected Insert Data View. I then pulled the announcements list onto the dvwp area. I clicked on the arrow to the right of the DVWP and the Common Data View Tasks box displayed.
Common Data View Tasks

First, I edited the columns. I removed all but Title and Body. Then I changed the layout to Repeating Form Style. I then set the paging to display items in sets of 4. Under Sort and Groups, I set it to sort by Created, descending.

Now it was time to style the content. First, I removed the word Body that displayed right over the body content. Then I moved the title xsl code to right above the body code. I created two styles, one to handle the title and one for the body. I wrapped the styles around the fields and then cleaned up the display a bit by removing the extra row, hr and br tags.
Wrapping styles around the fields.

Once that was done, I saved the layout, checked it in and then created a new page based off that layout. The dvwp displayed on the page as a webpart. I exported the webpart and then added it to the Web Part Gallery. I went to the intranet home page, put it in edit mode, and then added the webpart to the page.

One note, I tested this on my dev server first and made sure it worked before I tried it on production ๐Ÿ˜‰

Adding Favicons to SharePoint Sites

The new corporate intranet I have been working on for the past year will launch Friday night (yeah!). One of the last things I need to do is to create a favicon. Easy enough. Just create an image 16 by 16 pixels and save it as a gif or png. I then went here: http://www.html-kit.com/favicon/ . This site lets you upload the graphic and it generates the .ico files for you. There are standalone programs I have used in the past to create the .ico files, but this one is a website, its free, and it took ten seconds.

Here’s where I had issues. Just where is the “root” for a SharePoint site? I added the files right next to default.aspx-no dice. I added them to the images folder on all the production web servers. Nope. We use an external share for images so I don’t have to store custom images in SharePoint. Once I added the files there and linked them in the header of my masterpage, voila, they show up!!!

Here is what I added to the head of the masterpage:

Favicon links

Favicon links

As for why this worked, and why having the images in the images directory doesnt work-you got me. I have had issues on regular websites getting the favicons to show up, so maybe they are just poorly implemented by browsers. If you are not using an external share for your SharePoint images, I would suggest you ask your admin to set one up. I add the images once, link them once, and that’s that. I don’t have to worry about pushing them from one server to the next and I don’t have to store them in SP libraries.

If anyone knows a better way to do the favicons for those without an images share, please let me know and I will amend the post.

From Dev to Production-Don’t Forget Your Themes!

We finally pushed our new intranet from development to production the other day. As I was checking the pages I noticed my theme was not showing up in the Themes list. Doh. Anything in the 12 hive that you added does not push when you go from dev to production. You have to manually move copies to all production servers. In my case, our farm has five production servers, and I have a custom theme, so thats three things I need to copy over to each server:
1: spthemes.xml
2: thumbnail image for theme preview
3: custom theme folder

Beyond that oversight, everything pulled over fine, all of my relative links work, pages are there, masterpage and page layouts pulled, all is good. ;0

Creating a Footer with a User Control

My goal was to add a simple footer area to the masterpage, with copyright year and a feedback link-simple stuff. I wanted it so that if the link or the date had to be changed, I wouldn’t have to update every instance of the masterpage. My brain still approaches Sharepoint with Dreamweaver mentalities. I am used to templates and library items in DW and how they work. Equating a masterpage to a DW template is faulty because it is no easy task to make a change to the masterpage and just hit “update” and ta da, the whole site is updated. When you make a change on the master page, you have to go into each site and subsite that uses the masterpage, change the masterpage to something else, and then change it back to have the updates show. For a large intranet, that is just not feasible.

Our old intranet uses Cold Fusion, and we use includes to pull in frequently changing text. I asked one of our .net guys is their was a .net version of this and he suggested user controls.

I opened my site in Sharepoint Designer and went to File > New, then clicked on the Page tab, ASP.NET, and selected Web User Control.

A base file will display. I removed the head content that automatically referenced the theme-it is unnecessary and caused problems with the rendering. I then pasted the html code for my footer. The css references were added to my theme file so that they would be picked up.

The first mistake I made was saving the user control within the site. That doesn’t work. I did some research and found out that user controls must be saved in the Controltemplates folder in the 12 hive on the server. Your path would be something like this:
\\server name\12$\TEMPLATE\CONTROLTEMPLATES

Now you have to add the user control to the masterpage and register it within the page. Find where you want to add the user control and add this code, where mp_footer = name of YOUR user control:

To register the user control, go to the top of your masterpage. There will be several user controls already listed there. Add this code after the other user control registration lines:

Save the masterpage, check it in, and then, yes, you must do the switch masterpage, switch back thing, but just this once ๐Ÿ˜‰

Pretty easy and updating the user control automatically updates every instance throughout your masterpages, so I’m sure you can imagine the many ways you can use these in your sites. One tip about editing the user controls once they are on the server-open them in Notepad. I opened them in Designer and had trouble saving them back to the server. Enjoy ๐Ÿ˜‰

Search Area Makeover

I thought that the search area on the top of each page was a bit bland and I set out to style it. The whole search area is enclosed in an id, WebPartWPQ1. I added this id to my theme css and gave the area some padding and margins, and I added a background. To change the color of the background of the magnifying glass, I copied the td.ms-sbgo class from core and changed the background color. Is nice, yes?

Search area with makeover

Search area with makeover