Study: Icons

Last modified by Vincent Massol on 2024/02/26 17:51

 XWiki
 Design
 Completed

Description

Icons Development Study

CSS usage

Attachments - Add another file

<input type="button" value="Add another file" class="attachmentActionButton add-file-input"/>

attachments.css

 
.add-file-input {
background-image:url(/xwiki/resources/icons/silk/textfield_add.gif);
background-position:2px top;
margin-left:10px;
}

Edit Section

<span class="edit_section">
[
<a href="/xwiki/bin/edit/Main/WebHome?xpage=wysiwyg&section=1" title="Edit section: Welcome to your wiki" style="text-decoration: none;">edit</a>
]
</span>

toucan.css

.edit_section a {
 background:transparent url(images/black-edit.png) no-repeat scroll left top;
 ...
}

Dashboard

<li class="xitem xunderline xhighlight page">
   <div class="xitemcontainer">        
      <div class="modifiedPage">
         <a title="Version 1.1. Last modification 2009/08/03 12:29." href="/xwiki/bin/view/XWiki/SheetClass">Sheet Class</a>  
      </div>
   </div>
</div>

toucan.css

ul.xlist li.space {
background-image:url(../../resources/icons/silk/folder.gif);
}

ul.xlist li.page {
background-image:url(../../resources/icons/silk/page_white_text.gif);
}

LiveTable - Document Index

<td class="actions"><a href="/xwiki/bin/view/XWiki/CopyDocument?sourcedoc=xwiki%3AXWiki.AdminExportSheet" class="action actioncopy">copy</a>
</td>

livetable.css

tbody.xwiki-livetable-display-body td a.actioncopy {
 background-image:url(/xwiki/resources/icons/silk/page_white_copy.gif);
}

IMG usage

Blog

<div class="blog-entry-toolbox">
<a class="blog-tool-hide" title="Hide this blog post from other users." href="http://localhost:8080/xwiki/bin/save/Blog/BlogIntroduction?Blog.BlogPostClass_0_hidden=1&comment=Hidden%20entry&ajax=1">
<img class="icon-manage" alt="hide " src="/xwiki/bin/download/Blog/BlogStyle/hide.png"/>
</a>
...
</div>

Categories

<li>
  <a title="" href="/xwiki/bin/view/Blog/CategoryRss?xpage=plain&amp;category=Blog.News">
    <img alt="RSS" src="/xwiki/skins/albatross/icons/black%2Drss%2Dmini.png"/>
  </a>
  <span class="wikilink"><a href="/xwiki/bin/view/Blog/News">News (1)</a></span>
</li>

Delete Group

 
DeleteGroup.png

<td class="manage">
  <img src="/xwiki/resources/js/xwiki/usersandgroups/img/clear.png" title="Delete" class="icon-manage"/>
</td>

 

Tags:
    

Get Connected