Example-ListOfResults.png

Live example

See ListWebSearch

CSS

#searchResults{
clear: both;
display: table;
padding-top: 15px;
}
.resultItem{
display: block;
}
.resultContainer{
clear: both;
width: 100%;
}
.itemType{
float: left;
display: inline-block;
width: 3%;
}
.itemType .typeComment{
background:transparent url(/xwiki/resources/icons/silk/comment.gif) center right no-repeat;
display:inline-block;
width:16px;
height:16px;
}
.itemType .typeAttachment{
background:transparent url(/xwiki/resources/icons/silk/attach.gif) center right no-repeat;
display:inline-block;
width:16px;
height:16px;
}
.itemType .typePage{
background:transparent url(/xwiki/resources/icons/silk/page_white_text.gif) center right no-repeat;
display:inline-block;
width:16px;
height:16px;
}
.itemDescription{
float: left;
display: inline-block;
width: 82%;
}
.itemDescription a{
color: #39397F;
}
.itemDescription a:hover{
color: #39397F;
}
.itemDescription a:focus {
   outline: dotted 1px #000;
}
.itemTitle a{
color: #4d4d4d;
font-weight: bold;
font-size:130%;
}
.itemTitle a:hover{
color: #4d4d4d;
font-weight: bold;
font-size:130%;
}
.itemTitle a:focus {
   outline: dotted 1px #000;
}
a.itemAuthor:focus{
   outline: dotted 1px #000;
}
.itemLocation{
color: #888;
font-size:90%;
}
.itemLocation a.itemWiki , .itemLocation a.itemSpace, .itemLocation a.itemPage{}
.itemModifiers{
color: #888;
font-size:90%;
}
.itemContext em{
background-color:lemonChiffon;
padding:0;
margin: 0;
text-decoration: inherited;
}
.itemOthers{
font-size:80%;
}
.itemOthers .itemComments, .itemOthers .itemAttachments, .itemOthers .itemRating{
font-size:80%;
display:inline;
clear:none;
float:left;
padding-right: 5px;
}
.itemOthers .itemComments a{
background:transparent url(/xwiki/resources/icons/silk/comment.gif) center right no-repeat;
display:inline-block;
padding-right:16px;
}
.itemOthers .itemAttachments a{
background:transparent url(/xwiki/resources/icons/silk/attach.gif) center right no-repeat;
display:inline-block;
padding-right:16px;
}
.itemRating{
position:relative;
width:55px;
height:11px;
overflow:hidden;
margin:1px 0 0 0!important;
padding:0!important;
background-position:left top;
background-image:url(/xwiki/skins/flamingo/rating.png);
}
.itemRating .currentRating{
position:absolute;
top:0;left:0;
text-indent:-1000em;
height:11px;
line-height:11px;
outline:none;
overflow:hidden;
border:none;
background-image:url(/xwiki/skins/flamingo/rating.png);
z-index:1;
background-position:left center;
}
.itemRelevance{
float: left;
display: inline-block;
width: 15%;
text-align: right;
}
.relevance{
position:relative;
width:48px;
height:8px;
overflow:hidden;
list-style:none;
margin:5px 0 0 0!important;
padding:0!important;
background-position:left bottom;
background-image:url(/xwiki/skins/flamingo/relevance.png);
float:right;
}
.relevance .currentRelevance{
position:absolute;
top:0;left:0;
text-indent:-1000em;
height:8px;
line-height:8px;
outline:none;
overflow:hidden;
border:none;
background-image:url(/xwiki/skins/flamingo/relevance.png);
z-index:1;
background-position:left top;
}
.relevanceText{
float: right;
margin-right: 5px;
font-size:80%;
}
.resultSeparator{
display:block;
width:100%;
clear:both;
padding: 0;
margin: 0;
margin-bottom: 15px;
height: 1px;
}

HTML Code

<div id="searchResults">
    <div class="resultItem">
