none
How to create SharePoint OOB tiles? RRS feed

  • Question

  • Hi,

    I want to create a SharePoint tiles with navigation dynamically using Client scripting as shown in the site home page with hover effect. Any suggestions?

    Thanks

    Morpheus

    Monday, January 5, 2015 11:31 AM

Answers

  • Hi,

    Please find below the HTML and required CSS to form tiles like Promotional Links webpart, according to your post you can form this dynamically at client side.

    <style type="text/css">
    .blue {
    	background-color: rgba(63, 133, 196, 0.95);
    }
    .coloredBox {
    	overflow: hidden;
    	float: left;
    	width: 140px;
    	margin-left: 10px;
    	text-align: center;
    	height: 140px;
    }
    .contectsPart {
    	margin: 20px 0;
    	/*border-top: 1px solid #898989;*/
    	display: block;
    }
    .coloredBox a {
    	text-align: left;
    	font-size: 14px;
    	color: #fff;
    	text-decoration: none;
    	padding: 9px;
    	display: block;
    	;
    	top: 00px;
    	height: 142px;
    	background: transparent url("../../SiteCollectionImages/transparent.png") repeat left top; /* add your transparent image path */
    	;
    	
    	transition-property: margin-top;
    	transition-timing-function: linear;
    	transition-delay: 0s;
    	transition: all 0.2s ease-in-out;
    	font-size : 8pt;
    	/* Safari */ 
    	-webkit-transition-property: margin-top;
    	-webkit-transition-duration: 0.2s;
    	-webkit-transition-timing-function: linear;
    	-webkit-transition-delay: 0s;
    }
    .coloredBox div:hover {
    	padding: 100px;
    }
    .coloredBox img {
    	width: 98px;
    	height: 76px;
    	margin-top: 20px;
    }
    .coloredBox a:hover {
    	text-align: left;
    	font-size: 16px;
    	color: #fff;
    	text-decoration: none;
    	padding: 9px;
    	display: block;
    	;
    	top: 0px;
    	height: 142px;
    	background: transparent url("transparent.png") repeat left top; /* add your transparent image path */
    	;
    	
    	margin-top: -98px;
    	transition-property: margin-top;
    	transition: all 0.2s ease-in-out;
    	transition-timing-function: linear;
    	transition-delay: 0s;
    	/* Safari */ 
    	-webkit-transition-property: margin-top;
    	-webkit-transition-duration: 0.2s;
    	-webkit-transition-timing-function: linear;
    	-webkit-transition-delay: 0s;
    }
    </style>
    
    
    <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Share Your site</a>
    		<span>Custom text 1</span>
    		<span>Custom text 2</span>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Working on a deadline line?</a>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Add Lists, Libraries and Other apps</a>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">What's your style</a>
        </div>



    Thanks, Shakir | Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.
    • Marked as answer by Morpheus_SP Tuesday, January 6, 2015 2:05 PM
    Tuesday, January 6, 2015 11:15 AM
  • If you are looking at a custom solution to create metro themes on top of SharePoint, then leverage metro ui components. It's easy to setup and open source as well.

    http://metroui.org.ua/


    Please mark the replies as answers if they help or unmark if not.

    • Marked as answer by Morpheus_SP Tuesday, January 6, 2015 2:06 PM
    Tuesday, January 6, 2015 11:19 AM

