SharePoint: Design

SharePoint 2010 Blog is now live!

Heather Solomon — Wed, 21 Sep 2011 19:32:05 GMT

I am blogging about SharPoint 2010 in a new site: blog.sharepointexperience.com. Come check it out!

SharePoint 2010 CSS Chart is now live

Heather Solomon — Wed, 03 Aug 2011 20:13:36 GMT

I have posted a new CSS chart for SharePoint 2010. It has all of the same features as the 2007 chart, and then some. :) Check it out at http://spexp.me/csschart

Thanks everyone for your support!

What has been, what is now, and what is coming!

Heather Solomon — Wed, 24 Feb 2010 04:13:36 GMT

Wow, it has been awhile since I posted on my blog. This is an update on the past, the present and the future. Thanks to everyone for your support, comments and care.

2009 was a challenging year for me and I went through several personal changes and challenges. I stayed super busy between being a Mom and helping to run a business. Any leftover time I came across I generally used to catch up on sleep! Many people reached out to me to see if I was OK and sent me very caring sentiments and just really nice comments. I appreciate that and it means a great deal to me. Thanks for being such a cool and tight-knit community!

Moving forward I will be posting about SharePoint 2010, and I am excited to do so in a completely new space! This blog has served me well, but honestly, it’s dated. My blog is also running on an older version of SubText and I don’t have the time and resources to properly upgrade and maintain the blog itself.   Very soon I will be moving to Word Press (don’t get me wrong, SubText is great!) AND changing URLs.   Fresh year, fresh product, fresh blog! All of my existing posts will stay intact and I will definitely keep my CSS chart and base master pages posted for your use. In addition to SharePoint, I am going to focus on CSS as well. Now more than ever it is important to know CSS to successfully brand SharePoint.

I am currently writing a new SharePoint Branding Bootcamp for 2010 course and the first delivery will be in Anaheim, March 29 – April 2nd. A lot of people ask me about writing a book. My class is my book. The cool and different thing about it though is that my course is living and continually growing. Every new thing I come across, every trick I create and new even brand new content is constantly being added to my course materials. And as Bootcamp alumi, you will get all of those updates moving forward. Paperback books can’t deliver new materials to your inbox ;-).

This year I am also going to be supporting the new Virtual SharePoint User Group. I have kids. I work. I have a house to keep up. I don’t have the energy to go to a user group meeting every month, especially in the evenings when my kiddos are home. How many of you feel like me?

Matt Passannante is heading up a new solution that will provide presentations, forums and a lot of great resources to our growing virtual community. The Virtual SharePoint User Group will function a lot like user groups located in cities, except it will offer more resources and doesn’t require chugging through rush hour traffic! Plus it is available to anyone, regardless of geographic location.

One last thing… you gotta check out our new site! Dustin Miller and I collaborated on creating a new SharePoint Bootcamp site that uses WordPress as a content management solution (what, no SharePoint? Yes… we don’t use SharePoint for the sake of using it. I believe in honest assessment of which tool is the best for your needs). The design and CMS system is one thing, but the bigger thing is the ease of access to information.  Subscribe to our RSS feed or iCal for the course schedule, and check out our courses by track, product and audience.

One last, last thing… I am on Twitter now.   @speheather Thanks to everyone out there who bugged me about it. ;-)

Brand it baby! Buy tickets by Wednesday for my next branding class...

Heather Solomon — Mon, 20 Apr 2009 17:27:58 GMT

Themes? Master pages? CSS? Page layouts? Content customization? All covered next week in my SharePoint Branding Bootcamp in Anaheim, CA. You will get a lot of one on one time with me to work on your plans, designs and issues with your SharePoint sites. Check out more info in this post, or online at: http://www.sharepointbootcamp.com/sharepoint_branding_bootcamp.htm

Thanks!

Learn how to brand SharePoint

Heather Solomon — Mon, 13 Apr 2009 19:23:52 GMT

In two weeks I am headed to sunny Anaheim California to teach my SharePoint Branding Bootcamp. There are still seats available and I would love to have you join me for a week (April 27 - May 1st) learning how to effectively brand the SharePoint interface.

A lot of my materials have been updated to include the latest tips and tricks I have discovered. This class covers more than just where SharePoint CSS files are or how to create a theme, we delve into master pages, WCM page layouts, customizing the content display and how to brand all the various components of SharePoint that are not otherwise caught by a master page change. We also go outside technical aspects and discuss how to start your branding process and gotchas for SharePoint design.

This class is for designers, developers, business managers with technical skills and anyone who needs to understand how to change the SharePoint interface. We use SharePoint Designer (SPD) to complete all tasks so you will additionally get a lot of time and experience with SPD.

Also in Anaheim will be Dustin Miller teaching the Original SharePoint Bootcamp and Matt Passannante teaching the SharePoint Administration Bootcamp. You will have access to both of these great guys to ask random SharePoint questions or just about anything in general. :-) We have a great time together, and hey we are staying inside of Disneyland!

To learn more about our classes, check out the web site: http://www.sharepointbootcamp.com/

