MOSS2007, CSS and you, the Non-Developer – Part 2: the Quicklaunch
Guest Author: Jay Simcox
The SharePoint Mechanic
We’ll begin our little journey by changing the background colors of the quicklaunch menu and background column.
- Start by changing the top, left and right hand borders of the quicklaunch and the border at the bottom of the recycling bin.
- 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.
- Change the background colors of the Recycling Bin and the “View All Site Content” cells.
- 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.
- 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.
- Change the font color of the “View All Site Content”
- 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.
- 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.
- Now we’ll go back and take a look at the final version of our modified quicklaunch column.
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.
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.
Guest Author: Jay Simcox
The SharePoint Mechanic
Jay Simcox is a SharePoint Architect/Administrator currently disguised as a “Programmer III” for his current employer. Jay has been supporting and managing Microsoft technologies for 10 years with the focus of the last 7 years being SharePoint. With his background in end user training, support and network administration Jay focuses on finding those “no-code” solutions that all “Non-Developers” working with the SharePoint platform crave, developing and providing training for his end user community and sharing his knowledge with as many as he can.
- SharePoint 2007, CSS and you, the Non-Developer – the Intro
- MOSS2007, CSS and you, the Non-Developer – Part 2: the Quicklaunch
- MOSS2007, CSS and you, the Non-Developer – Part 3: the GlobalTitleArea
- MOSS2007, CSS and you, the Non-Developer – Part 4: the BodyArea
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
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!
Excellent Jay! I think I should read all the posts then!!!
Thanks!
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
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!
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?
[email protected]
Thanks!
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’
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.