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!

 

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/

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.  ;-)

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

I recently got a question from James in Australia about the challenges small institutions face with using and deploying SharePoint.  I know a lot of people are in this position where they want to use SharePoint but don't have the resources to support hosting it internally.   You can check out Microsoft Online Services, they offer SharePoint hosting via SharePoint Online.   http://www.microsoft.com/online/sharepoint-online.mspx 

Hope this helps, thanks James!

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.

1. Open your master page.  Preferrably a custom master page.  :-)
2. Switch to Code View.
3. Search for "TopNavigationMenu".  This should take you to the global navigation (top nav) instance of AspMenu. 
4. 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!

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

At SharePoint Experts we are expanding our training offerings!  I am excited about the new sessions we are hosting, the unique learning environment we are creating, and the innovative classes we are in the process of authoring.  Starting the week of February 9th, we are hosting five Three Hour Tours highlighting popular SharePoint topics such as...

The Data View Web Part: Deep Dive! - Find out more
February 9, 2009, 1:00 PM - 4:00PM CST

SharePoint Features: What's the Big Deal? - Find out more
February 10, 2009, 1:00 PM - 4:00PM CST

InfoPath and SharePoint: A Primer - Find out more
February 12, 2009, 1:00 PM - 4:00PM CST

SharePoint Planning: The Business Comes First - Find out more
February 13, 2009 - 1:00 PM - 4:00PM CST


And then my personal favorite (gee, wonder why ;-)...

Brand It!: SharePoint Branding, from Start to Finish - Find out more
February 11, 2009, 1:00 PM - 4:00PM CST
 
During this session, Heather Solomon will show you how to brand your SharePoint sites, from start to finish.  Combining master pages, page layouts, CSS and content types, you'll see how to take a design comp and basic taxonomy information and apply it to a MOSS 2007 site.
•    Critically examine design wireframes to determine if there are any SharePoint "gotchas"
•    Create custom master pages from a base master page definition
•    Create a custom theme
•    Design CSS variations so that your web site's departments/sections can have their own color scheme
•    Use publishing workflow features to avoid publishing unfinished pages, and allow non-designers to create new content on your sites

In this 3-hour session I cover key branding concepts and brand a site from start to finish. It is a whirlwind of branding activity that is a both great intro to or refresher for how to brand a SharePoint publishing site.

Also, be sure to sign up for our mailing list.  We will soon be announcing new classes exclusively taught online, and I am cooking up a class that you won't find at any other SharePoint training house.  :-)

Cheers everyone!

I am looking for a few good people with specific skills....   My day job is serving as the Director of Creative Services at SharePoint Experts.  We have an immediate need for consultants with ActionScript skills who can write components in Flash. We have short term contract work for a specific project, and we need someone with strong code skills, you don't have to be a designer, we got that part covered. :-)

As a side note, if "SyncSWF" means anything to you, please contact me!

If you are interested, please submit your resume and portfolio to the SharePoint Experts Contact Desk, using this form will allow you to upload files. Thanks!

Application screens (a.k.a. "_layouts" screens) usually don't display the search in the header. There does appear to be a few screens out there that do, and depending on your design for application screens, this may throw a wrench in how your page looks.  To stop the search from showing in any application screen, add the following CSS style to your theme or alternate CSS file:

.ms-searchform {
     display: none
}