Styling SharePoint with Attribute Selectors and IE6

Heather Solomon — Mon, 09 Mar 2009 14:40:41 GMT

I recently posted some methods for styling SharePoint web parts using attribute selectors. I heard back from several people about how they can't use this option due to IE6's lack of support for attribute selectors. I was aware of this at the time of the post but neglected to point it out in the post text.

IE6 usage is steadily dwindling (Jan '09 - 18.5% browser market share; source: W3). I know there is also internal use of IE6 throughout organizations, but this is also slowly receding.

CSS is usually about form, not necessarily about function. I encourage people to focus on the most common denominator and not the least common denominator when testing and styling web pages for browser support. If attribute selectors or any other type of method works for the mass majority of your users, then use it. Don't make development harder and more time intensive for the sake of a smaller percentage of users. Having your web pages downgrade gracefully does not mean the web page has to look exactly the same in every browser. You do have to decide what must match visually across all browsers, but ultimately the focus is displaying the content and not what color the text is, etc.

You can also use conditional comments in IE to provide JavaScript or CSS files that are targeted for IE, or even a specific IE version. Learn more about conditional comments here. This method can be used in workarounds and styling differences or even providing a simpler interface for IE6 users.

There are a few posted workarounds for attribute selectors and IE6:
Simulating Attributes Selectors in IE6
CSS + Javascript Workaround for Styling Form Inputs in Internet Explorer (IE)

One last comment before the angry mob hits, I understand that there are situations out there where you have to support IE6. They are the mass majority of users for your site, etc. Attribute selectors aren't the only solution, just an option. Meanwhile, keep encouraging those sites/projects/people to leave analog and join the digital age before we toss their computer monitors out. ;-)

Controlling Single Web Parts with CSS Article Posted

Heather Solomon — Wed, 25 Feb 2009 02:19:01 GMT

I often get questions about how can a particular web part be branded separately from all the rest or be branded by type. For example you want every Contacts list to have a green header bar instead of a tan header bar. Or perhaps you want a column of web parts on a page to look different than the main area that contains other web parts.

The latter I have always had a solution for, the former I figured out something today. As with everything that I focus on, these are "no custom development" / "no .NET code" solutions. You can usually build whatever customization you need with custom code. If you would like to just rely on CSS however, here you go....

Controlling Single Web Parts with CSS

Modifying the second level navigation arrow image

Heather Solomon — Mon, 09 Feb 2009 17:25:38 GMT

If you are working with the default navigation menus in SharePoint, you may come across the need to modify the sub menu arrow that appears to the right of the navigation text, see a screen shot: View image.

Usually the first thing you will do is a right-click -> Save Picture As... to grab the image name. But with this one you will get "WebResource.gif". Upon further inspection, you will find an image name in the page source and a JavaScript reference to WebResource.axd.

WebResource.axd is a .NET 2.0 function that allows you to embed resources such as images into your .NET project. Great. Not much help here then.

In order to alter this image, you just need to utilize an existing property in AspMenu (the navigation code that runs the SharePoint menu). This will require an edit to your master page, so if you are just using a theme, this approach will not work.

Open your master page. Preferrably a custom master page. :-)
Switch to Code View.
Search for "TopNavigationMenu". This should take you to the global navigation (top nav) instance of AspMenu.
Using Intellisense in the code view, or using the Properties pane, add the following property to the AspMenu tag:

DynamicPopOutImageUrl="insert image URL/path here"

So your code should look like:
<SharePoint:AspMenu
    ID="TopNavigationMenu"
    Runat="server"
    DataSourceID="topSiteMap"
    blah blah.....
      DynamicPopOutImageUrl="/images/myimage.gif"
    >

Here is a sample screenshot showing the address book icon in place of the arrow: View Image.

Thanks to Amit for posting this question to me!

Random Design Bits for SharePoint OTW....

Heather Solomon — Mon, 09 Feb 2009 17:01:55 GMT

I often sit and stare at the computer screen wondering what on earth I should blog about. I guess I work with SharePoint branding too much on a daily basis to have particular items stand out to me that say "Hey, blog me!". In an effort to get out helpful bits, I am turning to my blog comments. I unfortunately don't have time to address all the great comments people send me, but I have saved them all. I am going to start picking questions at random to answer here on my blog in hopes of helping out a few people here and there.

Thanks for all of your ongoing support. I can't express my gratitude for all the wonderful things people send me and say to me. You guys are the best... Heather

SharePoint 2007 Design Tip: Gantt View with custom master pages

Heather Solomon — Mon, 10 Nov 2008 18:45:12 GMT

I recently discovered that your custom master page may affect the Gantt view of a SharePoint list. I have seen the colored task bars extend past the framed container of the chart when a custom master page and CSS is applied to the site. If this happens to you, you can try the following:

Systematically strip out the CSS and HTML to identify what code is causing the problem. Be sure to make backups of your files first.
Adjust the DOCTYPE tag that you are using. When this happened to me, I had to go way back and use the following DOCTYPE to get the Gantt view to show correctly: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

And finally, add this on to your list of items to test while developing custom master pages for SharePoint!