2

I've developed a custom HTML menu that I'd love to deploy to SharePoint. The two working files are:

Index

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Intranet</title>
        <meta name="description" content="Intranet Testing">        
        <link rel="stylesheet" href="css/a_main.css">
    </head>
    <body>
        <div class="header-container">
            <h1>Testing Environment</h1>
        </div>

        <div class="main-container">
        <div class="tileContainer"></div>

        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
            </footer>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script type="text/javascript" content="application/javascript" src="js/tiles.js"></script>
        <script type="text/javascript">

        $(function(){
            $('.tileContainer').hide().fadeIn(1000);

            $('.tileContainer').tiles({
               'width'     : 150, // width of the tile
               'height'    : 100, // height of the tile
               'align'     : 'center', // align the text and icon either 'left' or 'center'. There is no right.
               'textColour': '#ffffff', // colour of the text
               'colour'    : '#2b92b1', // tile colour
               'rolloverColour' : '#a2d614', // colour of the bottom border
               'clickColour'    : '#a2d614', // colour the tile turns when the user clicks the tile
               'columns'   : 0, // how many tiles are set till it starts a new row
               'iconsPath' : 'img/tiles/', // path to where all the icons are on the server. It needs the slash on the end.
               'effect'    : 'fadeIn', // Doesn't really do anything yet... I'll get to it.
               'tile'      : [{
                        'label' : 'Square 01 tile', // Text label
                        'link'  : 'google.com', // Link to apply to tile (optional)
                        'icon'  : 'windows.png' // Icon to use (optional)
                        },{
                        'label' : 'Square 02',
                        'link'  : '',
                        'icon'  : ''
                        },{
                        'label' : 'Square 03',
                        'link'  : 'reddit.com',
                        'icon'  : ''
                        },{
                        'label' : 'Square 04',
                        'link'  : '',
                        'icon'  : ''
                        }
                        ,{
                        'label' : 'Square 05',
                        'link'  : '',
                        'icon'  : ''
                        }
               ]
           });

        });

        </script>
    </body>
</html>

Tiles.js

// TILES JS v1.0 //


jQuery.fn.extend({
    tiles: function(args, callback){

        var tileArray = args['tile'];
        var iconFolder = args['iconsPath'];
        var parentElement = $(this);
        var columns = args['columns'];
        var columnCount = 0;

        parentElement.html('<ul class="tileList"></ul>');

        $.each(tileArray, function(key, value){
            var icon = "";
            if(tileArray[key]['icon'].length >= 1){
                icon = '<img class="tileIcon" src="'+iconFolder+tileArray[key]['icon']+'" />';
            }
            parentElement.children('.tileList').append('<li class="tile">'+icon+'<p class="tileText">'+tileArray[key]['label']+'</p></li>');

            var link = "";
            if(tileArray[key]['link'].length >= 1){
                link = '<a class="tileLink" href="'+tileArray[key]['link']+'"></a>';
                parentElement.find('.tile').last().wrapInner(link);
            }

            var align = "";
            if(args['align'] == 'center'){
                parentElement.find('.tile').last().find('.tileText').addClass('tileTextCenter');
                parentElement.find('.tile').last().find('.tileIcon').addClass('tileIconCenter');
            }

            columnCount++;

            if(columnCount === columns){
                parentElement.children('.tileList').append('<br clear="all" />');
                columnCount = 0;
            };



        });

        parentElement.children('.tileList').append('<br clear="all" />');
        $('head').append('<style>.tileList .tile {-webkit-transition: border-bottom 100ms ease-out, height 100ms ease-out;-moz-transition: border-bottom 100ms ease-out, height 100ms ease-out;-o-transition: border-bottom 100ms ease-out, height 100ms ease-out;transition: border-bottom 100ms ease-out, height 100ms ease-out;width: 100px;height: 100px;overflow: hidden;background-color: rgb(77,144,215);position: relative;color: rgb(255,255,255);border-bottom: 0px solid rgb(6, 182, 219);float: left;margin: 0 2px 2px 0;display: block;}.tileList .tileText {position: absolute;margin: 0;bottom: 0px;text-align: left;padding: 5px;line-height: 1em;color: #ffffff;text-decoration: none;}.tileList .tileText.tileTextCenter {position: absolute;display: block;width: 90%;text-align: center;padding: 5px 5%;}.tileIconCenter{margin: 0 auto;display: block;}.lt-ie9 .tileList .tileText {position: absolute;margin: 20px;bottom: 0px;text-align: left;padding: 5px;line-height: 1em;}.tileList .tile:hover {-webkit-transition: border-bottom 100ms ease-out, height 100ms ease-out;-moz-transition: border-bottom 100ms ease-out, height 100ms ease-out;-o-transition: border-bottom 100ms ease-out, height 100ms ease-out;transition: border-bottom 100ms ease-out, height 100ms ease-out;border-bottom: 10px solid rgb(6, 182, 219);height:90px;cursor: pointer;}.tileList .tile:active, .tileList .tileIcon:active{background-color: rgb(6, 182, 219);cursor: pointer;}.ie .tileList .tileText:active {background-color: rgb(6, 182, 219);} /*////////////////////////*/ .tileList .tile{ width:'+args['width']+'px; height:'+args['height']+'px; background-color:'+args['colour']+';}  .tileLink { display: block; height: 100%; width: 100%; } .tileList .tile:hover{ height: '+(args['height']-10)+'px; border-bottom: 10px solid '+args['rolloverColour']+';}</style>');

        callback = 'hi';
        return callback;
    }
})

I've opened my homepage in SharePoint designer and I'm trying to work out how to migrate what I've created in the HTML above, into the SharePoint page - but the format is totally different. There are no head tags, no body tags - I'm lost! Is this even possible to deploy?

6

The header and footer (the chrome) of SharePoint and most Asp.Net websites is defined in a master page. For SharePoint 2013 this is by default the seattle.master.

My tip is to create your own master page by taking a copy of the Seattle.master, or using a Delegate control to insert your control.

Create SharePoint master page : http://msdn.microsoft.com/en-us/library/dn205273.aspx

Delegate controls: http://www.fivenumber.com/understanding-sharepoint-delegate-control/

There are more information regarding both approaches both here and scattered over the web.

A not so smooth solution could otherwise be to use JavaScript to move your menu to the correct place in the DOM

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.