Supporters of End User
Web

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

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:SharePoint 2010 Branding; Branding; Site Manager/Power User; MOSS; WSS; 2007; 2010; CSS for Non-Developers

 

We’ll begin our little journey by changing the background colors of the quicklaunch menu and background column.

  1. Start by changing the top, left and right hand borders of the quicklaunch and the border at the bottom of the recycling bin.
  2. Next we’ll change the color of what I had always called the “separator lines” within the quicklaunch menu. In reality these are borders for the cells of the quicklaunch. If you look at the code block shown below from my copy of the CORE.CSS file you’ll see where I changed the color of “border-top” to #006600. You will also notice that I exaggerated the border weight to make it more visible. Make sure that you leave the weight at 1px if you do this in production.
  3.  
  4. Change the background colors of the Recycling Bin and the “View All Site Content” cells.
  5. Change the background color of the quicklaunch menu cell headers and the quicklaunch submenu, or item, cell background colors. Note that you can do one of two things in order to change the background color of the submenu, or item areas of the quicklaunch;
    • You can change the background-color of both .ms-navsubmenu1 and .ms-navsubmenu2
    • You can change just the color of .ms-navsubmenu2 and change the margin-bottom to 0px.

    If you change only the background-color of .msnavsubmenu1 and do not change the background-color and leave the margin-bottom at the default 6 px you’ll see a margin at the bottom of the item cells in the quicklaunch.

  6. Change the font color of the headers and submenus. Note that I am not going to change the hover or selected font colors, just font color of the base link.
  7. Change the font color of the “View All Site Content”
  8. Change the color of the vertical pagemargin bar that runs to the right of the quicklaunch menu and the column pagemargin frame that you can see at the bottom of the quicklaunch column.
  9. Change the color of the quicklaunch column background. Note that in order to change the color of the column background you’ll need to remove the image that MS uses here as shown in the code block below. Once we have changed the background color if you look very closely you’ll see a very small cell running vertically to the right of the quicklaunch as well as another directly under it. You can change those cells by making the appropriate changes in the .ms-quicklaunchouter code block.
  10. Now we’ll go back and take a look at the final version of our modified quicklaunch column.

Well, that concludes our little tour of the Quicklaunch menu and its surrounding environs. I hope that someone finds this useful. Next, I think we’ll take a tour of the header area of our SharePoint page.

Comments

Shalin Parmar

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Hi Jay,

Excellent article for basic UI modification!

I have though one suggestion. As a best practice suggested by MSFT can't you include these CSS classes in your masterpage or separate css file? That way a Non-Developer doesn't make mistakes in CORE.CSS files which is core to SharePoint.

Also, I doubt how many non-developers will get access to CORE.CSS unless they have their own virtual machine.

Cheers! Shalin

Posted 08-Mar-2010 by Shalin Parmar
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Shalin,

What I am doing is making my changes in a copy of the core.css and then applying those changes through the administrative UI. I am not a huge proponent of applying the chages in the masterpage although that is how a lot of the experts suggest doing it. For someone with minimal dev skills I think a seperate .css file is absolutely the way to go.

I think I did state that in the Intro part of this series but will make sure that I reitierate that as I go forward.

Thanks!

Posted 08-Mar-2010 by Jay
Shalin Parmar

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Excellent Jay! I think I should read all the posts then!!!

Thanks!

Posted 08-Mar-2010 by Shalin Parmar
peace4men

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

GReeaaaat Article, i'm new to moss (5weeks) I thinks tmorow I will try to create a Feature that deploy my modification on those CSS files :)

THANKSSSS

Posted 10-Mar-2010 by peace4men
MOSS2007, CSS and you, the Non-Developer – Part 3: the GlobalTitleArea | EndUserSharePoint.com

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

[...] my last article we started our little journey by changing the look and feel of the Quicklaunch menu and column by [...]

Posted 15-Mar-2010 by MOSS2007, CSS and you, the Non-Developer – Part 3: the GlobalTitleArea | EndUserSharePoint.com
Amy

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Hi, thanks for the great content. I am working on designing a page for the first time in Sharepoint. I am working off a copied template and some things got moved around.

The quick launch vertical text seems to be pushing down the quicklaunch navigation. I also can't see the quick launch vertical text when I am working on the page--it only shows up and pushes the navigation on web preview.

I appreciate any help you may have!

Posted 18-Mar-2010 by Amy
Frank

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Great article just one thing, you did not explain how you got to the code. Are you using SharePoint Designer or 'view source' on the SharePoint site. Remember this is for 'Non-Developers'

Posted 26-Mar-2010 by Frank
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Frank in the Intro article to the series I state that I am using a copy of the core.css file. You are correct that I didn't state exactly how I got that.

I am fortunate enough to have access to a development server at the orginazation I support so I was able to get it from there. I also have a number of virtual machines at home where I could have pulled the file from.

For those that are not forutnate enough to have server access you could ask your server team for a copy of the file. It's located in the following path in the 12 hive.

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\template\layouts\1033\Styles

There is a .vhd you can download from Microsoft but the requirements state that Virtual Server 2005 R2 is required to run it. I haven't had to use it so I don't know if that's entirely true or not. I do know that Microsoft said that you had to have Server 2008 and Hyper-V to run the .vhd for SharePoint 2010 but I have it running using Sun VirtualBox. You might be able to do the same with the MOSS2007 vhd.

Posted 26-Mar-2010 by Jay
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Not sure Amy. To me it sounds like the default.master was customized and got hosed up along the way. Is there anyway you can send me a screenshot of what it looks like so I have a better idea of what's going on?

jsimcox@sharepointmechanic.com

Thanks!

Posted 26-Mar-2010 by Jay
Umar

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Nice work .Question :What if i create and modify site like yours using a corecopy.css file and create a site template and use that template in the future rather then corecopy.css file , so that people will not have to go t master page options and apply there the same file to get the design . just wondering is it possible . Let me know .thanks

Posted 29-Mar-2010 by Umar
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Umar,

That's a good question. We're going to cover some of this in the last article in the series but I'll touch on it for you here.

There are a number of ways to apply the changes to your masterpage. The question is which way works best. If you look at Heather Solomons article on CSS Options with Master Pages (http://www.heathersolomon.com/blog/archive/2006/10/27/sp07cssoptions.aspx) you'll get a good idea of exactly how the changes we are making can be applied and what order they would be applied in based on how you decided to implement your customized core.css.

In the comments section of Part 3 of the series Eric Schrader points out that leveraging our newfound knowledge of where in the core.css to apply our changes we could create a custom theme for a site and apply the changes that way.

There are a couple of benefits, and drawbacks, to that thought.

Drawback - creating a theme is time consuming and does require access to your server.

Advantages - by creating and implementing a theme you'll get a better product in the end.

As I said we are going to cover this at the end of this particular series and may move on and work through creating a custom theme if there is interest.

I would also say that you don't want to use a complete copy of the core.css as your custom css file. The thing is huge and has something like 3000 lines of code in it. Strip out anything that you didn't make changes to and use the file with just your modifications as your customized .css file.

Hope that helps you some.

Jay

Posted 30-Mar-2010 by Jay
Hamid

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Thanks for your great article,but why you did not explain these changes on publishing sites or publishing master pages,such as blue band?

Posted 20-Jun-2010 by Hamid
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch

Hamid,

The series is based off of a project I was/am doing. Since we don't use the publishing master pages I used the team site. Additionally the series is intended to show that with some work, research and motivation you can work through the process.

Give a man a fish he eats for a day. Teach a man to fish and he eats for life.

Posted 21-Jun-2010 by Jay

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: