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!

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.

I tried to style the page layouts using the same HTML, and different styling, but had some trouble doing so. Therefore I created another piece of HTML for sketch B. I started my sketches and HTML with four-column-pages, and when the HTML and CSS looked fine I removed some of the columns. The page was build this way, so that removing one of the columns, the page will still look like it was supposed, even when there is more content in the columns.

So I tested the behavior of the columns by adding some lines of text into one of the
containers or columns. Previewing this in different browsers allows you to see what
will happen to the other containers and columns, when there is more content that somewhere
else. Does it wrap the line? Does it wrap it like a block, or does it shows the text
underneath the other columns?

    <div id=”Sketch_B”>

        Sketch B4

        <div id=”topcontainer”>header</div>

        <div id=”centercontainer”>

            <div class=”left
column”>B1</div>

            <div id=”centerrightcontainer”>

               
<div class=”secondleft column”>B2</div>

               
<div class=”secondright column”>B3</div>

               
<div class=”right column”>B4</div>

               
<div id=”bottomcontainer”>footer</div>

            </div>

            <div class=”clearboth”></div>

        </div>

    </div>

I removed some of the sketches I made, because I found them not as default as I thought
when making them. Basically, I came up with only two sketches, I posted before, that
should cover most of the page layouts. Of course the number of columns in these sketches
can vary; I still think that it’s the same sketch if they do. So much for the HTML
and CSS snippets for page layouts. I think this is a good foundation for expanding
the idea. Making more sketches of page layouts, and let them work as snippets.