I got a request to create a page in sharepoint, the page is simply to display information, fair enough, but the person making the request have been looking at other sites, and decided to go for the same design pattern, what he wanted was something like this:

enter image description here

Where each rectangle is a link to another page, the white part of each 'button' is just me removing the text that was there.

What I did was creating a sharepoint summary links web part, and it came out something like this:

enter image description here

This does the exact same thing, it redirects the user to another page, but.. the design is different. The rectangles are all blue, and on hovering only the link is 'active', where as on the former the whole button is active.

I did some research and it seems like it is possible to create new 'styles', with some coding, and in that way change the color of each link, but are there other ways to create the layout we see in the first picture? I am fairly certain the site the image is taken from is using sharepoint.


Instead of summary link webpart, you can use Promoted Link list and use the view as webpart.you wont get a exact rectangle that you are looking for but you will get square boxes for which you can add images.

If you want to add rectangles, than you need css styling code!

  • I will test this to see what it looks like, thanks! – sch Jun 6 '16 at 12:55

You can add the Content Editor Web Part on the page instead, so you can define all the links yourself (if you're familiar with web development?)

I made an example with custom code: jsFiddle

  • This is a good option, but I was looking for someting more.. less coding, but I will have to go this way if there are no other webpart that will do it, thanks! – sch Jun 6 '16 at 11:53
  • Well, you can modify how your summary links web part looks like with css, but you will still need CEWP on a page to place that css :) – Gintas K Jun 7 '16 at 7:28

You could do it the old fashioned way, using the standard editing tools on the wiki page (I'm assuming it's a wiki page). Create some images that look like the buttons you want - with the background color and the text. Then, on the wiki page, insert these images - you can position them by using a table if needed. Then, select each image, and insert the appropriate link. The text won't show, but the link will work when the image is clicked.

  • I see, this way I can probably make it look right, assuming I can draw it :p, will try it to see how it feels, thanks! – sch Jun 7 '16 at 4:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.