Supporters of End User
Web

Brand SharePoint: Quicklaunch - Getting ready to expose CSS (Part 1)

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Branding; CSS; Navigation; Content Editor Web Part; MOSS; WSS; 2007; 2010

You may also be interested in: SharePoint-based solutions by B&R Business Solutions

 

Editor's note: Contributor Benjamin Niaulin is a SharePoint Specialist at Groupe GSoft Inc. Follow him @bniaulin

A good navigation experience can make the difference in your SharePoint deployment’s adoption and experience by the users. Many will agree, if you are looking at a website and cannot figure out where to click to find relevant information, you probably will not come back.

Many factors can play in a good navigation. Designers of navigation have used the Three-Click Rule for many years. The rule suggests that users should never have to click more than three times to get to their destination. Many more factors can play in our success for a well-designed Navigation menu in SharePoint. One of them, branding, has been the main topic in my series on the Global Navigation. This time, I am going to throw myself into the Quicklaunch. The Quicklaunch is that other piece of navigation you find on the left of a SharePoint Site.

The Quicklaunch

This navigation menu typically shows the visitor what he or she can visit on the site. The actual content, meaning the links in the menu, can be managed by the Site Administrator through the Look and Feel section of the Site Settings.

2012-05-13-QuickLaunch-Intro-01.jpg

In this menu you can add two types of content, Headings and Links.

Headings are similar to folders or containers of links in your menu. They are SharePoint’s way of grouping links together.

Links are of course links to anything; documents, pages, sites, external sites, etc.

It’s important for us to understand the difference between the two because we will want to brand these items accordingly.

Getting ready for the challenge

If you have been following the Global Navigation branding series, then you’ll know that I will use the Content Editor Web Part to test our branding. By adding this web part, one can actually enter CSS (method of applying designs on web pages) directly in the HTML source editor inside and only apply branding on a single page. This is great for testing and learning. All the information on how to get set up can be found here: Learn to brand from the start

Remember, I am not a graphic designer and my knowledge on CSS is very basic. The goal of these series is to explore SharePoint branding and make it available to anyone. I strongly recommend you read 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours.

Research

I use a very simple technique to do my research. Find the CSS classes applied around an object in SharePoint and give it a flashy background! This allows me to see where the CSS is actually applied. Our first step is to check the CSS Chart again, pull out all the classes applied and start with a few set on the larger container around the menu.

.ms-quicklaunchouter .menu ul
.ms-quickLaunch .menu
.ms-quicklaunch-navmgr .vertical
.s4-ql .menu-vertical
a.static .menu li
a.static:hover .root
.menu-item ul.static
a.selected .menu li
.additional-background li.static
.menu-item-text li.selected
ul.dynamic, li.dynamic, a.dynamic .s4-sn li.static > a
.s4-treeView .s4-sn li.static > a:hover
.ms-treeviewouter .ms-tvselected
.s4-qlheader

 

Once again, I feel overwhelmed by the number of classes available. But, wait a minute, I see a lot that I recognize… .menu a.static li.selected

I believe we used them in our Global Navigation series. Actually if you remember, I had applied li.static for my Global Navigation with a yellow background and it had affected my Quicklaunch. This was in my Journey into the menu items.

More Research

Although we covered a few of these already, I am not going to assume they work the same way in the Quicklaunch. In the next article, after a few trials and errors, I will choose 2 or 3 classes that make sense and see what we can do with them.

Seen any cool Quicklaunch menus?

Meanwhile, has anyone seen some branded Quicklaunch menus you think are awesome?

Brand SharePoint Series:

Comments

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: