Here is the VM I downloaded from Microsoft: 2010 Information Worker Demonstration and Evaluation Virtual Machine (RTM):

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en

After trying the site http://intranet.contoso.com in the Demo2010A machines internet browser and getting a Page cannot be displayed error, I checked my app pools, IIS web site, central admin (which worked on http://demo2010a:2010 btw), alternate access mappings, and DNS.

I noticed some funny settings with my vm’s DNS manager on Demo2010A machine.

The IP’s I was seeing were 192.168.150.0 and 192.168.150.1, which I am on the 10.6.0.x network, so this was alarming to me.

I called over our new IT guy and put him to work, explaining that I can access one of the applications by hostname (http://demo2010a:2010), but all of the alternate access mappings and DNS entries were not working.

After some troubleshooting and changing the DNS entry for demo2010a and demo2010b (SEE PICTURE ABOVE) to 10.6.0.164 and 10.6.0.169 (The new 10.6.0.x IP’s were the IPs machines were both assigned from TCIP set to automatic).

After I modified the DNS, I did a Command prompt ipconfig /flushdns

Following this,my coworker set the DNS under TCP/IP v4 to the IP of demo2010a machine (the dns server- 10.6.0.169).

The issue was that the DNS server was inheriting from my companys DNS on the same 10.6.0.x network, instead of the contoso DNS entries on demo2010a machine.

After setting Demo2010A and Demo2010B’s DNS to the local IP of demo2010a (10.6.0.169), this fixed the site. I can now access http://intranet.contoso.com from the demo2010a machine. I CANNOT access this on any computer who’s DNS is not set to 10.6.0.169, as the DNS automatically obtains my company’s DNS server and settings.

Basically, I took CoreV4.css located in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable and copied it locally, then attached it to my SharePoint page.

Figure 1- Copy the original CoreV4 from the backend to a local temporary drive to modify. Lcoation: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable

Save the copy to your SharePoint site in the Style Library or where you desire.

Open V4.master and add your CSS reference:

Find in V4.master at top:

<SharePoint:CssLink runat=”server” Version=”4″/>

<SharePoint:Theme runat=”server”/>

Add the following AFTER the above tags:

<!–custom add themes and css –>

<SharePoint:CssRegistration runat=”server” name=”<% $SPUrl:~sitecollection/Style Library/ClientName/CSS/style1.css %>” After=”corev4.css”/>

<SharePoint:CssRegistration name=”/Style Library/en-us/Themable/style.css” After=”corev4.css” runat=”server”/>

Change your paths to match. I have two tags, the first is for CSS, and the second is for Themable CSS files using themable comments.

Once your file (copy of Corev4.css named Style or Style1.css) is in place, we can begin modifying it.

Themes:

Themes in SharePoint 2010 are pretty tough. There are about 60 permutations, and you can only define about 10 of those colors.

Heres the table:

Figure 2- You have seen this grid before from the Site Settings > Look and Feel > Themes page. The OOTB one has colors applied to each square. This image maps to the Themes page so you get an idea of what each color is called.

The colors you can define in themes are:

1. Dark 1
   
2. Light 2
   
3. Dark 2
   
4. Accent 1
   
5. Accent 2
   
6. Accent 3
   
7. Accent 4
   
8. Accent 5
   
9. Accent 6
   
10. non visited link
    
11. visited link
    

The rest are generated from those that you define. This includes gradient images (they use transparent PNG overlays, big plus in my book) and a lot of other images used in SharePoint.

I put together an Excel of OOTB CoreV4.css

This Excel shows all the Theme Permutations, what CSS selector in CoreV4.css uses that Theme permutation, the CSS Selector and code itself, and a guide to whether it’s a Background attribute, Color attribute, or Border attribute defined in that selector.

Download from blog: http://ericschrader.files.wordpress.com/2011/08/corev4-styles-calculated-no-errors_blog-export.xlsx

This is not used to modify the code (but it could be, just copy the PARSED CSS columns and paste it to a CSS file), but more as a guide to how CoreV4.css works.

The Green shows a match, eg. Which theme color matches to what CoreV4.css selector, and even a possible attribute. If its red, that theme or attribute was not a match in that selector. So if a theme permutation is red, then that theme color is not in that CSS tag. Pretty handy to get an idea whats in this file.

The numbers inside the green are just what position the theme permutation is found, eg. Hyperlink = 88 green just means that the word Hyperlink is found in that particular CSS selector at character 88. They can be ignored, but my Excel skills are lacking in that department

Each row is a selector from CoreV4.css.

Each of the first 60 columns is a theme permutation, and each cell that is green is a match of that theme permutation in that selectors CSS attributes value.

The column after that, I totalled how many theme permutations in that row are for that selector (some have up to I think 5 theme permutations in a single selector!)

Then the next few columns are the CSS selector, bracket, attributes/values, then closing CSS bracket. This can be copied and pasted into a CSS file if you want, just like CoreV4.css. NOTE: I may have mis-formatted some of the CoreV4.css, so just let me know if you find a typo/bad replacement and I will recheck it).  Note also that I parsed out all themable selectors only for this Excel. My rule to parse was any selector with a comment in the attributes section. CoreV4.css is not the only file, SharePoint has a few more, but this is the big momma of CSS files.

The next columns are some rough CSS attibutes, Background (image or Color), Color (for fonts, etc), and Border (color, size, width, etc)

Thats pretty much the Excel. Just a visual display of this bad boy. Notice how line 469 of my Excel has 0 number of times for a theme found. This is because they did not replace a token in their CSS, /* [ReplaceColor(V4_THEMING_COLOR_DAR2)] */;color: #3b4f65; So I figure if this Excel can catch this, it must be pretty useful.

This gives you an idea for how much themes are used in SharePoint, and how you can modify pretty much everything using your own theme.

I ended up breaking out CoreV4.css into to parts:

1. Uses themable CSS comments
2. Does not use themable CSS comments

The themable CSS I moved to a file in the Style Library/en-us/themable directory.

The Non-themable CSS I keep just in the Style Library a few folders down.

When a theme is applied, my themable CSS is applied. When my Non-themable CSS is modified, the changes are reflected instantly on the site.

This allows me to make changes to normal CSS without have to re-apply my theme to the entire site for my changes to show.

Here is a recent project I did, here is the Themable CSS: (must have file checked in, published, and apply another theme, then the theme for the changes to be seen, its pretty crazy… Good luck, once you get it, its easy)

My Themable CSS: (Style Library\en-us\Themable\Style.css)

.pageTitle {

    /* [ReplaceColor(themeColor:"Accent2")] */    color: #8A2A1C;

    /* [ReplaceColor(themeColor:"Accent1")] */    border-bottom: 1px #343434 dashed;

}

.bottomFooter, .bottomFooter a, .bottomFooter a:active, .bottomFooter a:hover, .bottomFooter a:visited {

    /* [ReplaceColor(themeColor:"Accent6")] */    color: #FFFFFF;

}

.rightsidefixed {

    /* [ReplaceColor(themeColor:"Accent5")] */    background-color:#e5dbc2

}

.s4-toplinks a.dynamic, .s4-toplinks a.dynamic:active, .s4-toplinks a.dynamic:hover, .s4-toplinks a.dynamic:link, .s4-toplinks a.dynamic:visited {

    /* [ReplaceColor(themeColor:"Accent2")] */    color: #8A2A1C;

}

.ms-navitem A {

    /* [ReplaceColor(themeColor:"Accent6")] */    color: #FFFFFF !important;

}

#s4-mainarea {

    /* [ReplaceColor(themeColor:"Light2")] */    border: 6px #EDE8E2 solid;

    /* [ReplaceColor(themeColor:"Light2")] */    background-color: #EDE8E2;

}

.containerBackground {

    /* [ReplaceColor(themeColor:"Light2")] */    background-color: #EDE8E2;

}

body #s4-workspace {

    /* [ReplaceColor(themeColor:"Accent2")] */    background-color: #8A281C;

}

body .s4-toplinks {

    /* [RecolorImage(themeColor:"Accent2")] */    background: url(“/_layouts/images/selbg.png”) repeat-x left top;

    /* [ReplaceColor(themeColor:"Accent2")] */    background-color: #f6f6f6;

    /* [ReplaceColor(themeColor:"Light2")] */    border: 5px solid #ede8e2;

}

.s4-tn li.static > .menu-item, .s4-tn li.static > .menu-item:active, .s4-tn li.static > .menu-item:hover, .s4-tn li.static > .menu-item:link, .s4-tn li.static > .menu-item:visited {

    /* [ReplaceColor(themeColor:"Light1")] */    color: #3b4f65;

}

