Boris GomiunikOn SharePoint and Web

How about spicing up company’s intranet for the season? Here’s a neat little trick you can make for adding season’s spirit  to your SharePoint homepage. We’ll add some decoration to page’s head.

The first thing you need is the images for the decoration. Don’t make them too big, because you can’t click on anything below images. Below is a simple example I got from Office Online, merged it, removed background and reduced its size. Make sure you have a transparent image (a .GIF or .PNG with transparent background).

The first step is to upload the image to site’s document or picture library and copy the original image’s URL to clipboard. (don’t copy the SharePoint thumbnail or web preview image, as they tend to get white background instead of original transparent).

Next on your homepage add a Content Editor Webpart into any zone and edit its source.

And in the source simply type the following code:

<img src="[your-coppied-image-url]" style="position:absolute; top: 0px; left: 48%; z-index: 99;" />

After you click "Save" and "Apply" the page in edit mode will have the decoration in a wrong place.

But not to worry, after you exit edit mode, the image will be in the right position. So final result might look something like below:

There are numerous variations. You can change the position, you can even use a div with a repeating background image,…

Merry Christmas and a Happy New Year to all SharePoint users and admins!

P.S. If you have any good image (appropriate for transparent background and not violating any copyright rules) for season’s decoration, please drop me a link in this post’s comments.

Bookmark It

Hide Sites

If you’re in SharePoint branding, this small command-line utility might come in handy. If you have a custom template made and deployed to server and after a while you need to make a small modification, you can already be stuck with hundreds of subwebs using your custom template. If you make a change to the existing template, the change won’t be visible in the existing templates until you apply another theme and apply the same theme again to each of those webs.

Because this can be a painstaking job, I’ve composed a simple command-line utility to cycle through all of the webs in a site collection and apply default theme and reapply existing theme.

You can download it from CodePlex.

Usage is simple. Download it to the server running Windows SharePoint Services site you wish to reTheme. Open command prompt in the download folder and run command retheme http://site_collection_url.

Bookmark It

Hide Sites

I was stuck with a problem the other day when I was creating a custom theme for SharePoint. My DataSheet view was with dark background and I couldn’t find CSS class or element to be able to manipulate it.

Turns out that the DataSheet ActiveX is taking the body background color – which was also dark in my theme. Fixing this resolved the issue. But to be able to use the dark body background, apply the background to the form element.

Old CSS:

body{
    background-color:#707070;
}

Produced the DataSheet View

New CSS

body{
    background-color:#FFF;
}
form#aspnetForm {
    background-color: #707070;
    height: 100%; /*cover all the background*/
}

produced proper DataSheet view

Bookmark It

Hide Sites

On my latest project I’m working on I was having serious trouble with SharePoint Designer. As soon as I opened a certain page it hung up, crashed, collapsed and in many cases it wasn’t responding. I’ve checked the proper syntax of the code (there was some custom XSLT), CSS, etc. Even tested the code in some validators to see if I forgot to close some tags, or left something out. Nothing.

Then I discovered that the difference between the troubled page and other pages was some additional CSS. The following method helped:

