New Ticker

For this ticker I started out with a default Annoucements list. Because I wanted to display a thumbnail for each annoucement I added a signle line of text column called Subtitle and a Picture column called Picture. Here are the columns I used.

Here is the basic structure of the ticker.

<div id="actions">
<a class="prev">« Back</a>	<a class="next">More pictures »</a></div>
<div class="scrollable vertical">
    <div class="items">
      <div class="item">
           <img src="#" alt="Thumbnail Image" />
           <h3>Title</h3>
          <strong>
              <span>Subtitle Text</span>
          </strong>
        <p>First 200 Characters of the body</p>
       <p><a href="#">Read more</a></p>
    </div>
   </div>
</div>

Below is the xsl code I used to build the ticker. 

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
				<xsl:param name="dvt_apos">'</xsl:param>
				<xsl:param name="url_PATH_INFO" />
				<xsl:param name="url_HTTP_HOST" />
	<xsl:param name="Today">CurrentDate</xsl:param>
				<xsl:variable name="dvt_1_automode">0</xsl:variable>
				<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
					<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">Table</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
						<script>
$(function() {
	$(".scrollable").scrollable({ vertical: true, mousewheel: true, circular: true, keyboard: true });
// scrollable has to match the class on the div you use to wrap your items.
});
</script> <div id="actions">
	<a class="prev">« Back</a>
	<a class="next">More pictures »</a>
</div>
		<div class="scrollable vertical">
		<div class="items">
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows"/>
			</xsl:call-template>
			</div>
			</div>
	</xsl:template>
				<xsl:template name="dvt_1.body">
					<xsl:param name="Rows"/>
					<xsl:for-each select="$Rows">
						<xsl:call-template name="dvt_1.rowview"/>
		</xsl:for-each>
	</xsl:template>
		<xsl:template name="dvt_1.rowview">
		<div class="item">
		<xsl:if test="not(normalize-space(@Picture) = '')"><img src="{substring-before(@Picture,',')}" /></xsl:if>
		<h3><xsl:value-of select="@Title"/></h3>

				<strong>
		<xsl:if test="not(normalize-space(@SubTitle) = '')"><span><xsl:value-of select="@SubTitle " disable-output-escaping="yes" /></span></xsl:if>
		</strong>

				<p><xsl:value-of select="substring(@Body,0,200)" disable-output-escaping="yes" /></p>
				<p><a href="http://{$url_HTTP_HOST}/{@FileDirRef}/DispForm.aspx?id={@ID}">Read more</a></p>
		</div>
	</xsl:template>
</xsl:stylesheet></Xsl>

If you try to run the page with just this XSL it will give an error. You will also need to add these two lines to the parameter bindings section of your dataview web part. I used these 2 parameters to get the URL of the current page in order to built the ‘read more’ link. This is what I would call a best practice because other wise you would have to hard code the URL to your site which makes it harder for others to use your code.

<ParameterBinding Name="url_PATH_INFO" Location="ServerVariable(PATH_INFO)" DefaultValue=""/><ParameterBinding Name="url_HTTP_HOST" Location="ServerVariable(HTTP_HOST)" DefaultValue=""/>

 In addition to this code you will also need to add links to these two files.

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
/* css file to style the ticker */
<link rel="stylesheet" type="text/css" href="scroll.css" />

Here is the css I used to style my ticker.

/* root element for scrollable */
.vertical {
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollers have typically larger height than width */
	height: 665px;
	width: 700px;
	border-top:1px solid #ddd;
}

/* root element for scrollable items */
.items {
	position:absolute;
	/* this time we have very large space for height */
	height:20000em;	margin: 0px;
}

/* single scrollable item */
.item {
	border-bottom:1px solid #85b1ee;
	border-top:1px solid #85b1ee;
	margin:10px 0; padding:15px; font-size:12px;
	height:180px; background:#d6e8ff;
}

/* elements inside single item */
.item img {
	float:left;
	margin-right:20px;
	height:180px;
	width:240px;
	border:5px solid #fff;
}

.item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#4a6499;
	font-weight:normal;
}

.item p a{padding:3px;}

.item p a:hover{ background:#fff; text-decoration:none;}

.item p { padding:3px; margin:5px;}

/* the action buttons above the scrollable */
#actions { width:700px; margin:30px 0 10px 0;}

#actions a {font-size:11px;	cursor:pointer; color:#666;}

#actions a:hover {text-decoration:underline; color:#000;}

.disabled {visibility:hidden;}

.next {float:right;}

Notes

• The XSL is setup so that if no thumbnail is provided it will automatically adjust. The same is true if no subtitle is entered.  This is done using conditional formating.
• Only the first 200 characters of the body are shown. To change this amount you can just change this line of code xsl:value-of select=”substring(@Body,0,200)”.
• You do not need the whole jQuery library in order for this to run.

Resources

• jQuery Scrollable Plugin
  http://plugins.jquery.com/project/scrollable
• How to get the Current URL in XSL

  http://www.jwc3.net/2008/05/how-to-get-url-in-xsl.html

Related posts:

1. Anything Slider in SharePoint – Update
2. Zoomable Photo Grid
3. CSS-Tricks AnythingSlider in SharePoint

With JavaScript you can change the CSS file a page uses without requiring a page refresh.  I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint.  Most of the scripts I have used in the past use the alternate style sheet method as describred by A List Apart here. That method works fine but I had to find another way because I was already using that script to allow users to change the font size. After some research I found this script from CSS Newbie that worked pretty well without using alternate style sheets.

The problem

While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :

 $("link").attr("href",$(this).attr('rel')); 

This line of code basically finds all the linked CSS files in the page and changes thier value to point to the new style sheet you select.  This is fine on a site that just uses one CSS file but in SharePoint bad things happen.  In most cases we dont want to completely remove the reference to core.css. For most themes many elements don’t need to be changed so we only have to write the CSS to change them and let core.css do the rest.  If you remove core.css its like using a global reset (discussed in more detail here) which means you will have to restyle everything.  So them point is we want to leave core.css in the page and just add our theme. 

To do this I had to make some changes to the master page to create to interface users will use to swap themes. 

Edit the Masterpage

Here is the code I added to the masterpage. This can be styled to look however you want and can be added anywhere in the page that makes sense.

<ul>
	<li><a rel="" href="#">Reset CSS</a></li>
	<li><a rel="/Site Styles/Verdant/theme.css" href="#">Verdant</a></li>
	<li><a rel="/Site Styles/Belltown/theme.css" href="#">Belltown</a></li>
	<li><a rel="/Site Styles/Petal/theme.css" href="#">Petal</a></li>
</ul>

In addition to this we also need to add a link to our css file to the master page. I put it at the end of the head section.  

 <link class="altStyle" href="" type="text/css" rel="stylesheet"/>

I added a class to the link so that we can use jQuery to target only that css link and change it to match the theme the user selects. Initially I left the href value blank but if you want to apply some default styles you would just add the link to the css file there.

Use jQuery to Swap the CSS

So here is the code I used to swap the stylesheet. The main thing I changed is on lines 7 and 12.  I changed the selector so it will only target <link> tags with a class of ‘altStyle’.  This allows us to swap themes without breaking the link to core.css.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script src="cookie.js" type="text/javascript"></script> 

<script type="text/javascript">// <![CDATA[
 if($.cookie("css")) {
 $("link.altStyle").attr("href",$.cookie("css"));
 }
$(document).ready(function() {
//alert( $.cookie("css") );
 $("#nav li a").click(function() {
 $("link.altStyle").attr("href",$(this).attr('rel'));
 $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
 return false;
 });
});
// ]]></script>

Resources

• You will need jQuery either locally or linked from Google.  Just update the link on line 1 as needed.
• In the code above you will notice a link to cookie.js, this is the jQjuery cookie plugin that you will need in order to save users’ theme selections.  In the code above on line 13 you will see where I create a cookie named css.  For testing purposes you can uncomment line 10 to see what the cookie value is on page load.   You can download the plugin from here.  jQuery Cookie Plugin
• You can see the original code I started from in this script from CSS Newbie

Conclusion

While this is a very simple solution it is a quick way to add in some fuctionality that many users want without alot of custom code or requiring the user to navigate to multiple pages.  Users like to feel that they have some control over the site (even if its just changing the color).  Feel free to post any questions or comments.

Related posts:

1. Switch Themes Without a Page Refresh: Part 1
2. Annoucements Slider using SP Web Services
3. Switch List Displays with JQuery and CSS

With JavaScript you can change the CSS file a page uses without requiring a page refresh.  I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint.  For this solution there were several requirements.

• Users need to be able to switch themes and have the setting saved
• No page refresh
• Should be able to use both out of the box themes and custom themes

So first I needed to get the CSS files and images for the themes I wanted to use.  When you assign a theme to a site all the files for the theme are copied to a folder named _themes in the root of the site. 

_themes folder

So what I did was assign each theme I wanted to use to the site one at a time.  With SharePoint designer I copied the files folders for each theme into a document library called Site Styles.  Each folder contains all the resources needed or the theme to work. 

Here is what I ended up with

Site Styles Library

If I wanted to create a custom theme I could just add another folder with my custom CSS and images.

This same technique can be used when developing your own custom theme, just copy one that is similar to what you want and use the alternate CSS link on the master page settings page to add it to the site.  Inside of the folder for each theme is a file named theme.css. Link to that file and SharePoint will apply the theme to the site. 

Alternate CSS URL

Now everything we have done so far is pretty basic and easy to do but we will pull all this together with some simple edits to the master page to complete the solution. In part 2 I’ll explain how we use JavaScript to switch styles and set a cookie to remember the users theme choice.

Related posts:

1. Switch Themes Without a Page Refresh: Part 2
2. Adding references to the page head: the easy way
3. Styling the MOSS horizontal navigation menu

Switch views using CSS and jQuery

Basically by changing the class assigned to a div wrapping the content we are able to change the way things are laid out and hide what we don’t need.  Here how I set it up in SharePoint.  

• I started with a standard Image library and added some images of one of my bikes.  I filled in the title and description for each item.  You can use this same technique on other types of lists.
• Next I created a page and displayed the list in a dataview web part
• I edited the XSL to show the items in an unordered list with a class of  ‘display’. Inside of each <li> I used various tags and classes to style the images and descriptions.

  <li class="ms-vb">
  <div class="content_block">
  	<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
  	<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
  	</a>
  	<h2>
  		<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
  	</h2>
  	<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
  </div>
  </li>
  

• Before the opening <ul> tag I added the link to my CSS and jQuery files as well as some script to trigger the switch and the associated link.

  <link href="styles.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  	$("a.switch_thumb").toggle(function(){
  	$(this).addClass("swap");
  	$("ul.display").fadeOut("fast", function() {
  		$(this).fadeIn("fast").addClass("thumb_view");
  //  thumb_view is the class used for the alternate display style
  		});	  },
  		function () {
  		 $(this).removeClass("swap");
  		$("ul.display").fadeOut("fast", function() {
  			$(this).fadeIn("fast").removeClass("thumb_view");
  		}); }); });
  </script>
  <a href="#" class="switch_thumb">Switch Display</a> /* link to trigger the switch */
  

