Area template customizing
From: "Edward Lee"
Subject: Area template customizing
Date: Sun, 24 Jul 2005 22:17:18 -0500
Newsgroups: microsoft.public.sharepoint.portalserver
I've been trying to mess around with area templates based on the MSDN articles about "branding" a portal. I'm stuck on a few things...
How do I change the font color of text in the left vertical nav bar?
How about the font color in webpart title bars?
I'm no web developer, so the more detail the better.
You can see what I mean here:
http://www.ulgm-portal.org/
Thanks,
Ed Lee
Microsoft MVP - Sharepoint Portal Server
*************************************
From: "Richard Dudley" <rich@rjdudley.com>
Subject: Re: Area template customizing
Date: Mon, 25 Jul 2005 10:08:50 -0400
Newsgroups: microsoft.public.sharepoint.portalserver
The best way to do this is to create a cascading style sheet (CSS), and save it to c:\program files\common files\microsoft shared\web server extensions\60\template\layouts\1033\<portalname>.css. Then, open up your portal, and navigate Site Settings >> Change Portal Site Properties ... You'll see a section for Custom Cascading Style Sheet, and enter "/_layouts/1033/styles/<portalname>.css" (without the quotes. OK your way back to the portal home. Nothing should look any different at this point.
Which text in the left nav bar do you want to change? There are actually several styles used in the left nav bar, and some of the documentation is unclear (at best) or incorrect about which styles are used where (although the docs are correct for the left nav bar). For instance, the vertical text is actually a word art that you can edit in FrontPage, simply by opening the page at http://<portalname>/default.aspx.
For the other bits of text, you'll need to know a little about cascading style sheets (CSS). Plenty of good references on the web.
You can create a CSS in Notepad; it's not significantly easier in FrontPage, so use whatever you have. You can also use Visual Studio NET, but that's overkill for just a CSS. For the most part, every style you'll need to find is stored in SPS.css or OWS.css. Looking at these files is a painful way to get acquainted with CSS--they are a total clusterf**k. Some styles are defined in both files, so you'll need to check both as you're doing this.
To change the black headers that say "Topics" and "Actions", you want to edit the ms-navheader style found in sps.css. The default is
.ms-navheader
{
font-size: 8pt;
font-weight:bold;
font-family: Verdana, sans-serif;
text-align: left;
color: black;
background-image: url(/_layouts/images/dot_rule.gif);
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: 2px;
padding-top: 5px
}
You want to copy this entire style into your file. If you want the text to be blue instead of black, simply change the color element to 'blue'. Repeat as necessary. Save the file, and reload your portal--you should see the change.
The trickiest thing you're going to encounter is figuring out which style is used. I've found the View Partial Source IE plugin ( http://www.microsoft.com/windows/ie/previous/webaccess/webdevaccess.mspx ) to be invaluable when doing this. The list of styles is way to extensive to cover in a post like this--I count about a dozen just for that left nav. Start with the branding papers as to what style defines what page element, and find the styles in sps.css or ows.css. Copy them to your custom css file, and change the elements you need to.
That should get you started.
*************************************
From: <HeatherS@discussions.microsoft.com>
Subject: RE: Area template customizing
Date: Mon, 25 Jul 2005 10:53:11 -0700
Newsgroups: microsoft.public.sharepoint.portalserver
Unfortunately there are about 24 style rules that control the look and feel of the text in the left navigation. You can search for these styles in the SPS.css and OWS.css files, copy the rules out into your own CSS file, change the colors, then specify the alternate CSS through the portal settings or the ONET.xml file.
In SPS.css and OWS.css, search for class names that start with or contain the following text:
.ms-nav
.ms-location
.ms-pvnav
.ms-pvtb
.ms-selectednav
.ms-view
As for web part title bars, search for and modify these class names:
.ms-WPTitle
.ms-WPHeader
.ms-toolbar (for the toolbar on the expanded view of a web part)
I have an article on changing the web part title bar:
http://heathersolomon.com/blog/articles/207.aspx
--
- Heather S.