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

    css for a custom view tile

    sbollap1

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

       

      The above is showing the following tile

       

      tagtest.jpg

       

      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.

      tagtest1.jpg

        • Re: css for a custom view tile
          pushpendra.paliwal

          can you please share the HTML ?

            • Re: css for a custom view tile
              sbollap1
              <html>
              <head>   
                  <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
              
                <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-places.css" type="text/css" media="all">
                <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-base.css" type="text/css" media="all">
                <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive.css" type="text/css" media="all">
                <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-visor.css" 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>
              
                <style>
              
              
                .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;
                }
                </style>
              </head>
              
              
              <body>
              
              
               <header class="jsb-tile-header">
                  <h4 class="font-color-meta">Tagged Content</h4>
               </header>
              
                <section id="sectionid" class="j-tile-body j-tile-list clearfix">
                
                <ul id="ullist1" class="contentList j-icon-list">
                </ul>
                </section>
                
                
                <footer class="j-tile-footer clearfix"><a href="/groups/shan-tile-test/content" class=" j-footer-link">All content</a>
                </footer>
              
              
              
              
              </body>
              </html>
              
              
              
              
              

               

              And JS

               

              jive.tile.onOpen(function(config, options) {
              
              
                  $("#config_string").text(config["configString"]);
                  gadgets.window.adjustHeight();
              
                //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");
                a.appendChild(htmlNode);
                       li.appendChild(a);
                       ul.appendChild(li);
              
              
                //  .append($('<a>').attr('href',permalink)
                //  .append($('<span>')
                //  .append(date1))));
                //  $('#wrapper ul').append($('<li>')
              
              
                        gadgets.window.adjustHeight();
                }
                });
              
              });
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
            • Re: css for a custom view tile
              tyishikawa

              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".