Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories


  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com
Loading
Here is some simple CSS code to add a button on your SharePoint page. The link has a class assigned to it so the default SharePoint styles won't control the appearance of the link text. This code does differ slightly than what you would do for a regular non-SharePoint web page.

One implementation of this code is to add it to a Content Editor Web Part to display custom nav on a SharePoint page. Modify the look and feel of it to make a custom set of links or subnav on the page.

Here is the code:

<STYLE>
.Button a:link, .Button a:visited, .Button a:hover {border: black solid; border-width: 1px; padding: 3px 5px; width: 130px}
.Button a.ButtonLink, .Button a.ButtonLink:link, .Button a.ButtonLink:visited {background: #339900; color: white; text-decoration: none}
.Button a.ButtonLink:hover {background: #99ff99; color: black; text-decoration: none}
</STYLE>

<DIV class=Button><A class=ButtonLink href="InsertLink">Button Text</A></DIV>

The code wouldn't play nice with the post, but the end result looks a lot like the buttons I use in the left nav bar of this site.

posted on Monday, September 12, 2005 8:48 AM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon

VIEW COURSE SCHEDULE