Category Archives: Styles/CSS

Expand/collapse buttons for your Web Parts

Posted on by

The idea

The home page is a natural place to expose the content of your SharePoint site. However, often this page becomes over packed, and this affects the user experience.
One way to improve readability is to append an expand/collapse button to each Web Part. At page upload, only the main Web Parts are expanded, but the user has the option to open other Web Parts he/she is interested in.

The idea is not from me, a script for SharePoint 2003 was posted on a blog a couple years ago [Placeholder for the credits – unable to locate the original post at this time]. But this script doesn’t work on SharePoint 2007.

This week, a reader reminded me about this, and asked me if I had a solution for SharePoint 2007. So here it is! Note that I have written my script from scratch using a different method, specific to SharePoint 2007.

Continue reading →

A tiny cute SharePoint calendar (Part I)

Posted on by

Have you noticed these cute month calendars that people sometimes put on the homepage of their Website?
Now, have you tried to drop a SharePoint month calendar on the home page of your SharePoint site? The result… not so cute: the calendar eats up half of the screen.

In this post I am going to show how with the help of CSS you can shrink your SharePoint calendar and make it fit in the right column of a SharePoint page. The picture shows you the expected result.

Continue reading →

Styles/CSS and the display property

Posted on by

One principle of Web design is the separation between content and presentation. HTML provides the structure of the page, while CSS (Cascading Style Sheets) tells how it should be displayed.

Themes in SharePoint (Site Actions | Site Settings | Site Theme) are a good example. Changing the theme doesn’t modify the structure of your site, it just changes its look by calling a different style sheet.

One key style property is “display”. By setting its value to “none”, we can hide an element, so that our site visitors cannot access it (though the element actually remains in the page structure). “Display=none” is often used to hide buttons or menu options on a page.

Continue reading →

The Content Editor Web Part

Posted on by

The Content Editor Web Part (CEWP) allows you to add text, html, scripts or styles to a SharePoint page. Its versatility makes it a favorite among Web designers.

The fpweb.net site offers a tutorial on how to add a CEWP to a page:
http://www.fpweb.net/sharepoint-tutorials/ContentEditorWebPart.asp

The CEWP has two edit options: [Full article]