Metro Tiles hit the SharePoint Community home page!

Question

9.75K viewsAugust 12, 2013DevelopmentJQuery

0

Mark Jones1.19K August 12, 2013 0 Comments

On Friday evening we phased in a new change onto the home page of the SharePoint-Community.net. We swapped the old JQuery slider with some more modern looking tiles, as show below …

So, why did we do it ?

There are a few reasons :

Better use of the home page. As you can see, we often have a lot of things happening on SharePoint-Community.net (and, usually at the same time!). We have regular SPChats, competitions, whitepapers and lots of other cool content! We needed ways to highlight the best so that visitors are immediately alerted to the latest and greatest. The new Tiles allows us to do that.
They look nice! Hopefully you will agree that the Tiles look much cooler and far more in-line with Microsoft’s new metro look.
Sponsored Tiles. To make the community more engaging we always try to offer cool prizes, such as tablets, tickets, courses and free software licenses. We also have hosting and running costs. Someone needs to pay for all the cool goodies 😉 To provide something of real value to our sponsors we now intend to offer a “sponsored tile”. (If you are interested in sponsoring a tile, please speak with Mark Jones or Vlad Catrinescu.

What do you think ?

As always, let us know what you think. Any ideas to further improve them? Can you help us out and Tweet this discussion so we can gauge other opinion ?

Thanks to Stefan Bauer

The Tiles were designed by Stefan Bauer who is one of our Community Reps. Big thanks to him!

?width=750

(Visited 314 times, 1 visits today)

Add a Comment

12 Answers

1 2 3 Next »

score 0 · Answer 1 · 2013-10-28T21:00:00+00:00

Wow this looks great! I was able to create or at least gather all the right pieces Well Almost!

My code see below creates a Metro Style using Content Editor Web Part its really easy all have to do is drop the code in the CEWP. But the requirment that I need to fullfill is that the Metro Titles should only show Document Libraries not everything else. Do any of know how to achieve this? I thought about using ListofList or GetItem approach but was not sucessful. Any help would be great!

<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:ddwrt2=”urn:frontpage:internal” >
<xsl:output method=”html” version=”1.0″ encoding=”UTF-8″ indent=”yes” />
<xsl:param name=”CreateLabel”></xsl:param>
<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row[not(@__spHidden = ‘true’) and not(contains(@__spDefaultViewUrl, ‘_catalogs’))]” />
<!– Could use and __spOnQuickLaunch=”True” –>
<xsl:variable name=”RowCount” select=”count($Rows)” />
<xsl:variable name=”IsEmpty” select=”$RowCount = 0″ />

<xsl:template match=”/” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”>
<xsl:choose>
<xsl:when test=”$IsEmpty”>
</xsl:when>
<xsl:otherwise>

.micon {
cursor: pointer;
margin: 0 !important;
position: absolute;
right: 3px;
top: 3px;
width: auto;
}
.title {
cursor: pointer;
text-decoration: none;
bottom: 10px;
color: #FFFFFF;
left: 5px;
line-height: 100%;
position: absolute;
text-align: left !important;
}
.title:hover {
cursor: pointer;
text-decoration: none;
border: 0 none !important;
box-shadow: none !important;
margin: 3px !important;
}
.subtitle {
cursor: pointer;
text-decoration: none;
line-height: 14px;
font-size:11px;
position: absolute;
top: 4px;
color: #FFFFFF;
left: 5px;
}
.listcnt
{
cursor: pointer;
text-decoration: none;
line-height: 14px;
font-size:12px;
position: absolute;
bottom: 10px;
color: #FFFFFF;
right: 5px;
}
#tile-7 {
background: #54A7AE repeat scroll 0 0;
height: 103px;
left: 0;
line-height: 103px;
position: absolute;
top: 0;
width: 215px;
}
#tile-7 img {
max-height: 103px;
max-width: 215px;
}
#tile-7 .title {
font-size: 26px;
}
#tile-8 {
background: #5A5BAF repeat scroll 0 0;
height: 102px;
left: 0;
line-height: 102px;
position: absolute;
top: 113px;
width: 215px;
}
#tile-8 img {
max-height: 102px;
max-width: 215px;
}
#tile-8 .title {
font-size: 25px;
}
#tile-11 {
background: #D35A47 repeat scroll 0 0;
height: 65px;
left: 225px;
line-height: 65px;
position: absolute;
top: 0;
width: 140px;
}
#tile-11 img {
max-height: 65px;
max-width: 140px;
}
#tile-11 .title {
font-size: 16px;
}
#tile-12 {
background: #DB881B repeat scroll 0 0;
height: 65px;
left: 375px;
line-height: 65px;
position: absolute;
top: 0;
width: 140px;
}
#tile-12 img {
max-height: 65px;
max-width: 140px;
}
#tile-12 .title {
font-size: 16px;
}
#tile-4 {
background: #89A83E repeat scroll 0 0;
height: 140px;
left: 225px;
line-height: 140px;
position: absolute;
top: 75px;
width: 290px;
}
#tile-4 img {
max-height: 140px;
max-width: 290px;
}
#tile-4 .title {
font-size: 35px;
}
#tile-2 {
background: #723CA2 repeat scroll 0 0;
height: 215px;
left: 525px;
line-height: 215px;
position: absolute;
top: 0;
width: 440px;
}
#tile-2 img {
max-height: 215px;
max-width: 440px;
}
#tile-2 .title {
font-size: 54px;
}
#tile-3 {
background: #753069 repeat scroll 0 0;
height: 160px;
left: 0;
line-height: 160px;
position: absolute;
top: 225px;
width: 330px;
}
#tile-3 img {
max-height: 160px;
max-width: 330px;
}
#tile-3 .title {
font-size: 40px;
}
#tile-9 {
background: #5DABB2 repeat scroll 0 0;
height: 75px;
left: 0;
line-height: 75px;
position: absolute;
top: 395px;
width: 160px;
}
#tile-9 img {
max-height: 75px;
max-width: 160px;
}
#tile-9 .title {
font-size: 19px;
}
#tile-10 {
background: #7FA02E repeat scroll 0 0;
height: 75px;
left: 170px;
line-height: 75px;
position: absolute;
top: 395px;
width: 160px;
}
#tile-10 img {
max-height: 75px;
max-width: 160px;
}
#tile-10 .title {
font-size: 19px;
}
#tile-1 {
background: #1E5588 repeat scroll 0 0;
height: 245px;
left: 340px;
line-height: 215px;
position: absolute;
top: 225px;
width: 420px;
}
#tile-1 img {
max-height: 245px;
max-width: 420px;
}
#tile-1 .title {
font-size: 51px;
}
#tile-5 {
background: #52A6AD repeat scroll 0 0;
height: 123px;
left: 770px;
line-height: 123px;
position: absolute;
top: 225px;
width: 195px;
}
#tile-5 img {
max-height: 123px;
max-width: 195px;
}
#tile-5 .title {
font-size: 25px;
}
#tile-6 {
background: #DC8E27 repeat scroll 0 0;
height: 112px;
left: 770px;
line-height: 112px;
position: absolute;
top: 358px;
width: 195px;
}
#tile-6 img {
max-height: 112px;
max-width: 195px;
}
#tile-6 .title {
font-size: 24px;
}
</style> <div id=”place” style=”left: 0px; top: 0px”>
<div id=”wrapper1″>

