#ProjectServer / #ProjectOnline custom PWA homepage #PS2013 #PS2010 #SharePoint #HTML #MSProject

July 30, 2014 at 2:31 pm | Posted in Add-on, Configuration, Customisation, Functionality, Information | 1 Comment
Tags: , , , , , , , , , ,

This post covers an example landing page for PWA using HTML and an image. Firstly select your chosen image and add on containers, other images, text etc. – anything you want really to define the image hotspots. These hotspots will become links. See my example below:

Image for PWA homepage example

This was a picture taken from a recent trip to Venice Smile

Upload the image to the PWA site collection.

Once you have the chosen / updated image you need to create the hotspots or image maps.There are plenty of tools available or online sites that do this. I have used the following site:

http://www.maschek.hu/imagemap/imgmap 

Upload your chosen image then add the image maps as shown below:

image

Once all the maps are added update the other properties such as Href, Alt and the target.

Scroll down and you will see the code, copy and past this into notepad or your favourite HTML editor:

image

Now you need to update the HMTL to add the image reference and tag the map to the image, see the first line:

image

Navigate to you PWA homepage and add a script editor or content editor web part then paste the HTML code in:

image

I used a script editor web part in this example.

Now the image will be loaded to PWA with clickable links on the image maps Smile

image

This was just an example so I didn’t spend much time on the image but with a creative mind you could really liven up your PWA homepage, Project Sites or any SharePoint landing page etc.

Advertisements

1 Comment »

RSS feed for comments on this post. TrackBack URI

  1. Paul,

    That’s a clever idea, will have to use that.

    Nadim


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: