I have written about making a News Ticker before but it looks like the code is not working anymore so why not make something better. News tickers are a great way to show a lot of information in a small space and they look much better than an annoucements web part. For this example I established a few ground rules.
Content will be pulled from a custom SharePoint list.
When clicked the items will open in a dialog window
The ticker will pause on hover and have controls so users can scroll through the news items
A while back I did a post about how to make a vertical news ticker, in the comments several people pointed out problems with the code so I decided to write a better version of the code. Here it is.
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.
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.
While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :
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.
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.
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. (more…)
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
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.
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.
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.
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”
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.
I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex. (more…)