Category Archives: Styles/CSS

Quick Demo: Process Navigation for SharePoint Forms

Posted on by

ProcessSteps

This month I am releasing version 1.1 of the SPELL library, with two major module rewrites. One of them is the SPELL Form module, which allows to enhance the out of the box SharePoint forms, and now includes features such as cascading selections and inline navigation. I’ll have more code to share next month, but for now let me just share a quick demo.

When we refer to inline navigation, we usually think tabs, like what we’ve been accustomed to with the Easy Tabs. The SPELL Nav and SPELL Form modules will render tabs by default, but beyond that they also have the ability to integrate other designs. For today’s demo, I have chosen a type of navigation often found in forms, and usually referred to as “process navigation” or “process steps”, where each “tab” is displayed as an arrow.

Click here for the live demo. Note that such designs rely on css properties that might not work in older browsers.

For the record, I had to fake the form, as you cannot display the out of the box forms on an Office 365 public site (!).

Easy Tabs and accessibility

Posted on by

Adaptive Web Design is my topic of the day, with my RSS reader bringing me two articles on this theme: Responsive Layouts Using CSS Media Queries, by Kyle Schaeffer, and Now You See Me by Aaron Gustafson.

I am sure the Easy Tabs have a role to play in responsive layout, but today I’ll focus on the second article.

In this excerpt from his book, Aaron compares various methods to show and hide content – a standard pattern nowadays with tabbed interfaces, accordions and other widgets.

This gives me an opportunity to point out one of the changes I made to the Easy Tabs last year. In version 5, the show/hide behavior is now included in a stylesheet, in a class called “et-offscreen”. And the method I use is the one recommended by Aaron Gustafson: instead of changing the display to “none”, move the content off-screen. This way, users don’t see it anymore, but assistive technologies can still access it.

As we’re talking Web design, I should also mention that the Easy Tabs follow the progressive enhancement approach.

If you are not familiar with CSS, this post may just be as clear as mud. But the bottom line is that by adhering to the principles of accessibility and progressive enhancement, the Easy Tabs v5 are currently a solid solution to build tabbed interfaces.

Don’t take my solutions at face value!

Posted on by

Last week, I stumbled upon this comment on Twitter:

“I have used and love easy tabs, but I do need pretty on my current engagement”

What? Not pretty, my Easy Tabs? Let me set the record straight.

First, let’s make sure we are on the same page. The current version of the Easy Tabs is v5, compatible with both SharePoint 2007 and SharePoint 2010. You can build your own here:
http://sp2010.pathtosharepoint.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx

By default, the form offers two styles: one taken from SP 2007, and the other taken from SP 2010. Note that both options work on both SharePoint versions (for example, you can pick the SP 2007 style for your SP 2010 site).

You don’t like the colors? Well, talk to Microsoft! I did not invent the styles, I am reusing the default ones you get when you create a team site. The significant advantage here is that you don’t have any external dependency, just add the Web Part to a page and it ‘ll work.

If you want other colors, feel free to pick your own. Click on the “Modify colors” option, and you’ll be presented with a color picker, allowing you to choose your own background and font colors.

Not satisfied yet? Well, you can take it one step further. Look at the Easy Tabs code, and you’ll see that it is made of two independent parts: the stylesheet (style tag) and the tab builder (script tag). Modify the stylesheet as you please to get the final look. As an example, I have built this demo that has it all (rounded corners, hover effects, gradient):
http://sp2010.pathtosharepoint.com/Portfolio/Pages/Styled-Easy-Tabs.aspx

The purpose of the SharePoint User Toolkit is to open the door to advanced designs. Don’t see these tools as final products, but rather as a startpoint to build your own solutions. The beauty of such “User Managed Solutions” is that you have full control on them, and can tweak them to fit your specific needs. I took the Easy Tabs as example, but I could have chosen the image rotator, or other solutions from the toolkit.

If you are interested, I’ll start offering in a couple weeks a new series of online workshops, where I’ll show how to make the most of these tools. Feel free to contact me now if you have specific needs.

If you are a Web designer, or a SharePoint pro, looking for solutions for your customers, I have many other tools in my drawers. Come talk to me about your requirements, and let’s start a collaboration! We can also discuss this on LinkedIn, in the SharePoint User Managed Solutions group. And if you are in San Diego, or the Bay Area, I’ll be there in a couple weeks and we can meet in person.

The “Big Picture”: CSS sprites in SharePoint 2010

Posted on by

I wanted to share this mosaic from the official SharePoint 2010 site, as an example of how Web design techniques are making their way into SharePoint 2010.

If you are familiar with Web design, you’ll recognize a CSS sprite. The principle: multiple images used throughout the Web page are combined into a “master image”. This reduces server requests and improves page load performance.

In the above example, the master image is used to populate the list ribbon (also a feature introduced in SP 2010):

Note that I already talked about CSS sprites a couple months ago, with this example designed to display inline pies in SharePoint lists: http://pathtosharepoint.com/Utilities/PieSprite50.png

Some references if you’d like to learn more and see other real life examples:
– CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea March 2004
http://www.alistapart.com/articles/sprites 
Sprites are the extension of a technique called “sliding doors”, used to create button rollover effects.
– The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

A Content Editor Web Part for every home!

Posted on by

In this post, I am going to describe a technique that allows end users to control multiple SharePoint pages from a central location. As the title suggests, the cornerstone is the Content Editor Web Part.

I’ll first describe the implementation, then I’ll show it at work on two examples: a cross-site menu and a “Breaking News” scenario. We’ll complete our tour with a live demo.

Continue reading →

Live demos

Posted on by

livedemoBy popular demand, I have set up a public SharePoint site to showcase my customizations. This should be especially useful for dynamic behaviors, which are not easy to describe in a blog.

I am using a free service offered by fpweb.net.

The site currently features:
– the expand/collapse buttons
– a simple drop-down menu
– the tiny calendar
– a hover effect on the calendar

See them in action here:
http://8002.freesharepoint2007.com/default.aspx

In the future, I plan to add a download section, and give contributor access to some parts of the site. Let me know if you have other suggestions!

How to scale down the SharePoint Gantt view

Posted on by

fullyearIn SharePoint, one limitation of the Gantt view is that there is no option to adjust the scale. Only a couple weeks are visible on your screen.

How can we change this to view 6 months or one year? Last month, I showed how to shrink a month calendar. Today’s the turn of the Gantt view.

The method

Just like the calendar, the Gantt view has a bone structure: images invisible to the naked eye with a width of 16 pixels. So once again we’ll apply our Jivaro-like technique and reduce their size using CSS.

As usual, use a CEWP to drop the code on your page.

Continue reading →