• Then I wrote some css to style the list differently based on the class of the <ul>. 

Below is the xsl and the CSS I used.

XSL (includes the code above)

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
		<xsl:param name="dvt_apos">'</xsl:param>
		<xsl:param name="url_PATH_INFO" />
		<xsl:param name="url_HTTP_HOST" />
		<xsl:variable name="dvt_1_automode">0</xsl:variable>
		<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">BulTitl</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
					<link href="styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">
$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){
	  $(this).addClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").addClass("thumb_view");
		 });
	  }, function () {
      $(this).removeClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").removeClass("thumb_view");
		});	}); });
</script> <a href="#" class="switch_thumb">Switch Display</a>
	<ul class="display">
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
		</xsl:call-template>
	</ul>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
	<xsl:for-each select="$Rows">
		<xsl:call-template name="dvt_1.rowview" />
	</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<xsl:param name="FileNameString" select="@NameOrTitle"></xsl:param>
		<xsl:param name="FileNameLegnth" select=" string-length(@NameOrTitle) - 4"></xsl:param>
		<xsl:param name="FileNameNoEx" select=" substring(@NameOrTitle,1,$FileNameLegnth)"></xsl:param>
		<xsl:param name="FileURL" select="concat('http://',$url_HTTP_HOST,'/',@FileDirRef)"></xsl:param>
	<li class="ms-vb">
		<div class="content_block">
			<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
				<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
			</a>
			<h2>
				<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
			</h2>
			<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
			</div>
		</li>
		</xsl:template>
