2 Replies Latest reply: Jun 19, 2008 9:52 AM by 666705 RSS

    Adaptive Page Layouts: UI Corrections on Search/KD Pages

    666705
      This thread started as a "how to make search results look like google" but after getting more familiar with search I started to realize that the KD is (to a certain extent) disconnected from the search results look and feel and that both would have to be tweaked. Not only that, but there are great inconsistencies between the 2. SO! I'm going to add info here as I tweak...it isn't rocket science but each thing takes 20-30 minutes to debug and correct and I figure in might save someone a few minutes here or there.
      <BR><BR>

      Like at most companies, our users are always clamoring for us to make search more like google. With the release of 6.5 and adaptive page layouts it is pretty easy to make it "look" like google at least.

      <P>The first thing you'll need to adjust is your mainstyle.css file <BR>(<root> \ptimages\imageserver\plumtree\portal\private\css)
      <P><BR>
      To make the "Properties" link that purple'ish hue:<BR>
      .ali-search-results-modified a {
         <BR> color:#77c;<BR>
      }
      <BR><BR>
      To make the "Modified By" field green:<BR>
      .ali-search-results-modified {<BR>
         color:green;<BR>
          line-height:1.5em;<BR>
      }
      <BR><BR>
      To shift the results closer to the left side of the page:<BR>
      #ali-search-results {<BR>
          clear:both;<BR>
          float:left;<BR>
          width:85%;<BR>
          min-width:625px;<BR>
          margin:12px 0 0 4px;<BR>
          padding:0;<BR>
      }
      <BR><BR>
      To make the main link blue and the right size:<BR>
      .ali-kd-docs-title a {<BR>
           font-family:Arial, Helvetica, sans-serif;<BR>
           font-size:16;<BR>
           font-weight:none;<BR>
           color: #0000CD ;<BR>
           letter-spacing:0px;
      <BR>
           text-decoration:none;<BR>
      }
      <P><P>
      Once you get the colors right things still look a little "not quite google". The next set of changes will hopefully fix that a bit.
      <BR>
      <P>
      1) Move the file type icon to the right side of the result title<BR>
      Search for: p class="ali-kd-docs-title" <BR> within your searchresultslayout.html file and move the line that says
      <pt:core.html pt:tag="img" src="$result.icon" alt="$htmlEncodedName"/>
      from the start of that section to the end.


      <BR>
      <P>
      2) Add a space between search results<BR>
      Search in your searchresultslayout.html file for "ali-search-results-modified", go down about 10 lines and you should be at a close tr tag: this is the end of your results row and where you want to add the space. Add another TR like so:
      <tr><pt:core.comment><!-- The purpose of this TR is to add space between search entries --></pt:core.comment>
         <td colspan="2">img alt="" src="http://yourserver/imageserver/plumtree/images/spacer.gif" width="1" height="1" border="0" </td>
      </tr>
      <BR><BR>

      That will get your results pretty darn close to google and probably make your users quite happy.
      <BR>
      Post any extra tweaks that help! I could use some help here!

      --
      Edited by geoffgarcia at 06/19/2008 7:44 AM
        • 1. Fixing KD Pagination
          666705
          The KD Pagination is in a column vs the search results page where it is in a row at the very bottom of the page.
          This looks like an innocent mistake because the fix to make them identical involves moving a single close div tag!

          To make the pagination move to the bottom of the page and into a row (just like search does it) go into your knowledgedirectorylayout.html file and search for <div id="ali-kd-pagenav">
          directly above this is a close div tag for the id="ali-kd-documents". Simply move that close tag beneath the ali-kd-pagenav and restart your IIS and voila! just like search results:)
          • 2. Changing vertical bar on KD pages to look like google
            666705
            Between the docs and subfolders area of the KD there is a rather unsightly bar that I can only assume is meant to copy the bar between google results and their ads.
            However it got there it isn't hard to fix to look just like googles simple line.<BR>
            Within the mainstyle.css file you'll need to modify the ali-kd-documents part in particular removing the background components.
            In their place add: border-right:solid 1px #C9D7F1;<BR> while you are in there you should probably change the margin to something like: margin:0 0 0 4px;