My golden site design coding rule is site design supporting images are only referenced through the CSS. This would include logos, header images, gradation bars, decorative backgrounds, etc. Content supporting images (like Bob and Joe hanging at the company picnic) are content supporting images and therefore can end up in other places outside of CSS.
A question that often comes up when I teach this is “what about the ALT text value for the image?”. Continue reading
In just about every SharePoint site I customize and every CSS demo I do for people, I always use CSS to convert the SharePoint site title to a clickable logo, much like how we see all across the web. Having your company logo in the upper left corner of your web site that when clicked takes you back to the home page is a very established usability pattern. People just expect it! Continue reading
Switching your SharePoint site from a fluid width (how it is setup out-of-the-box with v4.master or nightandday.master) is a simple task. It requires one change to the master page and the addition of one style statement. Where things get tricky is how to go from there in regards to handling the scroll bar SharePoint automatically generates under the docked ribbon. But let’s get the easy part done first. Continue reading
In addition to the stripped, cleaned and commented SharePoint 2010 master pages that we provide, we also have posted a copy of v4.master (default SharePoint master page – simple layout with top navy bar) that still has all original HTML layout code in place but has the same cleaning and comments added that our Just the Essentials master pages receive. Now another version of this file has been added that is a copy of v4.master with all of the UI3 code removed. If you are not supporting UI3 sites (2010 sites that look like 2007) then you can use the UI4 Only version.
The issue: you start working with CSS to make the global navigation (top navigation) items look like tabs, solid boxes, etc.
If you are using dynamic (drop down) menus, you run into an alignment issue with the drop down container NOT aligning with the colored navigation item: Continue reading
By default, anything you add in your custom SharePoint master page will not only appear in the web interface, but will be passed through and appear in the pop-up dialog box that is used for so many functions in SharePoint 2010. Microsoft recommends adding the s4-notdlg CSS class to any HTML element that you don’t want to appear in the dialog box. So for example: Continue reading
I received a request to hide the “View Properties” and “Reply” icon and text that appears in the far right of the flat topic view in SharePoint 2010. Here is a CSS style statement to hide both links and the separator image that appears in-between. Continue reading
As a follow up to my “Base Master Page Files for SharePoint 2007“, I have put together and posted several different master page files for use with SharePoint 2010. Every file is heavily commented and provides a lot of information about what code is necessary for various SharePoint functionality and content. Due to the enhanced user interface elements added to SharePoint 2010 such as the Ribbon and dialog boxes, there are specific HTML elements, IDs and classes that need to remain in place in the master page. You can’t take a total slash and burn approach to developing a custom SharePoint 2010 master page. So in short, read the comments!
UPDATE July 2012: HTML5 versions of the master pages have been added. Please read this blog post about the changes that were made. Continue reading