Posted: March 10th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, Printing | No Comments »
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;}
Posted: January 25th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: better forms, CSS, forms, jQuery, SharePoint | No Comments »
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.
Posted: January 6th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, icon, JavaScript, jQuery, SharePoint, user | No Comments »
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.
<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
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”
<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');
Posted: October 16th, 2009 | Author: davecavins | Filed under: SharePoint Design | Tags: blog, CSS, SharePoint, SharePoint Designer | No Comments »
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.
Read the rest of this entry »
Posted: October 9th, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: blog, CSS, SharePoint, SharePoint Designer | 3 Comments »
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. Read the rest of this entry »
Posted: July 6th, 2009 | Author: davecavins | Filed under: SharePoint Design | Tags: CSS, SharePoint | 2 Comments »
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. Read the rest of this entry »
Recent Comments