<div class="resultContainer">
<div class="itemType"><div class="typePage" title="Page"></div></div>
<div class="itemDescription">
<div class="itemTitle"><a href="">Release Notes for X<em>Wiki</em> Enterprise 1.2</a></div>
<div class="itemLocation">Located in <a href="{1}">{0}</a> &#187; <a href="{3}">{2}</a> &#187; <a href="{5}">{4}</a> <a href="" class="itemWiki" title="Wiki" >xwiki</a> > <a href="" class="itemSpace" title="Space">Main</a> > <a href="" class="itemPage" title="Page">ReleaseNotesXWikiEnterprise12</a></div>
<div class="itemModifiers">Modified by <span class="itemAuthor">{0}</span> on <span class="itemDate">{1}</span> <a href="" class="itemAuthor" title="Author">Sergiu Dumitriu</a> xe.search.item.date.on <span class="itemDate">31 Jan 2008</span></div>
<div class="itemContext">Lorem ipsum dolor sit amet, <em>Wiki</em> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </div>
<div class="itemOthers">
<span class="itemComments" title="Comment" ><a href="">3</a>,</span>
<span class="itemAttachments" title="Attachment"><a href="">7</a>,</span>
<span class="itemRating" title="Rating">
<span class="currentRating" style="width:20%;"></span>
</span>
</div>
</div>
<div class="itemRelevance">
<span class="relevance" title="Relevance"><span class="currentRelevance" style="width:45%;"></span></span>
<span class="relevanceText">45%</span>
</div>
<span class="resultSeparator"></span>
</div>
</div>
<div class="resultItem">
<div class="resultContainer">
<div class="itemType"><div class="typeComment" title="Comment"></div></div>
<div class="itemDescription">
<div class="itemTitle"><a href="">Eduard Moraru on 22 Oct 2008</a></div>
<div class="itemLocation">Located in <a href="{1}">{0}</a> &#187; <a href="{3}">{2}</a> &#187; <a href="{5}">{4}</a> <a href="" class="itemWiki" title="Wiki">xwiki</a> > <a href="" class="itemSpace" title="Space">Main</a> > <a href="" class="itemPage" title="Page">ReleaseNotes</a></div>
<div class="itemContext">very nice presentation </div>
<div class="itemOthers">
<span class="itemRating" title="Rating">
<span class="currentRating" style="width:30%;"></span>
</span>
</div>
</div>
<div class="itemRelevance">
<span class="relevance" title="Relevance"><span class="currentRelevance" style="width:100%;"></span></span>
<span class="relevanceText">100%</span>
</div>
<span class="resultSeparator"></span>
</div>
</div>
<div class="resultItem">
<div class="resultContainer">
<div class="itemType"><div class="typeAttachment" title="Attachment"></div></div>
<div class="itemDescription">
<div class="itemTitle"><a href="">XWiki Logo.png</a></div>
<div class="itemLocation">Located in <a href="{1}">{0}</a> &#187; <a href="{3}">{2}</a> &#187; <a href="{5}">{4}</a> <a href="" class="itemWiki" title="Wiki">xwiki</a> > <a href="" class="itemSpace" title="Space">Main</a> > <a href="" class="itemPage" title="Page">DesignPages</a></div>
<div class="itemModifiers">Posted by <span class="itemAuthor">{0}</span> on <span class="itemDate">{1}</span> <a href="" class="itemAuthor" title="Author">Sergiu Dumitriu</a> xe.search.item.date.on <span class="itemDate">31 Jan 2008</span></div>
</div>
<div class="itemRelevance">
<span class="relevance" title="Relevance"><span class="currentRelevance" style="width:60%;"></span></span>
<span class="relevanceText">60%</span>
</div>
<span class="resultSeparator"></span>
</div>
</div>
</div>

Dependencies

Icons

(Silk) comment.gif /xwiki/resources/icons/silk/comment.gif

(Silk) attach.gif /xwiki/resources/icons/silk/attach.gif

(Silk) page_white_text.gif /xwiki/resources/icons/silk/page_white_text.gif

rating.png rating.png

relevance.png relevance.png

Translations

xe.search.item.location=Located in
xe.search.item.modified=Modified by
xe.search.item.posted=Posted by
xe.search.item.date.on=on
xe.search.item.rating.title=Rating
xe.search.item.relevance.title=Relevance
xe.search.item.type.comment.title=Comment
xe.search.item.type.attachment.title=Attachment
xe.search.item.type.author.title=Author
xe.search.item.type.page.title=Page
xe.search.item.type.wiki.title=Wiki
xe.search.item.type.space.title=Space
Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected