Custom Images and Top Navigation and MOSS 2007

Question

Hi,

I am redesigning the top navigation bar in our SharePoint site.  I'd like to see if it's possible to use images for the text in each tab as opposed to just basic text.  Basically I'd like to use a custom font for the text that appears on each tab but since end-users will not have this font I was thinking I could use image text for each tab.  Plus it looks a bit better I think.

Any way to do this?

-Westside

Answer 1

Sounds like you just need to change the CSS.

Here are the styles to change

http://www.heathersolomon.com/content/sp07cssreference.htm#TopNav

Answer 2

Hi,

Yes, through the CSS you can change the background and/or background-image but I'd like to have a different image for each tab.

-Westside

Answer 3

Ah gotcha... that should be able to be done as well. Download the IE Developer Toolbar, this will help you.

To get down to each individual tab, try modifying these ids:

#zz1_TopNavigationMenun0
#zz1_TopNavigationMenun1
#zz1_TopNavigationMenun2
.
.
.
.
.
.
Until you get them all... You'll probably have to get the a:hover and such on them as well. I haven't tried this, but that's where I'd start and hopefully it gets you in the right direction.

Answer 4

(Reason why self proposed as answer removed)

Any post that says "I haven't tried this, but that's where I'd start and hopefully it gets you in the right direction." is not an answer. At least not until the original poster comes back and says that it worked (at which point HE should Mark your post as an answer).

(Moderator)

---

WSS FAQ sites: http://wssv2faq.mindsharp.com and http://wssv3faq.mindsharp.com
Total list of WSS 3.0 / MOSS 2007 Books (including foreign language) http://wssv3faq.mindsharp.com/Lists/v3%20WSS%20FAQ/V%20Books.aspx

Answer 5

I will try this today and post back....

Thanks,

-Westside

Answer 6

Westside,

I have a blog post that describes how to add icons to your SharePoint navigation menus.  This same methodology can be used to achieve the effect you're going for.  Read more about it here:

http://www.thesug.org/Blogs/kyles/archive/2009/6/1/IconsinSharePointNavigationMenus.aspx

I hope this helps!
Kyle