Promoted links - Apply a different style instead of Square Tiles

Question

I need to display a navigation element in a page other than Global and Left Navigation, so the idea blinked in my mind is Promoted Links, very useful feature of SharePoint 2013.

But the challenge is, I dont want my promoted links to be displayed with usual Square tiles. I need an effect of rounded rectangular button tab instead of Square tiles.

Any ideas?

Answer 1

Thank Amal for your idea, I have done it using Client Side Rendering. Please find the steps below,

Create a new view in the Promoted Links list using All Promoted links view

Link the below JS code to the list view webpart using JS Link

(function () {
    var option = {
        Templates: {
            Item: CustomItem
        }
    }
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(option);
})();

function CustomItem(ctx) {
var ret="<a style='float:left;padding:5px 10px;border-radius: 10px;background-color: #999999;color:#fff;min-width: 100px;text-align: center;margin-right:7px;text-decoration:none;' href='"+ctx.CurrentItem["LinkLocation"]+"'>"+ctx.CurrentItem.Title+"</a>";
return ret;
}