.s4-toplinks .s4-tn a.selected, .s4-toplinks .s4-tn a.selected:active, .s4-toplinks .s4-tn a.selected:hover, .s4-toplinks .s4-tn a.selected:link, .s4-toplinks .s4-tn a.selected:visited {

    /* [ReplaceColor(themeColor:"Light2")] */    border-color: #91cdf2;

    /* [RecolorImage(themeColor:"Light2")] */    background: url(“/_layouts/images/selbg.png”) repeat-x left top;

    /* [ReplaceColor(themeColor:"Light2")] */    background-color: #ccebff;

    /* [ReplaceColor(themeColor:"Accent2")] */    color: #003759;

}

#s4-leftpanel, #s4-leftpanel a, #s4-leftpanel a:active, #s4-leftpanel a:hover, #s4-leftpanel a:link, #s4-leftpanel a:visited, #s4-leftpanel .ms-vb {

    /* [ReplaceColor(themeColor:"Light1")] */    color:#FFFFFF

}

#s4-leftpanel #DatePickerDiv, #s4-leftpanel #DatePickerDiv a, #s4-leftpanel #DatePickerDiv a:active, #s4-leftpanel #DatePickerDiv a:hover, #s4-leftpanel #DatePickerDiv a:link, #s4-leftpanel #DatePickerDiv a:visited, #s4-leftpanel #DatePickerDiv .ms-vb {

    /* [ReplaceColor(themeColor:"Dark1")] */    color:#343434

}

body #s4-leftpanel {

    /* [ReplaceColor(themeColor:"Accent3")] */    background-color: #567F1A;

    /* [ReplaceColor(themeColor:"Light1")] */    color:#FFFFFF

}

body #s4-leftpanel-content {

    /* [ReplaceColor(themeColor:"Light2-Lightest")] */    border: 1px solid #dbddde;

}

.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {

    /* [ReplaceColor(themeColor:"Light1")] */    color: #FFFFFF;

}

.s4-ql ul.root ul > li > a {

    /* [ReplaceColor(themeColor:"Light1")] */    color: #FFFFFF;

}

.s4-ql ul.root ul > li > a:hover {

    /* [ReplaceColor(themeColor:"Light1")] */    color: #FFFFFF;

}

.s4-ql a.selected {

    /* [ReplaceColor(themeColor:"Accent4")] */    background-color: #345208;

    /* [ReplaceColor(themeColor:"Light2-Lighter")] */    border-top-color: #c6e5f8 !important;

    /* [ReplaceColor(themeColor:"Light2")] */    color: #FFFFFF !important;

}

.s4-specialNavLinkList a {

    display: block;

    padding: 3px 4px 3px 10px;

}

.s4-specialNavLinkList a {

    /* [ReplaceColor(themeColor:"Light2")] */    color: #3b4f65;

}

.ms-rteStyle-ContentHeader {

-ms-name:”Content Header”;

    /* [ReplaceColor(themeColor:"Accent2")] */    background-color: #841019;

    /* [ReplaceColor(themeColor:"Light1")] */    color: #FFFFFF;

    font-size:10pt;

    font-weight:bold;

    padding:4px 4px 5px 5px;

    border-top:5px #EDE8E2 solid;

    margin:0px;

    border-bottom:5px #FFFFFF solid;

}

.ms-rteStyle-ContentBackground {

    -ms-name:”Content Background”;

    background-color:#fff;

    margin:0px;

    padding:6px 10px;

}

.ms-WPHeader {

    /* [ReplaceColor(themeColor:"Accent2")] */    background-color: #841019;

    /* [ReplaceColor(themeColor:"Light1")] */    color: #FFFFFF;

}

.ms-WPTitle, .ms-WPTitle a, .ms-WPTitle a:active, .ms-WPTitle a:hover, .ms-WPTitle a:link, .ms-WPTitle a:visited {

    /* [ReplaceColor(themeColor:"Light1")] */ color: #FFFFFF;

}

.s4-wpActive .ms-WPTitle, .s4-wpActive .ms-WPTitle a {

    /* [ReplaceColor(themeColor:"Light1")] */ color: #FFFFFF;

}

My recent adjacent Style1.css file (Style Library\ClientName\CSS\Style1.css)

/*shell- under construction*/

