Collabse Comment Field in Listview
You can collabse the command field of a list view webpart in the following way:
-
Open your page which contains the listview webpart (and the command field) in SharePoint designer
-
Right click the webpart (page is open in SharePoint designer) convert to XSLT Data View in SharePoint designer.
-
Save the page from SharePoint designer
-
Open the page in the browser
-
Choose WebPart properties >> XSL Editor
-
Locate the line: <Xsl:value-of .../> for the V3Comments field
-
Replace the line by:
-
<SharePoint:AppendOnlyHistory runat="server" ItemId="
{@ID}" FieldName="V3Comments" ControlMode="Display" />
-
Apply the changes
SharePoint 2010 Starter Masterpage Feature with Mega DropDown Navigation Menu
Last days I played around with Mega Drop Down Menu's. As you can read in Jakob Nielsens article this is "hot" nowadays. By doing some research I came to the Masterpage feature receiver of Mirjam van Olst and a blogpost of Guillaume Marty about Mega Drop Down menus. I put this into a starter masterpage, since this is often the start of (re)branding a site. The Publishing starter masterpage of Randy Risgill is always very helpfull for me (http://startermasterpages.codeplex.com).
I assembled some things into the next Proof of Concept: SharePoint 2010 Starter Masterpage Feature with Mega DropDown Navigation Menu on CodePlex http://sp2010.codeplex.com
At the moment the menu is static. In the next days I will make something more dynamic (you will not need to redeploy your solution for editing the menu content in that situation).
Update: 14 november 2010 --> change content of the Mega Drop Down Menu by a SharePoint List:
If you have any suggestions, feel free to contact me.
Hope this will help lot of people.
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).
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