So, I’d been asked to look at building a links menus something like this:
I thought that this was quite nice. I wondered if I could make something similar to this using the Summary Links web part – curiously, it’s something I’ve never really used, and I though I remembered seeing that it could show images too. So, I set up some examples…
First off, I looked at the different styles of links you could put in. Interestingly, you can mix these in the one Summary Links Web part:
Quite a lot of styles! The image I used for m links is the one with orange text saying ‘This is an image’ – original, huh? (Note: the second and third links up from the bottom are just Image links. On is clickable and the other isn’t… ) None of these are really styled the way I’d want though.
Next, I took a look at the Group Header Styles:
Again, nothing that would obviously do what I wanted – no images for a start. For completeness, I should say that these settings were configured via the ‘Configure Styles and Layouts’ option, which opens this dialog:
So, what other options? Well, I wondered if I might be able to move things around a bit and use the normal ‘styles’ of link through applying a bit of CSS. So, I opened the IE Developers toolbar and started taking a look. I found that I could see the different DIV tags for each link item, and they had different styles applied to them:
Great! What structure is within those items though:
Damn, they’re all different. Well, that idea bites the dust. I guess that I’ll have to look at a custom web part.
As a side note, I also discovered that you could have multiple columns. You can’t have a single Group heading with multiple columns, but you can have Group headings in columns with a single column of links underneath, like so:
Andy Burns' Blog 
Interesting… I am wondering if the CSS could be made to work though… there are ways of writing it to drill through stuff.
Well… …maybe. It’s not a matter of ‘drilling through’ stuff so much as the structure of what you’re styling. The different formats of link don’t have a structure around them amenable to styling to be like the image at the top.
To achieve the result mentioned at the beginning of the article you should be able you just use one of the available link styles multiple times (not sure if you have drop downs or not). By using the same item style each time, they will all have the same structure. If you don’t like the available link styles you can always create your own. They are defined using XSLT and can be found in /Style Library/XSL Style Sheets/ItemStyle.xsl.
Then you would need to come up with your own CSS. I found this post while searching for instructions on applying custom CSS to the summay link control. Any ideas?
Hi Mark,
Yeah, I’d wondered about just getting users to use the same link style each time – that would work, as you’ve said. The problem is that for the customer, it needs to be obvious and easy for users who’ve had very little training. And yes, they also wanted Drop Down menus of links
However, if this comes from the ItemStyle.xsl I might be able to do something, and presumably define a new (and clearly named) style. That’s an interesting tip, thanks.
With regard to applying your own CSS, there are a whole bunch of ways. If you’ve got your own master page I’d recommend putting your CSS in a new CSS file, and linking it in (though after the ones that pull in Core.CSS). If you’re using themes, you might want to put your CSS in that too.
You could put your CSS into a style tag in the head of your master page, though that doesn’t seem very clever (adds to the size of each page).
If you only want to apply this to certain page layouts, you could put your styles into your layout – some of the Out-of-box page layouts to this, seem them for example.
Finally, if you’re using a publishing site, you can set an Alternate CSS URL (go to Site Setting > Master Page, and scroll to the bottom).
What I strongly wouldn’t recommend doing is modifying Core.css, but you probably know that already.
As for generating the CSS, well, that’s kind of a bit topic to cover here!