body #s4-bodyContainer {

    margin: 0 3%;

    min-width: 935px;

/*no height in ie7, ie8, for firefox set height to 100%*/

}

body #s4-titlerow {

    border-left: 13px transparent solid;

}

/*modal shell – after shell*/

.ms-dialog body #s4-bodyContainer {

    margin: 0;/*remove red background margin from popup*/

    min-width: inherit;

}

.ms-dialog #s4-mainarea {

    border: 0px transparent solid; /* remove borders around content of popup*/

}

.ms-dialog .bottomFooter {

    display:none /* hide footer*/

}

/*shell*/

div.s4-pr {

    border-right: 0px transparent none;

}

/*BG Logos*/

#s4-workspace > div {

    background-image: url(‘../Images/bg_gradient.png’);

    background-repeat: repeat-y;

    background-position: -20px top;

}

#s4-workspace {

    background-image: url(‘../Images/PowayBuilding.png’);

    background-repeat: no-repeat;

    background-position: -20px top;

    background-attachment: scroll;

}

/*Header styling*/

.ms-siteactionsmenu > SPAN > SPAN > A {

    color:#FFFFFF

}

.s4-titletext {

    padding-bottom: 0px;

}

.s4-titletext {

    vertical-align: bottom;

}

table.s4-wpTopTable {

    margin-right: 4px;

}

.s4-help {

    margin-left: 4px;

}

/* Top Nav */

.s4-title {

    overflow: visible;

}

body #s4-topheader2 {

    border: 0px transparent none;

}

.s4-tn LI.dynamic > .menu-item:visited {

    font-weight: bold;

}

.s4-tn LI.dynamic > .menu-item:hover {

    font-weight: bold;

}

.s4-tn LI.dynamic > .menu-item:active {

    font-weight: bold;

}

.s4-tn LI.dynamic > .menu-item:link {

    font-weight: bold;

}

.s4-tn LI.dynamic > .menu-item {

    font-weight: bold;

}

.s4-tn ul.dynamic {

    padding: 5px;

    border-bottom: 1px #CFAEA4 solid;

}

.s4-tn a:visited {

    font-weight: bold;

}

.s4-tn a:link {

    font-weight: bold;

}

.s4-tn a:hover {

    font-weight: bold;

}

.s4-tn a:active {

    font-weight: bold;

}

.s4-tn a {

    font-weight: bold;

}

.menu-horizontal {

    padding: 0px;

    border: 0px;

    margin: 0px;

    border-spacing: 0px;

}

body .s4-toplinks {

    border-bottom: 0px solid transparent;

}

.s4-toplinks .s4-tn a.selected, .s4-toplinks .s4-tn a.selected:active, .s4-toplinks .s4-tn a.selected:hover, .s4-toplinks .s4-tn a.selected:link, .s4-toplinks .s4-tn a.selected:visited {

    padding: 4px 10px 6px 10px;

    margin: 0px 10px;

    border: 0;

}

/*breadcrumbs*/

.s4-title H1 A, .s4-title H2 A {

    display: inline;

}

.breadcrumbs {

    min-height: inherit;

    min-height: 10px;

}

.breadcrumbs h2 {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs a:link {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs a:visited {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs a:hover {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs a:active {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs a {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

.breadcrumbs {

    font-size: 10px;

    text-decoration: none;

    padding-bottom: 1px;

}

/*Left nav */

.ms-quicklaunchouter {

    width:100% /* Fixes minimum width in quick launch */

}

.leftnavtop, .ms-quicklaunchouter {

    float: left;

}

body #s4-leftpanel {

    width: 170px; /* make sure you set the margin-left on MSO_ContentTable to this number*/

}

/*left navigation indent first level */

#s4-leftpanel-content ul.root > li.static > a.static {

    border-bottom: 1px solid #ffffff;

    font-weight: bold;

}

/* left navigation indent second level*/

#s4-leftpanel-content ul.root > li.static > ul.static {

    padding-left: 20px;

    margin-left: -10px;

}

/* left navigation indent third level */

#s4-leftpanel-content ul.root > li.static > ul.static > li.static > ul.static {

    padding-left: 20px;

    margin-left: -10px;

/* left navigation indent fourth level*/

}

#s4-leftpanel-content ul.root > li.static > ul.static > li.static > ul.static > li.static > ul.static {

    padding-left: 30px;

    margin-left: -10px;

}

.s4-ql UL.root UL {

    margin: 0px;

}

.ms-quickLaunch {

    padding: 0px;

}

body #s4-leftpanel-content {

    padding: 0px 0px 5px;

    background-color: transparent;

    border-top-width: 0px;

    border-right-width: 0px;

    border-bottom-width: 0px;

    border-left-width: 0px;

}

