3 Replies Latest reply on Jun 21, 2016 9:28 AM by tyishikawa

    css for a custom view tile


      Here's the html i am using for creating a custom tile


      The above is showing the following tile




      Can someone tell me what classes I need to include to get the word wrapping and the background color to go away. I am also not sure why the header is not showing correctly despite the h4 tag being assigned the right class.Ideally  it should look as below.


        • Re: css for a custom view tile

          can you please share the HTML ?

            • Re: css for a custom view tile
                  <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
                <link rel="stylesheet" href="/" type="text/css" media="all">
                <link rel="stylesheet" href="/" type="text/css" media="all">
                <link rel="stylesheet" href="/" type="text/css" media="all">
                <link rel="stylesheet" href="/" type="text/css" media="all">
              <!-- <link class="j-custom-theme" rel="stylesheet" href="/resources/styles/palette-51026/1461673623217.css" type="text/css" media="all">
              <!-- <link rel="stylesheet" type="text/css" href="/sb-tile2/stylesheets/main.css">
                  <script src="/__public__/javascripts/jquery-1.8.3.js"></script>
                  <script src="/sb-tagtile1/javascripts/view.js"></script>
                  <title>Tag Tile App View</title>
                .jsb-tile-header h4 {
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                overflow: hidden;
                position: relative;
                display: inline-block;
                white-space: nowrap;
                max-width: 280px;
                text-overflow: ellipsis;
                margin: 0 0 5px;
                line-height: 1em;
                color: #EB8700;
                body {
                   background-color: white;
                width: 275px;
                #sectionid {
                  width: 275px;
               <header class="jsb-tile-header">
                  <h4 class="font-color-meta">Tagged Content</h4>
                <section id="sectionid" class="j-tile-body j-tile-list clearfix">
                <ul id="ullist1" class="contentList j-icon-list">
                <footer class="j-tile-footer clearfix"><a href="/groups/shan-tile-test/content" class=" j-footer-link">All content</a>


              And JS


              jive.tile.onOpen(function(config, options) {
                //By default you get Datecreated Desc so most recent will show first
                var params = {
                      count : 10,
                      "fields" : "@all",
                tag: 'leadership_blog'
                var request = osapi.jive.corev3.contents.get(params);
                request.execute(function(response) {
                for (var i = 0; i < response.list.length; i++) {
                var url = JSON.stringify(response.list[i].resources.html.ref);
                var url1 = response.list[i].resources.html.ref;
                var date1 = JSON.stringify(response.list[i].published);
                var permalink = JSON.stringify(response.list[i].permalink);
                var permalink1 = response.list[i].permalink; //not there for docs
                var subject = response.list[i].subject;
                var icon = response.list[i].iconCss;
                console.log("URL = " + JSON.stringify(response.list[i].resources.html.ref));
                console.log("PUBLISHED = " + JSON.stringify(response.list[i].published));
                console.log("PERMALINK = " + permalink);
                console.log("ICONCSS = " + response.list[i].iconCss);
                var ul = document.getElementById("ullist1");
                var li = document.createElement("li");
                li.setAttribute('class', "listItem showIcon");
                       var a = document.createElement("a");
                a.setAttribute('class', "linkText showDescription");
                a.innerHTML = subject;
                       //var textforlink = document.createTextNode(subject);
                       a.setAttribute('href', url1);
                a.setAttribute('target', "_top");
                var htmlNode = document.createElement('span');
                htmlNode.setAttribute('class', icon + " jive-icon-med");
                //  .append($('<a>').attr('href',permalink)
                //  .append($('<span>')
                //  .append(date1))));
                //  $('#wrapper ul').append($('<li>')
            • Re: css for a custom view tile

              After some researching and dabbling with the code, I solved the header issue. The title is actually supposed to be set in the config, as the value of a key called "title".