</xsl:stylesheet></Xsl>

CSS

/* normal view styles */
ul.display li a {
    text-decoration: none;
}
ul.display li{
	background:#E3EFFF;
	margin:3px;
	border:1px solid #9FC2F1;
	height:130px;
	list-style:none;
}

ul.display li .content_block {
    padding: 5px;
	clear:both;
    margin:4px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 2px;
    font-weight: normal;
    font-size: 1.4em;
}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 145px;
    font-size: 1.2em;
}
ul.display li .content_block img{
    padding: 5px;
    border: 4px solid #336699;
    background: #fff;
    margin: 2 9px 2 2;
float: left;
}
/* thumbnail view styles */
ul.thumb_view li{ width: 200px; float:left; background:transparent; }
ul.thumb_view li h2 { display: inline; text-align:center; margin:2px; padding:2px }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 5 0 10px; }
/* styles for the style switcher buttin */
a.switch_thumb {

	padding:5 5 5 25px;
	margin:10px;
	background:#D6E8FF url('/_layouts/images/itcat.gif') no-repeat 5px 7px;
	outline: none;
	border:1px solid #9FC2F1;
	font-size:.8em;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background:url('/_layouts/images/itcontct.gif') no-repeat 5px 7px; }

If you want to use this same solution for a different type of list just create a dataview Web Part to display the items in the format you want and wrap everything in a container (div, ul, table) with a class. Also use tags (h2, p, span, div, etc.) to wrap the pieces of data you are displaying (this will make it easier to control with CSS). Change the CSS and JavaScript to work with you new container and XSL.

Got questions? Post a comment.

Related posts:

1. Zoomable Photo Grid
2. Anything Slider in SharePoint – Update
3. A Better Annoucements Ticker

*{ background-image:none; /* remove all background images */ }
.ms-sbcell, /* search box at top of page */
.ms-topnavContainer, /*horizontal nav container */
img, /*images */
.ms-globalbreadcrumb, /*breadcrumbs */
.ms-titleareaframe, /* page image */
.ms-siteactionsmenu, /*site actions menu */
.ms-pagemargin, /* left margin beside quick launch*/
.ms-quickLaunch, /* quick launch menu */
.ms-sitetitle, /* name name */
.ms-menutoolbar, /* list tool bar */
.ms-pagetitle /* page title */
{ display:none; visibility:hidden; /*width:0px; height:0px;*/
}
.ms-pagetitleareaframe table {
position:absolute; top:1px;
width:600px;
background-image:none;
}
.ms-bodyareaframe { /*remove border around main content*/
border:0px;}

Related posts:

1. Styling SharePoint Blog Comments
2. Switch List Displays with JQuery and CSS
3. Styling the MOSS horizontal navigation menu

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Related posts:

1. Improving #SharePoint Forms – Watermarks
2. Improving #SharePoint Forms – Character Count
3. Improving #SharePoint Forms – Hints

status icon

In some cases this is exactly what you want and can be very useful. But sometimes you just want to show a name and nothing else. With most fields you can just change the formatting options to change the display. If you choose to format the value as text SharePoint spits out this long html string.