.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {

    font-size: 1.2em;

    margin: 0px;

    padding: 3px 4px 3px 10px;

    border-width: 1px 0px;

    border-style: solid;

    border-color: transparent;

    word-wrap: break-word;

    overflow-x: hidden;

}

.s4-ql ul.root ul > li > a {

    padding: 3px 4px 4px 10px;

    border-width: 1px 0px;

    border-style: solid;

    border-color: transparent;

    overflow-x: hidden;

    display: block;

    zoom: 1;

}

.s4-ql ul.root ul > li > a:hover {

    text-decoration: underline;

}

.s4-ql a.selected {

    background: url(“/_layouts/images/selbg.png”) repeat-x left top;

    border-width: 0px !important;

    padding-left: 9px !important;

}

/*content styling*/

#MSO_ContentTable {

    margin-left: 175px; /* Set s4-leftpanel width to equal or less than this*/;

    background-color: #EDE8E2; /*sets main area background color */

}

.contentCenterRegion {

    vertical-align: top;

}

ul.ms-rteStyle-ContentBackground, ol.ms-rteStyle-ContentBackground {

    list-style-position: inside; /*fix for rtf bullet points being to far to the left, also ordered lists */

}

.rightsidefixed {

    width: 250px; /* sets right layout zone width*/;

    vertical-align: top;

}

div.s4-title {

    background: transparent;

    background-color: transparent;

}

.ms-WPHeader {

    border-bottom: 5px #FFFFFF solid;

}

.ms-WPHeader TD {

    border-bottom: transparent 0px none !important;

    border-right: transparent 0px none !important;

    border-top: transparent 0px none !important;

    border-left: transparent 0px none !important;

}

.s4-wpTopTable, .s4-wpActive, .ms-settingsframe {

    background-color: #FFFFFF; /*make web part backgrounds white, even in edit mode*/;

}

.ms-rte-wpbox {

    margin-bottom: 8px; /*add spacing below each webpart*/

}

.floatleft {

    float: left;

}

.floatright {

    float: right;

}

.pageTitle {

    font-size: 20px;

    font-weight: bold;

    margin: 0px;

    padding: 0px;

    width: 80%;

    padding-top: 0px;

    margin-left: 10px;

    letter-spacing: 1px;

}

.ms-WPTitle {

    font-weight: bold;

}

/* Style right side web parts */

.rightSide #MSOZoneCell_WebPartWPQ20 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ19 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ18 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ17 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ16 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ15 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ14 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ13 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ12 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ11 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ10 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ9 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ8 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ7 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ6 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ5 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ4 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ3 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ2 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide #MSOZoneCell_WebPartWPQ1 {

    background-color: #fff;

    border: 5px #EDE8E2 solid;

}

.rightSide .ms-WPBody {

    padding: 10px;

}

/*News Webpart*/

.NewsArea {

    padding: 5px;

}

.NewsDate {

    padding-bottom: 5px;

}

/*user presence icon*/

.ms-imnlink img {

    border: 0px;

}

/*user description*/

div.description {

    padding-left: 17px;

}

/*footer styling*/

.bottomFooter {

    min-height: 44px;

    padding-top: 16px;

    padding-left: 4px;

    padding-right: 4px;

    clear: both;

}

.footerlinks {

    word-spacing: 4px;

    padding-bottom: 4px;

    line-height: 14px;

}

That’s it, let me know if you have questions and I can get more detail/instructions on any part.

For more on how to work with CoreV4.css and create your own CSS, see my other blog post from today.

Here is the concept:

Your SharePoint page will have 2 stylesheets on it, CoreV4.css and a new blank file, Custom.css. Custom.css will have the exact contents of CoreV4.css, but be attached AFTER coreV4.css so it overwrites the original. This will allow you to modify Custom.css (a copy of CoreV4.css) directly from the SharePoint Designer or the browser. You can use IE Developer Toolbar or Firebug to get the selectors SharePoint 2010 uses OOTB, search for that selector in Custom.css, modify it, then save and test. Repeat for each change.

