(Only for SharePoint 2007 as SharePoint 2010 does not have bullets in Quick Launch!)
Sometimes it’s the little things…
I had a request where a site owner wanted to change just the bullet used in Quick Launch. They did not want to create a custom theme or do a complete rebranding of the entire site, just change the bullet.
So…
Create your new bullet image in your favorite paint program (JPG or GIF format) and upload it to a library in your site, or if you have server access to the Images folder in Layouts.
Use SharePoint Designer to edit the master page and add the CSS below just after these two lines:
<SharePoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
Or, if you want to do a quick test, instead of editing the master page add a Content Editor Web Part (CEWP), edit the CEWP, click the Source Editor button and paste the following.
<style>
table.ms-navitem td,span.ms-navitem {
background-image:url("/sites/training/Shared%20Documents/myBullet.gif");
}
</style>
The result (with a horrible bullet image!)
Hopefully you are a better artist than I am!
If you just want to hide the bullet then set background-image to none:
background-image:none;
.
4 comments:
Thanks Mike. This really helped me!
I have one question: Can I also use this method to change other elements of Quick Launch? I want to change the background color of the header item and nav item when I hover the mouse over them. I tried creating a style for table.ms-selectednavheader and table.ms-selectednav at the top of my masterpage, but it had no effect on my webpage. What am I doing wrong?
Thanks.
-tom
Tom,
You will need to include "a:hover" tag in your style definition. Just override the style patterns in the same way MS defined them in CORE.css:
.ms-navheader a,.ms-navheader2 a{
font-weight:bold;
color:#003399;
text-decoration:none;
}
.ms-navheader a:hover,.ms-navheader2 a:hover{
color:#000000;
text-decoration:underline;
}
.ms-navItem a{
color:#003399;
text-decoration:none;
}
.ms-navItem a:hover{
color:#000000;
text-decoration:underline;
}
So, to change the background color on mouse over:
.ms-navitem a:hover {
background-color:green;
}
If you want to override font size or border you would need to add "! important" to your style as these are hardcoded in the page HTML for the "A" tag:
style="border-style:none;font-size:1em;"
So to change font-size:
font-size:24px!important;
Mike
Ok, I've almost got it! I added the a:hover tags to the style, and now I can change the background colors, but only underneath the text of the navheading and navitem (the background color is not changing for the entire panel). Also, when I move the mouse from the heading I have chosen to the flyout menu items, I lose the background color change of the heading (I'd like it to stay set, so that users can clearly see which heading they are choosing from).
Thanks again Mike.
-tom
Tom,
> move the mouse from the heading ... I lose the background color change
Which is how CSS is supposed to work... :-(
I think you will need some JavaScript to do what you want. A mouseover event on the heading and a mouseout event on both the heading and the popout.
Sounds like an interesting JS or jQuery project...
Mike
Post a Comment
Note to spammers...
Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.