www.dianthavanmarion.nl

Branding SharePoint

By Diantha van Marion

March 13th, 2010

Curious what you can do with an ID on the body element? You could change the layout depending on what site or subsite you are. I also used it to change some styling only when in edit mode. A very powerfull trick. Waldek Mastykarz wrote a nice article about it here.

February 2nd, 2010

Video’s of the SharePoint Connections 2010 available at http://channel9.msdn.com

Some examples of interesting video’s:



Or read more about:

July 24th, 2009

Fourth and final article is now online.

Thx to all who were involved!

http://sharepointmagazine.net/technical/development/sharepoints-branding-limitations-part-4

July 23rd, 2009

Part 3 about SharePoint’s branding limitations is now online. http://sharepointmagazine.net/technical/development/sharepoints-branding-limitations-part-3

Part 4 will follow tomorrow.

July 22nd, 2009

And part 2 of SharePoint’s branding limitations is also online now!

http://sharepointmagazine.net/technical/development/sharepoints-branding-limitations-part-2

July 22nd, 2009

TamTam is in the partner spotlight of sharepointmagazine.net.

Part
1 of 4 of SharePoint’s branding limitations
is now also online on sharepointmagazine.net.
Stay tuned, because part 2 is coming on today!

July 20th, 2009

http://sharepointmagazine.net

Stay Tuned, cause some very interesting SharePoint Branding articles will follow this
week!

July 17th, 2009

Always wondered how you could put some branding on SharePoint? What is possible, what isn’t?

Then keep your eye on www.sharepointmagazine.net,
because my four articles about SharePoint’s Branding Limitations will be published
next week!

February 12th, 2009

Reset the styling of the rollover of the items:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
    background-color:red;
}

Reset the styling of background of the item arrow:

.ms-topNavFlyOuts td{   

    background-color:white;
}

Reset the styling of the background of the items:

.ms-topNavFlyOuts{
    background-color:white;
}
To reset the arrow of the menuitems with a second niveau of items, see heathers blog:
http://heathersolomon.com/blog/archive/2009/02/09/Modifying-the-second-level-navigation-arrow-image.aspx

So, all together:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
    background-color:red;
}

.ms-topNavFlyOutsHover a:link,
.ms-topNavFlyOutsHover a:visited,
.ms-topNavFlyOutsHover a:hover{
    color:white !important;
}

.ms-topNavFlyOuts a:link,
.ms-topNavFlyOuts a:visited{
    color:red;
}

.ms-topNavFlyOuts td,
.ms-topNavFlyOuts{
    background-color:white;
}

The border that comes around the whole flyout area still has a blue border. This 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;
}

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:

div.zz1_TopNavigationMenu_0{
    border:1px red solid;
}

Do check the flyout menu on a listpage, and double check if the list header is not
visible on top the the flyout menu. if so, check
this blog post
.

That’s all folks!

January 30th, 2009

What are the possibilities of snippets? Can you export them? Can you put them in a repository? The meaning of making snippets is to easy reuse some code, but you want others to be able to use your snippets to, right?

Snippets are stored in a particular folder. Snippets can be copied from this folder
and shared as you can share any other file. Snippets from other sources can be copied
to that folder.

More info on http://msdn.microsoft.com/en-us/library/xhc38ksb(VS.80).aspx.

If the snippet is changed, every developer needs to get an update of that. And that
isn’t as easy as pressing get latest. No, the one editor needs to make a new export
and distribute it to the developers. A conclusion is that snippets aren’t mend to
be changed after spreading them. I can imagine, but on the other hand, I can imagine
that you would like to. A walk around for this could be to put the snippets in vault.
They can be edited in there and if a developer needs a particular snippet, he can
get the latest version. The working folder of vault should be the folder the Code
Snippet Manager is pointing to.

Can snippets be changed after creating them? Code snippets can be edited after creating
them. Press ctrl and enter to open the snippets list in SharePoint Designer. Choose
customize list. In this list you can select one of the snippets and choose modify.
That easy.  Are you interested in the default Code Snippets (c#),

take a look here: http://msdn.microsoft.com/en-us/library/z41h7fat(VS.80).aspx

and find a list of the names of the default snippets and what they do.

There’s a Code Snippets Manager, in where you can manage the directory snippets are
stored in. You can also import snippets to that directory. More information on the
Code Snippet Manager:

http://msdn.microsoft.com/en-us/library/9ybhaktf(VS.80).aspx

and http://msdn.microsoft.com/en-us/library/wy5tazc9(VS.80).aspx.

Here’s more information on the security considerations of snippets: http://msdn.microsoft.com/en-us/library/7839bk64(VS.80).aspx.

Here’s another reference schema, for xml code snippets: http://msdn.microsoft.com/en-us/library/ms171418.aspx.

To use snippets in visual studio you need an add-in, so you can create a code snippet
using right mouse clicking.

More info on the export as code snippet add-in for Visual Studio 2008: http://www.codeplex.com/ExportAsCodeSnippet/Release/ProjectReleases.aspx?ReleaseId=11816

and how it works:

http://www.codeplex.com/ExportAsCodeSnippet.