Once complete, you will have CoreV4.css (original) and Custom.css, both two very large files.

This next step is optional, but highly recommended for Production. Take CoreV4.css, format the CSS so the selectors are each on their own line, along with their attributes all on the same line. This way you only have each line starting with the selector.

Figure 1- Copy the original CoreV4 from the backend to a local temporary drive to modify. Lcoation: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable

Once Copied locally, you can open it in Microsoft Expression Web:

You should see:

From here, we need to Reformat the CSS to have each selector on its own line, eg:

Here is how we do it:

In Expression Web, go to Tools> Page Editor Options

Click on the Code Formatting Tab

We will modify these formatting rules to put each selector on one line.

Under the bottom CSS section, modify the following:

Figure 2- No changes to Selector

Figure 3- Change Lines After from 1 to 0

Figure 4- Property Name- No Changes

Figure 5-Proptery Value change Lines after from 1 to 0

Figure 6- Closing Brace change Lines Before from 1 to 0, HIT OK

Now we can format our CoreV4.css copy to have each selector on its own line:

Figure 7- Right click on CoreV4.css in the Code view and go to Reformat CSS (Note, the file extention is .css)

Your CSS should all be on one line:

Repeat the same steps for Custom.css (figure 7 and 8 above) (the copy of CoreV4.css you have been modifying. Once Custom.css looks like above, but with your changes, we can compare the two files and extract only the changed lines as an overwritter CSS file for Corev4.css )

I use Beyond Compare for this next step to compare the changes. You can use any tool that allows you to compare two text files and ONLY VIEW DIFFERENCES, and ALLOWS YOU TO EXTACT (copy and paste) OUT ONLY THE CHANGED LINES!

In Beyond Compare, do a new TEXT compare:

Figure 8- Click Text Compare from the button

Copy CoreV4.css

Paste on the left of the text compare:

Figure 9- Paste on left

Copy Custom.css, (MAKE SURE ITS FORMATTED THE SAME AS COREv4.css, ALL SELECTORS ON OWN LINE)

Paste on the right side (MAKE SURE YOU ARE ON THE FIRST LINE, SCROLL TO THE TOP BEFORE YOU PASTE!) of the text compare:

Now apply a filter to the comparison to only show changes:

Figure 10-Click Show Differences from the top bar.

Figure 11- Uncheck Show Context (one with the up and down arrows and the red line)

Copy out the code on the right side with Select all, then Copy it.

Now you can paste this code over your Custom.css file to only have the CSS Overwritters

