Dave Cavins » CSS

Switch Themes Without a Page Refresh: Part 2

davecavins — Mon, 14 Jun 2010 14:50:09 +0000

So in part one of this post we got all the CSS and other theme file we needed to stuck them in a document library.

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.


	Reset CSS
	Verdant
	Belltown
	Petal

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.

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 tags with a class of ‘altStyle’. This allows us to swap themes without breaking the link to core.css.

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.

Switch Themes Without a Page Refresh: Part 1

davecavins — Mon, 07 Jun 2010 19:03:26 +0000

Many sites offer the ability for users to change the color and style of the site to fit their preference. SharePoint has this feature to some extend through themes but changing themes is not a very simple process and requires browsing to several pages.

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.

Switch List Displays with JQuery and CSS

davecavins — Wed, 21 Apr 2010 20:58:05 +0000

Sometimes it is useful to allow users to quickly change how data is displayed. Changing the display can make is easier to see patterns or find a specific item you are looking for. With CSS and jQuery we can easily change the way content is displayed and arranged on the page. I got the idea for this post from here

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
I used various tags and classes to style the images and descriptions.
```
	
	
	
	
		
	
	
```

Before the opening




Switch Display /* link to trigger the switch */

Then I wrote some css to style the list differently based on the class of the

Below is the xsl and the CSS I used.

XSL (includes the code above)



	
	
		'
		
		
		0
		
		
	
				
					BulTitl
					
					
  Switch Display

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.

Print Stylesheet for List Views

davecavins — Wed, 10 Mar 2010 21:11:20 +0000

Hides everything except the list and the breadcrumbs. More posts coming later this week.

*{ 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;}

Improving #SharePoint Forms

davecavins — Tue, 26 Jan 2010 02:43:15 +0000

Over the next few weeks I will be writing a series of posts on how to improve the out of the box SharePoint forms by using simple CSS and jQuery solutions. These solutions will help improve usability as well as enhance the look and feel. Look for the first post later this week.

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

Standard SharePoint Form

Stay tuned for more soon.

Hiding the user presence icon

davecavins — Wed, 06 Jan 2010 21:40:48 +0000

When you are using a data view web part to display information including a person field SharePoint always shows the status icon beside thier name.

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.

Cavins, David R

Format as

Each of the other formatting options also provides un-desirable results.
Using some basic CSS we can get rid of the status icon and format the text so it does not look like a hyperlink. First wrap the field value in an element with a class. I used a span with a class of “person”

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');

Styling SharePoint Blog Comments: Part 2

davecavins — Fri, 16 Oct 2009 14:00:45 +0000

As promised I went ahead and styled the comment form on a standard SharePoint blog. I wanted to make it look better than this but there are some limitations because of the way the page is coded with so many nested tables.

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.

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.

Styling SharePoint Blog Comments

davecavins — Fri, 09 Oct 2009 20:36:19 +0000

Out of the box the comments on SharePoint blogs dont look that good.

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.

&lt;style type=&quot;text/css&quot;&gt;
/* 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
}
&lt;/style&gt;

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.

Styling the MOSS horizontal navigation menu

davecavins — Mon, 06 Jul 2009 16:36:42 +0000

When you want to create a custom theme for a SharePoint site the top navigation menu is an important part of the design. Using the out of the box themes you can change the colors but if you really want it to look like a non-SharePoint menu it will take some work. In the standard sharepoint masterpage you will see the following code that defines the horizontal navigation. If you are not familiar with styling ASP server controls it can be somewhat confusing.

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).










About Us

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 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.