Mark pdf, word, excel files in search results

Ah, so no built-in way. Thanks.

I figured out a way in CSS using :before and :after, although I'm still debating the pros and cons of this method.

I pasted relevant images into the screen layout directory, and to make sure the images appear in RH and get included in the build, I created fake html tags in the screen layout css (I suppose I could have used baggage file, too).

/* fake tags so the images appear in RH, which doesn't seem to know about content urls yet */
rh-word {
  background-image: url('word.png');
}
rh-pdf {
  background-image: url('PDF.gif');
}

Then I created a complex selector for the search results, to detect ".pdf" or ".doc" in the hyperlink. I had to use the developer console to figure out what the output code was doing:

/* find ".doc" or ".pdf" inside the href value and set an image before the a tag. Add a little padding so it's separate from the link text. */
.wSearchResultItem a[href*=".doc"]:before {
  content: url('word.png');
  padding-right: 5px;
}
.wSearchResultItem a[href*=".pdf"]:before {
  content: url('PDF.gif');
  padding-right: 5px;
}

I also had to change the div which displays the text to display: inline-block, otherwise the image was pushed into a separate paragraph. I had to set this on both .wSearchResultTitle and .wSearchResultTitleHover.

This is with RH11, Multiscreen HTML5 in a simple test project, targeting desktop output only. I haven't tried in my live merged output yet. I also haven't tried in Responsive HTML5, nor looking at phone or tablet output, so no idea if this would work in those environments.

Regards,

Amber