1. download the troubled page by selecting it and clicking "File –> Export –> File"
2. On your computer using any text editor (I prefer Notepad++) cut the troubled code out (in my case the CSS)
3. On the SharePoint site create the CSS file and paste the CSS code into it.
4. Still on your desktop insert the link link to the CSS file (<link rel="…)
5. Upload the file from desktop (just to be secure make a copy of the file on your server)

Up to this point I didn’t solve the problem, because the troubled (yet validated ok) CSS was still loading and making the SharePoint Designer to hang up. But to bypass the problem I now make the following:

6. Before opening the page in SharePoint Designer I open the CSS file and comment out all the CSS code (/**/)
7. I open the page (yeee, it gets loaded)
8. I uncomment the CSS in the CSS file.

And I can edit the page normally. I hope this method helps at least someone else. Worth a try.

Bookmark It

Hide Sites

If you need a quick fix on one of your photos or images, and you don’t want to install any additional software on your computer, you can use the online PhotoShop Express. Check Jose’s review and links to the solution. It’s free and it’s very good.

But there is another online service for modifying your pictures that I believe is also very good: It’s called Picnik. You can find it on www.picnik.com.

There are some really nice features:

1. You don’t have to signup or register to upload and edit picture
2. Lots of basic tools like Auto fix, Rotate, Straighten, Crop, Resize, Fix exposure, Sharpen, Red-eye removal, …
3. Lots of effects for your photos

4. You can put texts, shapes, frames on the images
5. You can edit curves and color levels (for premium version only)
6. lots and lots of other stuff
7. If you want to experiment with the tool, it has some sample images for you to try the tools
8. It can connect to Flickr, Picasa, FaceBook and other online photo services, or you just upload your photo

Below is a sample that I made in just a couple of minutes using auto fix, exposure fix, rotate-straighten, added shape, text, some radial effect and drop shadow border and resized image:

I recommend you to visit the site and try it yourself.

Bookmark It

Hide Sites

A links list in SharePoint has an interesting functionality – to change the order of items.

I’ve tried and this functionality can be applied to all the lists and used in a data view. Let’s go in order.

To reorder the list go to _layouts/reorder.aspx?list={list_guid} in the same site. If you don’t know the list guid, go to list settings and replace listedit.aspx with reorder.aspx. You’ll go to the interface to reorder items in that list:

 
The change will not be visible in SharePoint’s AllItems.aspx page.
 

To sort items in the data view according to ordering you just made:

With data view inserted to the page the first thing we need to do is add the order field to the data view fields. To do this click the list name in the task pane Data Source Details. 
 

Next click button Fields, find and select Order in the left column and click Add.
 

Click OK to confirm the changes and close the Data Source Properties dialog by clicking OK again. Now you select data view Sorting (in Common Data View Tasks select Sort and Group) and you can choose Order. If you can’t find Order in the dialog box, click the last option (Add Sort Expression) and click Add.
 

In the next dialog box, you can select Order from the fields.
 

Now confirm all the selections by clicking OK to close all dialog boxes.

That’s not all. Now it’s sorted according to order number, but the XSLT is taking this like a text. So we have to fix this. In source code, find <xsl:sort select="@Order" and add a data-type="number" parameter to it.
 

That’s it. Now you have items sorted according to the ordering you’ve made.

What I usually like to add to the data view is a link to reorder items. Just add a footer and in the footer add a hyperlink to the reorder page (the one mentioned at the beginning).

Bookmark It

Hide Sites

Yesterday evening my laptop with Vista already got too slow for normal work that I started to think about reinstalling. But instead I decided to use the performance tools in control panel and I made serious maintenance plus I turned off some features like visual styles.

An improvment in performance was immediate. And then suddenly a baloon pops up from my system tray explaining that there are solutions to my Vista problems (format? ). Desiring the better performance I follow the link and download the update. For all here’s the link to KB article from which you can download the update for 32-bit or 64-bit Windows Vista.

http://support.microsoft.com/default.aspx/kb/941649

After installing the patch and restart – the difference is obvious. Performance is better.

The best performance improvement I notice is that my SharePoint Designer crashes immediately instead of freezing for 2 minutes first :-)

Bookmark It

Hide Sites

The third in the series of tools for web developers is for the ones that don’t want or don’t have the option to install any software or addons and just need a quick access to a tool for inspecting DOM

1. Mouseover DOM inspector v. 2 – MODIv2

This thing is pure JavaScript, DHTML and CSS so you really don’t need anything else for inspecting a DOM of a certain page. All you need is to bookmark a link on the help homepage:

And then go to the page you want to inspect the DOM, and next just call the script from your favourites.

And you’re already exploring the DOM.

It doesn’t contain as many tools as the previously described toolbars, but it’s a very good solution for quick start and instant DOM inspection.

Bookmark It

Hide Sites

In my previous post I’ve presented a tool that I find very useful when debugging display, creating javascript related to HTML DOM, etc. The tool is intended for Internet Explorer. The FireFox users aren’t deprived of such tools either. There are two tools available:

1. Web developer toolbar for Mozilla Firefox

It offers quite a wide array of tools for web developers, such as ruler, css validation, DOM explorer, etc.

It has a nice feature when exploring DOM – it displays all the parrent elements – so you can see how any element is nested.

A neat add-on to that feature would be to be able to pause the selection and view the nested DOM, since there are a lot of times too many nested elements and the text goes out of the screen.

2. Firebug

A good combination of both – ie and firefox dev toolbar, it has very good tools for debugging HTML, CSS and JavaScript. What I like about it is that you can select the elements and it automatically also selects the HTML. And to manipulate the HTML, JavaScript and CSS in real time is very easy.

What I like about it is that it is easy to use, it has ability to monitor, debug and execute JavaScript, it helps with visualising some of CSS properties, and its toolset is nicely organized and easy to use. On the image below you can see how easy is to manipulate HTML in real time.

The problem of displaying too many nested elements is solvet neatly with a simple solution: the elements are ordered in opposite sense – it displays nested elements from right to left – instead of html > body > … div it displays div < … < body < html.

These are some neat tools that may make your life easier. I recomend using them all together because you know what headaches the IE/FireFox display compatibility can cause

Bookmark It

Hide Sites

The biggest IT event in Slovenia is coming! In our company we’re going to have an unofficial blog about it. Below is the first video

Video: NTK Video Series v1.0

Bookmark It

Hide Sites