.ms-SPLink {font-family: ‘Arial’,'Lucida Grande’,Verdana,Arial,sans-serif; font-size: 0.8em; /* [ReplaceColor(themeColor:"Accent3-Darker")] */; color: #1A70B9;}

.ms-SPLink a:link, .ms-SPLink a:visited {/* [ReplaceColor(themeColor:"Accent3-Darker")] */ color: #000000; text-decoration: none;}

My code, I changed the Font to Arial and the font color to #000000. No need for an entire duplicate of CoreV4.css in my Custom.css, just need the overwriting different CSS.

Note, this file contains Themable CSS comments. For my code changes to be applied, The CSS must be embeded to my masterpage using the following tag in the header, after the other CSS Theme tags.

<SharePoint:CssRegistration name=”/Style Library/en-us/Themable/style.css” After=”corev4.css” runat=”server”/>

 Then make sure you SAVE, Check in and publish/approve this CSS file. THEN apply a different theme, then apply back the desired theme. You CSS will now be visible. NOTE: apply themes to all subsites if you want the CSS to be visible during these steps.

Only do this at Export, as you want to have Custom.css a complete copy of Corev4.css during Development.

Hope this helps!

For more on modifying CoreV4.css, see my other blog post from today.

Requirements:

• SharePoint MOSS 2007
• Must be using a Publishing Site

This post will create the SharePoint Current Navigation control that only shows the 2^nd level site when browsing, and supports highlighting. The datasource comes from SharePoint as well, so everything is security trimmed, and editable in the browser.

This post is for users who are using SharePoint MOSS 2007 navigation on their website. If you want your current navigation to display the sites and pages under a subsite, but always keep the second level subsite on top, then this post is for you. It’s hard to explain, so reference the screenshot below:

Figure 1 – Our Firm is a subsite under the root of the website. Even if I navigate to Board of Directors above, Our Firm remains at the top of the Current Navigation.

Sitemap data for my screenshot above:

• Company
  • Our Firm
    • Leadership
      • Management Team
      • Board of Directors
    • Contact Us
    • Locations
  • Investment Banking
  • Sales & Training
  • Research

Sitemap levels:

• Top Level (root)
  • Second Level site
    • Third Level Site
      • Fourth Level site
      • Fourth Level site
    • Third Level Site
    • Third Level Site
  • Second Level site
  • Second Level site
  • Second Level site

The key is that I want only each second level navigation block to appear when a user is anywhere on or under that second level site. So in my screenshot, you see Our Firm, even if you navigate to Board of Directors.

This navigation also supports highlighting and pages.

Preparing the subsite (our Firm)

• Check Show Subsites and Show Pages
• Under Current Navigation, select Display current, below, and siblings. (the middle radio button)

Now you need to adjust your current navigation code in the MASTERPAGE to only show the site you are under.

Adjusting the masterpage Current Navigation

Find your PlaceHolderLeftNavBar and replace the contents with this, or you can just mimic it. Take note of the highlighted parts. These are important for this post.

Placeholders are content buckets in your masterpages, the content inside them is what is important. Just make sure you don’t have multiple of the same ID’s on the same masterpage.

Here is the code:

<asp:ContentPlaceHolder id=”PlaceHolderLeftNavBar” runat=”server”>

    <!– Current Navigation –>

    <!– Current Navigation –>

    <SharePoint:AspMenu ID=”CurrentNav” runat=”server” datasourceID=”SiteMapDS” orientation=”Vertical”

    StaticDisplayLevels=”4″ MaximumDynamicDisplayLevels=”1″ StaticSubMenuIndent=”1″ ItemWrap=”true”

    AccessKey=”3″ CssClass=”leftNav” SkipLinkText=”<%$Resources:cms,masterpages_skiplinktext%>”>

        <StaticHoverStyle CssClass=”LeftStaticHover” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <StaticSelectedStyle CssClass=”LeftStaticSelected” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <DynamicMenuStyle CssClass=”LeftDynamicMenu” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <DynamicMenuItemStyle CssClass=”LeftDynamicMenuItem” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

            <LevelMenuItemStyles>

                <asp:menuitemstyle CssClass=”parent” Font-Underline=”False” />

                <asp:menuitemstyle CssClass=”child” Font-Underline=”False” />

                <asp:menuitemstyle CssClass=”leftNav3″ Font-Underline=”False” />

                <asp:menuitemstyle CssClass=”leftNav4″ Font-Underline=”False” />

                <asp:menuitemstyle CssClass=”leftNav5″ Font-Underline=”False” />

            </LevelMenuItemStyles>

        <StaticMenuStyle CssClass=”LeftStaticMenu” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <DynamicSelectedStyle CssClass=”LeftDynamicSelected” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <StaticMenuItemStyle CssClass=”LeftStaticMenuItem” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False” />

        <DynamicHoverStyle CssClass=”LeftDynamicHover” Font-Bold=”False” Font-Italic=”False” Font-Overline=”False” Font-Strikeout=”False” Font-Underline=”False”/>

    </SharePoint:AspMenu>

    <PublishingNavigation:PortalSiteMapDataSource ID=”SiteMapDS” Runat=”server”

    SiteMapProvider=”CombinedNavSiteMapProvider“

    StartFromCurrentNode=”True”

    StartingNodeOffset=”1″ TrimNonCurrentTypes=”Page”/>

</asp:ContentPlaceHolder>

Here is an explanation of the above code:

Datasource properties

See this same table (and ALL OTHER PROPERTIES!) here: http://msdn.microsoft.com/en-us/library/bb897657.aspx

Basically, just play around with the code. You can learn a lot just modifying the above properties. I basically wanted this blog post to show a neat configuration of SharePoint navigation

Good luck!

<style>

.menuItemLvl2 {

Padding-left: 24px;

}

</style>

<div><a class=menuItemLvl2 href=#>Restructuring & Recapitalization</a></div>

I wanted the hyperlink a tag to wrap and respect the padding. I also had highlighting on the A hyperlink tag for :hover state, so I coudnt use Margin-left:24px.

I applied the following CSS to fix my issue: ( I only add the green highlighted text to the above code)

<style>

.menuItemLvl2 {

Padding-left: 24px;

Float:left;

Width:200px; /* Note: you cannot use 100%, as the padding pushes the element out of its container that has a width of 224px. Use container width minus padding of this element*/

}

</style>

<div><a class=menuItemLvl2 href=#>Restructuring & Recapitalization</a></div>

And on hover: (note, I did not include the code for a:hover in this example, but just set the background-color: #666666 or whatever color)

Works in Firefox and IE7.

Here is a rough idea how the default Layout is constructed.

Figure 1- The above is a default Multi-item XSLT Data View web part template without paging (Display all items). Notice how there is a Table Row (TR) for each data row.

Normally, in the past, I did not want my data to be separated in its own table row (TR). I wanted my data to be separated with a line break, or all on the same line, or all in the same row. I would change the layout.

The problem with this is, after multiple re-saving of the ASPX page in SharePoint Designer, the page begins to auto insert generated code into the page or DataView web part. This causes the web part to break and you can lose your template.

The workaround:

Instead of changing your layout, try to work with the existing layout. That’s it!

Here is a diagram of what I wanted:

Figure 2- Basically, it’s the same template as above. I removed the TH text, but left the code. For the Green TD above, I used XSL:Text disable-output-escaping=yes to construct all my conditions.

The above is just my example, as there is a lot of formatting. Basically I have Id’s, Classes, and Numbers I sort by and place in their own TD’s, TR’s (Every 5 cells), and headers for every certain number. Each class has its own TD. (specific to my data schema)

The point I am trying to prove is that outside of the For-Each is intact. All my modifications were around this for-each, but not to my TH class, or any other template.

Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator

The Problem

The page would load fine for me in browser. In SharePoint Designer, I would have an older data set in my data view web part. I would break the web part when I did a Refresh Data Source, so I left it as it was. I had enough data to continue building out my template.

Once I had my manager review my work on his computer, the page gave him the error Unable to display this Web Part. So, I logged in as myself (To make sure the old template was not cached on my computer) and it worked for my user.

The Solution

Follow-up: This is not a solution, but a work around. Upon Re-saving the page in SPD, the error occurred once again. See future post on 10/15/09 about XSLT layouts and why they break your data view web part.

At one point, I did have the page checked out, but it seem to automatically disguard it when I tried to check it back in. Really weird, so I made a copy of the Default.aspx page that contained my web part. I right clicked the copy and said Reset to Site Definition.

I noticed the web part was still on the page. I guess since web parts don’t support versioning, resetting the page only resets the code around web part zones. My web part was still on the copy. I suspected that if I reset the page and that it just might work now. I logged in as another user and it worked.

Here are the steps:

1. Make a copy of the ASPX page containing your “Broken” web part
2. Reset the COPY to Site Definition
3. Try the newly reset page and see if it works for your users.

Summary

I have noticed a lot of XSLT web part errors. I am starting to log them in one place as an archive of solutions, rather than abandoning my web part and starting over each time I get an error.

Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

This error could be caused by missing double quotes around your HTML markup attributes. For instance, the error below is missing double quotes around the table width=”600″ attribute. Simple change width=600 to width=”600″ and everywhere you have an attribute value (This includes classes, etc.).

Figure 1- Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator.

If you have seen this error, there might be a very simple solution.

The Solution:

Make sure all HTML template attribute values are contained in double quotes (eg. “value” and not just value.).

In my above example, I modified a Table tag inside my body template of the Data View web part. I replaced <table width=”600″> with <table width=600> and got the above error. This happens with classes and all HTML tag attributes (class=”Testing” is valid for an XSLT template in SharePoint, whereas class=testing causes the Unable to display this Web Part error.

This error is really broad, and I’m sure it won’t help everyone, but it’s a good start and easy fix for some situations.

“Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as FrontPage. If the problem persists, contact your Web server administrator”

I had a complicated Data view web part that I did not want to recreate.

The Solution:

Open the aspx file in notepad from SharePoint Designer. If you notice a bunch of HTML markup formatted as “&gt;” etc, then open the file normally in SharePoint designer Code View. Copy ALL the code and paste it into Notepad. Copy the code from notepad and replace your code view text. Save and view in browser. No more XSL DATA VIEW ERRORS!

The code view actually contains a rich text type of rendering. When you copy it out and paste it in notepad, it loses all of the special formatting. This allows the page to render correctly.