Can a single link be setup as an app or at least look like one?

I have a request to create a page with 6 different colored app boxes but each one will really just be a link to a different page. Is this possible? I am beginning to think I need to create these as just images and add them to a page then create a hyperlink from each image to the corresponding page.

Here is an image of what it may look like:

As always, any assistance will be greatly appreciated.

Thank you,

Doug

March 23rd, 2015 3:03pm
You could create a content editor web part and add these as simple html content.
Free Windows Admin Tool Kit Click here and download it now
March 23rd, 2015 4:24pm

Hi Doug,

You could make use of Promoted links in SharePoint 2013, it is a list with Tiles view which appears as your image and clickable. With standar view, you can easily add, edit, delete links in the list.

http://social.technet.microsoft.com/wiki/contents/articles/19622.sharepoint-2013-promoted-links-wrap-tiles.aspx

http://social.technet.microsoft.com/wiki/contents/articles/26522.everything-about-promoted-links-in-sharepoint-2013-change-size-wrap-view-handle-click-event-using-jquery.aspx

Also, you could use HTML code to create rectangle and make it clickable. Here is an example:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>CSSTest</title>
    <style type="text/css">
        .main{width:100px;}
        b.rounder{display:block;background: #FFF}
        b.rounder b{display:block;height:1px;overflow: hidden; background: #99cc33;}
        b.r1{margin: 0 1px}
        b.r2{margin: 0 2px}
        .content{height:22px;text-align:center; padding-top:10px; background: #99cc33;color:#fff;font-size:12px;}
   </style>
</head>

<body>
    <div class="main">
        <a href="http://www.bing.com">
            <b class="rounder"><b class="r2"></b><b class="r1"></b></b>
            <div class="content">Test</div>
            <b class="rounder"><b class="r1"></b><b class="r2"></b></b>
        </a>
    </div>
</body>
</html>

Regards,

March 24th, 2015 4:04am

Thank you...

Rebecca could you explain your solution a little please?  I am new to this kind of stuff and I sometimes need to know a bit more to understand it. 

I looked at the link you sent and I was wondering if that code would be in a hidden web part that has a path to a text file containing the code or if it would be added a different way.

Are you aware of any videos showing how to do this?  I didn't find any but I may not be searching properly/

Thanks,

Doug

Free Windows Admin Tool Kit Click here and download it now
March 24th, 2015 8:52am

Hi Doug,

You could add the code snippet to a Script Editor web part:

The code is the example for one rectangle, you need to improve the code base on this to meet your requirement.

If you are not good at development, you might refer to the first method in my last reply, and use Promoted Links list.

Regards,

March 24th, 2015 9:53pm

Hi,

The below is for your convenience:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .rounded-corners {
            width: 110px;
            height: 75px;                      
            display:table;
            border: 2px solid;
            border-color: #3F6162;
            border-radius: 18px;
            -moz-border-radius: 18px;
        }
        .rounded-corners-font {
            vertical-align: middle;
            display: table-cell;
            text-align:center;
            color: #fff;
            font-size: 18px;
            font-weight:200;
        }

        ul {
            margin: 0px;
            padding: 0px;
            width: 600px;
            height: 100px;
        }

        ul li {
            float: left;
            list-style-type: none;
            width: 125px;
            height: 60px;
        }        
    </style>

</head>

<body>  
    <ul>
        <li><div class="rounded-corners" style="background: #4F81BC;"><div class="rounded-corners-font">Knowledge Base 2013</div></div></li>
        <li><div class="rounded-corners" style="background: #366092;"><div class="rounded-corners-font">Community</div></div></li>
        <li><div class="rounded-corners" style="background: #61497B;"><div class="rounded-corners-font">Agency Site Admin List</div></div></li>
    </ul>
    <ul>
        <li><div class="rounded-corners" style="background: #17375E;"><div class="rounded-corners-font">Tips & Tricks</div></div></li>
        <li><div class="rounded-corners" style="background: #77933C;"><div class="rounded-corners-font">CWE Basics</div></div></li>
        <li><div class="rounded-corners" style="background: #E46C0B;"><div class="rounded-corners-font">FPO</div></div></li>
    </ul>
</body>
</html>

Please add the link per your requirement in <div class> label.

Regards,

Free Windows Admin Tool Kit Click here and download it now
March 26th, 2015 2:52am

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics