A CSS Challenge from Fred:
Make lists look like basic MS-Office tables:
- dark background header row with white text
- alternate rows with light color background
- dark bottom borders on every rows
Here is the CSS to start your list/library styles! Continue reading
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
Sigh, the ribbon. Those two words manage to give most SharePoint developers and designers the chills. And not necessarily in the good way. While the ribbon provides a lot of cool interactivity and functionality for our end users, you just look at it wrong and stuff can go whacky in your SharePoint site. This is the first post in a series dedicated to working with the ribbon. Let’s start off with reviewing what the ribbon really is and what code bits are involved. 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
Want to make SharePoint output the markup YOU want when you create a List View?
Updated! Check out the new features below…with new video, too!
For years, I’ve advised people who have the guts and the skills to ditch Visual Studio and learn more about XSL, CSS and JavaScript (including libraries like jQuery). Maybe I’m a rebel, I don’t know, but I don’t need to write C# to create a kick-ass front end component for SharePoint. So much can be done with the product out of the box, it just takes a creative approach.
Many people know me as the original proponent of the Data View Web Part, first introduced back when WSS v2.0 was released. While SharePoint has come a long way since then, the web developer experience for creating custom views hasn’t. Last week, as I was rehearsing my demonstrations for my SP TechCon session (on, naturally, the Data View Web Part) it occurred to me: This could be easier. Easier to demonstrate. Easier to write. Easier to get excited about. Easier to get the creative juices flowing.
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