3 Replies Latest reply on May 2, 2016 7:05 AM by sbollap1

    css theme for the custom view

    sbollap1

      I have a custom tile. But, I would like to use the built in css classes to make it look like an out of the box jive tile.

       

      
      <html>
      <head>
          <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
          <link rel="stylesheet" type="text/css" href="/sb-tagtile1/stylesheets/main.css">
          <script src="/__public__/javascripts/jquery-1.8.3.js"></script>
          <script src="/sb-tagtile1/javascripts/view.js"></script>
          <title>Tile App View</title>
      </head>
      
      
      <body>
      
      
      <div class="js-tile-body j-tile-display">
      <header class="j-tile-header">
      <h4 id="tile-header-135857" class="font-color-meta">Tagged Content</h4>
      </header>
      <section class="j-tile-body  j-tile-list clearfix">
      <ul class="contentList j-icon-list">
      <li class="listItem showIcon">
      <a href="/community/functions/ehs/blog/2014/06/20/2000-days-without-lost-time-injury" class=" linkText showDescription ">
      <span class="jive-icon-med jive-icon-blog"></span>
      "2000 DAYS WITHOUT LOST TIME INJURY!!!"
      </a>
      </li>
      </ul>
      </section>
      </div>
      
      
      </body>
      </html>
      
      
      
      
      
      
      
      
      
      
      
      

      I tried to use the classes thinking the css would be added to every page, but doesn't look like its working. So, any thoughts on how I can get the css for lets say a list tile. Thank you in advance.

       

      I have included some of the stylesheet links in the head section looking at the viewsource/inspect element. and I seem to get some theme, but not getting all the theme. Looking to tell which ones exactly needed to be included

       

      <html>
      <head>
          <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
        <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-responsive.css" type="text/css" media="all">
        <link rel="stylesheet" href="/8.0.3.6eafe9c/resources/styles/exobjects-icons/jive-exobjects-icons.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 rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-customization-controls.css" type="text/css" media="all">
        <link rel="stylesheet" href="/8.0.3.6eafe9c/styles/jive-places.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-tagtile1/stylesheets/main.css">
          <script src="/__public__/javascripts/jquery-1.8.3.js"></script>
          <script src="/sb-tagtile1/javascripts/view.js"></script>
          <title>Tile App View</title>
      </head>
      
      
      
      

      Theme and UI/X Discussion

        • Re: css theme for the custom view

          The domain of the installed tile and Jive instance's CSS are going to be different. You'll need to set absolute paths and possibly deal with XSS issues.

            • Re: css theme for the custom view
              sbollap1

              I am trying to build a tile (internal) no service or anything. This will be for a self contained standalone add-on. Basically, I have a view.js with the following to get certain content

               

              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++) {
                console.log("URL = " + JSON.stringify(response.list[i].resources.html));
                console.log("PUBLISHED = " + JSON.stringify(response.list[i].published));
                }
                });
              
              };
              
              

               

              I want to know how to show the response (which is a list) I get within view.html in the same look and feel as a out of box tile. For example based on the content type I get like a blog if it is I show the blog icon and such.  If you can share some sample code it will be helpful.

            • Re: css theme for the custom view
              sbollap1

              I am trying to get the content url using the permalink field or the html field and show it as a <a href> in the custom view tile. and I am seeing the following error:  refused to display ...in a frame because it set 'X-frame-options' to 'SAMEORIGIN'. The url I am trying to show is an internal url.

               

              sameorigin.jpg

               

              Edit:

              I was able to workaround the above error by doing this

              var permalink1 = response.list[i].permalink;

              instead of var permalink = JSON.stringify(response.list[i].permalink);

              however, I have a new problem, when clicked on a link in the tile, its opening the content within that tile itself. instead of showing the content on the current window.

              Edit:

              I got the above working too by using target="_top". . Now, the only question is with getting the same look and feel for the tile. I am using the css classes and trying to match but some example would help me.