<nobr><span><A HREF="/sites/site/_layouts/userdisp.aspx?ID=2">Cavins, David R</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href='javascript:' onclick='IMNImageOnClick();return false;' class='ms-imnlink'><img name='imnmark' title='' border='0' height='12' width='12' src='/_layouts/images/blank.gif' alt='No presence information' sip='email@email.com' id='imn_8,type=sip'/></a></span></nobr>

Format as

<span class=”person”>
<xsl:value-of select="@Author" />
</span>

Then just add this css to the page.

.person nobr span a {
text-decoration:none;
color:black;
cursor:default;
}

If you want to take it a step further you can use jQuery to remove the ‘href’ attribute. Using jQuery we can target the container with the link in it and then change the href value.

$('span.person a').removeAttr('href');

Related posts:

1. Styling SharePoint Blog Comments
2. Switch List Displays with JQuery and CSS
3. Styling SharePoint Blog Comments: Part 2

Better looking comment form

I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex.

This code includes the code from part 1 with some minor changes. The new styles for the comment form are commented.

<style type="text/css">
.ms-commenttable td {border:0px;}
h4.ms-CommentTitle{border:0px; font:italic normal small Georgia;}
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
.ms-CommentFooter {background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	padding:3px;
	margin:0px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
.ms-CommentFooter span {padding-left:18px;}
.ms-commentsWrapper {background:#fff; margin:5px; border:0px;}
.ms-blogedit a{	background:transparent; border:0px;}
.ms-blogedit a:hover{background:#ccc; border:0px;}
h3.ms-CommentHeader{padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat}
.ms-formtable {	border-top:1px dotted #ccc;	border-bottom:1px dotted #ccc;	padding:5px;}
/* cell holding the labels */
.ms-formlabel {	border:0px ;width:100px;}
/* label text */
.ms-formlabel h3.ms-standardheader{	padding-top:5px; font-weight:normal; text-align:right;}
/*wraps the form elements */
.ms-formbody {background:transparent;	border:0px;}
/* the title input field */
.ms-formbody span input{
background:#FEFFE2;
padding:2px 5px 1px 5px;
height:28px;
border:1px solid #ccc;
font:italic normal normal small/18px Arial;
margin:5px 0 5px 0;
}
/* text area for the comment body */
.ms-formbody span textarea{
font:italic normal normal small/18px Arial;
background:#FEFFE2;
padding:5px;
border:1px solid #ccc;
margin:0 0 5px 0;
}
/* submit button */
.ms-toolbar input.ms-ButtonHeightWidth2 {
	height:26px;
	border:2px solid #317A0C;
	background:#51AA25;
	color:#fff;
	font:italic normal x-small Georgia;
}
</style>

Note: To be sure this code does not affect the styling of other forms on the page and other web parts it would be best to open the page in SharePoint Designer and wrap the web part in a div some the styles can be targeted to affect only items inside the div.

Related posts:

1. Styling SharePoint Blog Comments
2. Styling the MOSS horizontal navigation menu
3. Switch List Displays with JQuery and CSS

Standard SharePoint blog comments

 Here is a way to fix that problem. Just add this CSS to the page and things should start looking alot better.

<style type="text/css">
/* wraps the title of each comment */
.ms-commenttable {border:0px;}
/* the title of each comment */
h4.ms-CommentTitle{font-size:x-small;border:0px;}
/* wraps the body of each comment */
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
/* wraps the text of each comment */
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
/* wraps the meta info (author, date, etc.)	for each comment */
.ms-CommentFooter {
	background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	padding:3px;
	margin:0px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
.ms-CommentFooter span {padding-left:18px;}

/* wraps all comments */
.ms-commentsWrapper {
	background:#fff;
	margin:5px;
	border:0px;
}
/* header style for 'Comments' and 'Add a Comment' */
h3.ms-CommentHeader{
	padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat
}
</style>

Without editing the code of the page there are some limitations on what can be done. I did not make too many drastic changes but this code should be a good starting point for making your ShaerPoint blogs look better.

Better looking comments

Here is the image I used in the CSS (right click save as). The other two images are referenced from the 12 hive and should work automatically on any WSS or MOSS installation. 

In a future post I will try to do something about the comment form.

Related posts:

1. Styling SharePoint Blog Comments: Part 2
2. Adding Comments to a List Part 1
3. Styling the MOSS horizontal navigation menu

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
DataSourceID="topSiteMap"
EnableViewState="false"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
DynamicHorizontalOffset="0"
StaticPopoutImageUrl="/_layouts/images/menudark.gif"
StaticPopoutImageTextFormatString=""
DynamicHoverStyle-BackColor="#CBE3F0"
SkipLinkText=""
StaticSubMenuIndent="0"
CssClass="ms-topNavContainer">
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
<StaticSelectedStyle CssClass="ms-topnavselected" />
<StaticHoverStyle CssClass="ms-topNavHover" />
<DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
<DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
<DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
<DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

From a designers perspective what matters most if the way this code is rendered on the page. In the code above you will see several CssClass tags. These define what CSS classes are used when the page is rendered through the browser. You can change them in the masterpage to whatever you want, but remember changing them can cause styles defined in core.css not to work.

Output

For each menu item SharePoint generates the following code (its not pretty).

<td>
<table border="0"
cellpadding="0"
cellspacing="0"
width="100%"
class="zz1_TopNavigationMenu_5">
<tr>
<td style="width:0px;"></td>
<td onmouseover="Menu_HoverStatic(this)"
onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)"
id="zz1_TopNavigationMenun1">
<table class="ms-topnav zz1_TopNavigationMenu_4"
cellpadding="0"
cellspacing="0"
border="0"
width="100%">
<tr>
<td style="white-space:nowrap;">
<a class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3"
href="/sites/ops/SIO/API/SharePointSupport/test/testing/Pages/AboutUs.aspx"
style="border-style:none;
font-size:1em;">
About Us
</a>
</td>
</tr>
</table>
</td>
<td style="width:0px;"></td>
</tr>
</table>
</td>

This is one of the things I hate about SharePoint. There is a whole lot of code generated just for one menu item that could have been made with just an unordered list. Additionally you will notice that SharePoint includes some inline styles that may need to be overridden. 

To style the menu I have found Heather Solomon’s CSS Chart very helpful.  Here is a breakdown of some of the styles I typically use.

• .ms-topnav a – controls all the links in the top level menu.  I use this to set the font family and color as well as remove any background color / images.
• .ms-topnav td – remove background color / image behind the menu
• .ms-bannerframe – set the background color for the table that holds the menu and site actions menu

There are other css classes that can be used but I use these the most.  In most cases instead of styling the td that holds each menu item I apply my styles to the <a> tag which makes things simpler.  The rest of my css just removes SharePoint’s normal styling.

This is a menu I styled using the td classes. The CSS is used is below. I try to avoid using !important in my CSS but sometimes SharePoint just won’t listen.

re-styled menu

.ms-topnav a {
font-family:Georgia;
background-color:transparent;
background-image:none;
color:#ccc;
padding:5px;
border-bottom:0px;
}
.ms-topnav a:hover {
background-color:#666;
border-bottom:0px;
}

.ms-topnav td {
background-image:none;
background-color:#424242;
border:0px;
padding:5px;
padding-bottom:0px;
}
.ms-topnav table td{
border:0px;
}
.ms-topNavContainer {
border:0px;
}
.ms-topNavHover{
border:0px;
}
.ms-topnavselected a{
border:0px;
background-color:#EF6100;
color:#fff;
background-image:none;
}
.ms-topnav{
border:0px;
background-color:#ccc;
}
.ms-bannerframe {
background:#424242;
border-bottom:3px solid #EF6100;
border-top:1px solid #666 !important;
}

Note

When you mannually add items and headings to the menu the code that is generated is slightly different so its always good to check this before launching the site.

Related posts:

1. Styling SharePoint Blog Comments: Part 2
2. Print Stylesheet for List Views
3. Styling SharePoint Blog Comments