Styling the Title of WebParts
You can style the text of the header, by styling the .ms-WPTitle.
However be aware that some web part titles contain a hyperlink!! E.g. a hyperlink to the list if using a list WebPart. The little
arrow is also a link, and to style that you can style the <a>-tag
inside the <td>, and then overrule the styling for the header
text. Like this:
/*This styles every link in the header*/
.ms-WPHeader td a{
background-color:#000000;
}
/*This styles every textual link in the header*/
.ms-WPHeader .ms-WPTitle,
.ms-WPHeader .ms-WPTitle a:link,
.ms-WPHeader .ms-WPTitle a:visited{
color:#000000;
}
[/code]
Styling the border around a flyout
By using the CSS-Refence Chart of Heather Solomon (http://www.heathersolomon.com/content/sp07cssreference.htm#TopNav) you can easily style your flyouts. However you can't change the border of the fly-outs. After styling the flyouts you will notice that this border is still blue.
The reason is that the border that comes around the whole flyout area is set on the classname of the .zz1_TopNavigationMenu. Every
flyout menu has it's own classname, but in that classname is a
ID-number. You will never know which numbers will be used, since you do
not know how many menu items there are. For example:
.zz1_TopNavigationMenu_8 {Default.aspx (line 28)
background-color:#F2F3F4;
border:1px solid #A7B4CE;
}
[/code]
But
when you look closer, you see that beside this classname, every flyout
area has the same classname, that is zz1_TopNavigationMenu_0. So,
styling the
border of the flyout menu, will be done by changing the
border of this classname. Like this:
[code:html]
div.zz1_TopNavigationMenu_0{
border:1px #000000 solid; /* white border */}
Making DIV a Link - Javascript Vs CSS
If you want to turn a complete <div> into an hyperlink you have to write CSS classes voor the "a" and the "a:hover" class for that specific div. For example:
.mydiv a {
display:block;
width:100%;
height:100%;
text-decoration:none;
}
You can also reach this goal by using Javascript. This is faster but remember some people disable Javascript in the browser. In that case people won't see the div link.
<div class="mydiv" onclick="location.href='http://www.sharepointdevelopment.nl;" style="cursor:pointer;"> </div>
Javascript Logic based on Url
It could be necessary to add some Javascript Logic in your masterpage. For example you could load an image dynamically based on the url. The advantage is you don't have to build N masterpages but also have the freedom to use two (or more) different images for a masterpage.
<script language="javascript" type="text/javascript">
var query = document.location.href;
if(query.indexOf("/en/") == -1 ) //if url not contains an index for "/en/" then
{
// <img src image header 1
}
else // it contains "/en/"
{
// <img src image header 2
}
</script>
[/code]
Note: You can also use this logic for other decissions based on the Url String (other than switching images).
Log Exceptions to Default SharePoint LogFile
It's possible to log exceptions using the next codesnippet (MOSS Only). Advantage: exceptions are logged to a single file (i.e. in the 12 hive under the LOGS directory). No extra dll’s are needed to be installed. The only limitation to using the MOSS logger is that you cannot set the log event level e.g. critical, high, medium, low it will always display the error level as high.
catch(Exception myException)
{
Microsoft.Office.Server.Diagnostics.PortalLog.LogString(”Exception
Occurred: {0} || {1}”, myException.Message, myException.StackTrace);
}
The MOSS logger is located in the Microsoft.Office.Server.dll and therefore it is only available with the MOSS install, not WSS 3.0. For more control and flexibility use the Enterprise library logger.
CSS Stylesheet Reference for SharePoint
I'm wondering that a lot of people don't know the briliant work of Heather
Solomon and her great Style Sheet Reference. This reference is a must-have for
people working on SharePoint branding.
CSS Style Sheet Reference by Heather Solomon
Setting a custom masterpage and css using a feature without invalid cast exception
A lot of people have problems casting the SPSite to SPWeb, they are trying to do something like: SPWeb CurrentWeb = (SPWeb)properties.Feature.Parent. By trying this you get a invalid cast exception. Some people are trying to do it in one step and get a nullreference to the object. In the next lines you can find the right way to set a custom masterpage and css using a feature.
[code:c#]
// Don't forget to inherit your class from SPFeatureReceiver!
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
using (SPSite CurrentSite = properties.Feature.Parent as SPSite)
{
if (CurrentSite != null)
{
SPWeb CurrentWeb = CurrentSite.RootWeb;
CurrentWeb.MasterUrl = "/_catalogs/masterpage/custom.master";
CurrentWeb.CustomMasterUrl = "/_catalogs/masterpage/custom.master";
//In a publishing site the css is saved in the Style Library
CurrentWeb.AlternateCssUrl = "/Style Library/custom.css";
CurrentWeb.Update();
}
}
}
// Set it back to default
public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
using (SPSite CurrentSite = properties.Feature.Parent as SPSite)
{
if (CurrentSite != null)
{
SPWeb CurrentWeb = CurrentSite.RootWeb;
CurrentWeb.MasterUrl = "/_catalogs/masterpage/default.master";
CurrentWeb.CustomMasterUrl = "/_catalogs/masterpage/default.master";
CurrentWeb.AlternateCssUrl = "";
CurrentWeb.Update();
}
}
}
[/code]
Meazure and IE Dev Toolbar make your CSS life easier
Today I got this cool link from some SharePoint desingers:
"What are the dimensions of that image? How big is this window? Does this
layout fit on an NTSC display? What color are these pixels? What does this icon
look like close up? How can I capture an arbitrary portion of the screen? These
are just a few of the questions that kept coming up as I developed applications
and web pages. Various tools are available to answer some of these questions but
I could not find any that answered them all or that had a usable interface. So I
created Meazure, a program that measures, magnifies and captures the screen by
providing a battery of features in a cohesive user interface. Even better,
Meazure is free!"
Apply custom masterpage globally by a Feature
Becky Bertram wrote a nice post about applying a custom masterpage globally by a Feature. The full explanation and code could be found on her blog. The functions for Feature activating and deactivating are well written.
Read Becky's Post