All replies

  • Hi,

     According to your post, I understand that you want to customize suite bar in sharepoint 2013. Is it? 

    If yes, please refer the below link which help you to resolve your issue.

    http://academy.bindtuning.com/customize-sharepoint-2013-and-office-365-suite-bar/

    If not, please let us know. 


    Sekar - Our life is short, so help others to grow

    Whenever you see a reply and if you think is helpful, click "Alternate TextVote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Alternate TextMark As Answer

    Monday, January 5, 2015 11:38 AM
  • No SekThang, I have clearly mentioned site collection home page Out-Of-Box navigation tiles.

    Any link referring to it.

    Thanks

    Monday, January 5, 2015 11:55 AM
  • Hi Morpheus,

    According to your post and reply are you expecting like the tiles as shown in image below? If yes you have to develop it using HTML and CSS.

    

    Monday, January 5, 2015 12:14 PM
  • try these links:

    http://blogs.microsoft.co.il/choroshin/2012/08/11/sharepoint-2013-create-a-metro-live-tile-using-metrojs-jsrender-and-the-new-rest-api/

    http://www.smartdata.ca/Pages/subSite.aspx

    http://www.ashokraja.me/post/Metro-UI-style-Live-Tiles-Web-Part-with-Metro-JS-and-jQuery-in-SharePoint-2013.aspx

    http://spjsblog.com/2013/11/13/sharepoint-2013-style-tiles/

    Monday, January 5, 2015 12:32 PM
  • Hi Morpheus_SP,

    As per your need, it is pretty easy to create that using "SharePoint Promoted Link" App. It is Out of the box and dont need any coding.

    Below video will describe how to do it.

    Promoted Links SharePoint 2013

    Hope this will help you.

    Thanks!


    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Monday, January 5, 2015 3:19 PM
  • Hi Sudip,

    Thanks for the link I am aware of it, I am looking for some custom solution because of my requirement, the OOB Promoted Links webpart list has some limited fields as per our requirement. Is there any custom solution for this.

    Thanks

    • Marked as answer by Morpheus_SP Tuesday, January 6, 2015 2:05 PM
    • Unmarked as answer by Morpheus_SP Tuesday, January 6, 2015 2:05 PM
    Tuesday, January 6, 2015 9:48 AM
  • Hi,

    Yes thanks for making it clear to my question, I am looking for some custom solution as mentioned to Sudip. Is there any custom solution for this.

    Thanks

    Tuesday, January 6, 2015 9:49 AM
  • Hi,

    Please find below the HTML and required CSS to form tiles like Promotional Links webpart, according to your post you can form this dynamically at client side.

    <style type="text/css">
    .blue {
    	background-color: rgba(63, 133, 196, 0.95);
    }
    .coloredBox {
    	overflow: hidden;
    	float: left;
    	width: 140px;
    	margin-left: 10px;
    	text-align: center;
    	height: 140px;
    }
    .contectsPart {
    	margin: 20px 0;
    	/*border-top: 1px solid #898989;*/
    	display: block;
    }
    .coloredBox a {
    	text-align: left;
    	font-size: 14px;
    	color: #fff;
    	text-decoration: none;
    	padding: 9px;
    	display: block;
    	;
    	top: 00px;
    	height: 142px;
    	background: transparent url("../../SiteCollectionImages/transparent.png") repeat left top; /* add your transparent image path */
    	;
    	
    	transition-property: margin-top;
    	transition-timing-function: linear;
    	transition-delay: 0s;
    	transition: all 0.2s ease-in-out;
    	font-size : 8pt;
    	/* Safari */ 
    	-webkit-transition-property: margin-top;
    	-webkit-transition-duration: 0.2s;
    	-webkit-transition-timing-function: linear;
    	-webkit-transition-delay: 0s;
    }
    .coloredBox div:hover {
    	padding: 100px;
    }
    .coloredBox img {
    	width: 98px;
    	height: 76px;
    	margin-top: 20px;
    }
    .coloredBox a:hover {
    	text-align: left;
    	font-size: 16px;
    	color: #fff;
    	text-decoration: none;
    	padding: 9px;
    	display: block;
    	;
    	top: 0px;
    	height: 142px;
    	background: transparent url("transparent.png") repeat left top; /* add your transparent image path */
    	;
    	
    	margin-top: -98px;
    	transition-property: margin-top;
    	transition: all 0.2s ease-in-out;
    	transition-timing-function: linear;
    	transition-delay: 0s;
    	/* Safari */ 
    	-webkit-transition-property: margin-top;
    	-webkit-transition-duration: 0.2s;
    	-webkit-transition-timing-function: linear;
    	-webkit-transition-delay: 0s;
    }
    </style>
    
    
    <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Share Your site</a>
    		<span>Custom text 1</span>
    		<span>Custom text 2</span>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Working on a deadline line?</a>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">Add Lists, Libraries and Other apps</a>
        </div>
        <div class="story-content coloredBox blue first" style="cursor: pointer;"> 
        	<img src="icons-member.png" alt=""> <a href="#" style="font-size: 16px;">What's your style</a>
        </div>



    Thanks, Shakir | Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.
    • Marked as answer by Morpheus_SP Tuesday, January 6, 2015 2:05 PM
    Tuesday, January 6, 2015 11:15 AM
  • If you are looking at a custom solution to create metro themes on top of SharePoint, then leverage metro ui components. It's easy to setup and open source as well.

    http://metroui.org.ua/


    Please mark the replies as answers if they help or unmark if not.

    • Marked as answer by Morpheus_SP Tuesday, January 6, 2015 2:06 PM
    Tuesday, January 6, 2015 11:19 AM
  • Hi Sundar,

    Is there any code to form this dynamically?

    Tuesday, January 6, 2015 2:08 PM
  • Hi Shakir,

    Is there any code to form this dynamically?
    Tuesday, January 6, 2015 2:09 PM