<xsl:for-each select=”$Rows”>
<xsl:sort select=”@__spRootFolderUrl” order=”ascending” />

<xsl:if test=”position() < 13″>
<!– order by __spLastItemModifiedDate __spItemCount __spDefaultViewUrl __spTitle __spImageUrl __spSchemaXml –>

<xsl:if test=”position() = last() and not(position() = 12)” >
<xsl:call-template name=”filler”>
<xsl:with-param name=”from” select=”position() + 1″ />
<xsl:with-param name=”until” select=”13″/>
</xsl:call-template>

</xsl:if>

</xsl:for-each>

</div>
</div>
</xsl:otherwise>
</xsl:choose>

</xsl:template>

<xsl:template name=”filler”>
<xsl:param name=”from”/>
<xsl:param name=”until”/>
<xsl:choose>
<xsl:when test=”$from < $until”>
<div id=”{concat(’tile-‘, $from)}” style=”background-color:#ddd”><img src=”/_layouts/images/createcontent.gif” class=”micon” /><a href=”/_layouts/create.aspx” title=”{$CreateLabel}”><div class=”title”><xsl:value-of select=”$CreateLabel” /></div></a></div>
<xsl:call-template name=”filler”>
<xsl:with-param name=”from” select=”$from + 1″ />
<xsl:with-param name=”until” select=”$until”/>
</xsl:call-template>
</xsl:when>
</xsl:choose>
</xsl:template>

</xsl:stylesheet>

(Visited 1 times, 1 visits today)

score 0 · Answer 2 · 2013-10-01T23:44:00+00:00

The tiles look great. I was able to use the Promoted Links App to create my own custom tile sets in our SharePoint 2013 implementation. No code required! I’ll be deploying it as a navigational app across the farm. This is a great feature to demo on mobile browsers. Thanks for sharing the idea!

(Visited 1 times, 1 visits today)