Wiki source code of Standard Icon Classes
Version 1.1 by Ecaterina Moraru (Valica) on 2012/09/10
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Icon Types: | ||
| 2 | * A. [[Clickable icons>>#clickableIcons]] | ||
| 3 | ** standalone icons, independent of surrounding text, clickable, link/action associated per icon | ||
| 4 | * B. [[Decorative icons>>#decorativeIcons]] | ||
| 5 | ** text accompanied by background images, non individual clickable, link/action associated per whole text+icon | ||
| 6 | |||
| 7 | == (%id='clickableIcons'%)A. //Type//: Clickable icons == | ||
| 8 | |||
| 9 | * There are several ways to have standalone clickable icons, by using links or form inputs; and by placing a direct image or using it as a background-image | ||
| 10 | ** using ##<a href=''/>## links | ||
| 11 | *** using ##<... class=''/>## + ##.css## or ##ssx## | ||
| 12 | *** using ##<img src=''/>## | ||
| 13 | ** using ##<input />## form actions | ||
| 14 | *** using ##<input class=''/>## + ##.css## or ##ssx## | ||
| 15 | *** using ##<input type='image' src=''/>## | ||
| 16 | * //Note//: if the icon is on the same row as the text, there might be some problems with the text/icon alignment. Depending on the markup used for the icon there are several manual solutions (float, fixed heights, vertical-aligment, etc.). You can use the standard ##.icon## class to assure the alignment | ||
| 17 | * //Note//: although in the CSS-capable browsers clickable actions will be displayed just as icons, please don't forget to add ##title##, ##alt## attributes, the ##text-indent: -9999px## accessibility workaround, etc. to describe the functionality also when the icons are missing (older text browsers) | ||
| 18 | |||
| 19 | === (%id='iconClass'%) A1. //Standard//: ##.icon## class === | ||
| 20 | |||
| 21 | {{warning style="background-color: #C2D1F0"}} | ||
| 22 | Standard: ##.icon## | ||
| 23 | {{/warning}} | ||
| 24 | |||
| 25 | * Styles added by https://github.com/xwiki/xwiki-platform/commit/0c05d5a7b7bed298fd04da9059359517556052d3 | ||
| 26 | * Class used in conjunction with ##<img/>## tag | ||
| 27 | |||
| 28 | [[image:iconA1.png]] | ||
| 29 | |||
| 30 | ====== HTML ====== | ||
| 31 | {{code}} | ||
| 32 | <a href="..."> | ||
| 33 | <img class="icon" title="RSS feed for wiki updates" alt="(RSS)" src="$xwiki.getSkinFile('icons/xwiki/rss-medium.png')"/> | ||
| 34 | </a> | ||
| 35 | {{/code}} | ||
| 36 | |||
| 37 | ====== CSS ====== | ||
| 38 | {{code language="css"}} | ||
| 39 | .icon { | ||
| 40 | vertical-align: middle; | ||
| 41 | } | ||
| 42 | {{/code}} | ||
| 43 | |||
| 44 | === (%id='iconButtonClass'%) A2. //Standard//: ##input.icon-button## + ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## classes === | ||
| 45 | |||
| 46 | {{warning style="background-color: #C2D1F0"}} | ||
| 47 | Standard: ##input.icon-button## | ||
| 48 | Types: ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## | ||
| 49 | {{/warning}} | ||
| 50 | |||
| 51 | * Styles added by http://jira.xwiki.org/browse/XWIKI-7463 | ||
| 52 | * Classes used in conjunction with ##input## buttons | ||
| 53 | |||
| 54 | [[image:iconA2.png]] | ||
| 55 | |||
| 56 | ====== HTML ====== | ||
| 57 | {{code language="html"}} | ||
| 58 | <input type="button" class="icon-button remove-button" value="Delete" title="Delete this file" /> | ||
| 59 | {{/code}} | ||
| 60 | |||
| 61 | ====== CSS ====== | ||
| 62 | {{code language="css"}} | ||
| 63 | input.icon-button { | ||
| 64 | background: transparent none center center no-repeat; | ||
| 65 | border: 0 none; | ||
| 66 | font-size: 80%; | ||
| 67 | height: 16px; | ||
| 68 | margin: 0; | ||
| 69 | padding: 0; | ||
| 70 | text-indent: -9999px; | ||
| 71 | width: 16px; | ||
| 72 | } | ||
| 73 | |||
| 74 | .icon-button.add-button { | ||
| 75 | background-image: url('$xwiki.getSkinFile(icons/silk/add.png)); | ||
| 76 | } | ||
| 77 | |||
| 78 | .icon-button.remove-button { | ||
| 79 | background-image: url('$xwiki.getSkinFile(icons/silk/cross.png)); | ||
| 80 | } | ||
| 81 | |||
| 82 | .icon-button.accept-button { | ||
| 83 | background-image: url('$xwiki.getSkinFile(icons/silk/accept.png)); | ||
| 84 | } | ||
| 85 | |||
| 86 | .icon-button.search-button { | ||
| 87 | background-image: url('$xwiki.getSkinFile(icons/xwiki/search.png)); | ||
| 88 | } | ||
| 89 | {{/code}} | ||
| 90 | |||
| 91 | == (%id='decorativeIcons'%)B. //Type//: Decorative icons == | ||
| 92 | |||
| 93 | * Decorative icons are implemented using background-images that accompany text elements, they are non-individual clickable and together with the text element have a single link/action associated | ||
| 94 | |||
| 95 | === (%id='hasIconClass'%) B1. //Standard//: ##.hasIcon## class === | ||
| 96 | |||
| 97 | {{warning style="background-color: #C2D1F0"}} | ||
| 98 | Standard: ##.hasIcon## | ||
| 99 | Types: ##.iconRSS## | ||
| 100 | {{/warning}} | ||
| 101 | |||
| 102 | * Styles added by https://github.com/xwiki/xwiki-platform/commit/150baea0f8ae36a5f3eac301cf74700a3478cbdc | ||
| 103 | * Classes used when background-images are needed and a single action/link is available | ||
| 104 | |||
| 105 | [[image:iconB1.png]] | ||
| 106 | |||
| 107 | ====== HTML ====== | ||
| 108 | {{code language="html"}} | ||
| 109 | <a href="..." class="hasIcon iconRSS">RSS feed for search on [xwiki]</a> | ||
| 110 | {{/code}} | ||
| 111 | |||
| 112 | ====== CSS ====== | ||
| 113 | {{code language="css"}} | ||
| 114 | .hasIcon { | ||
| 115 | background: none no-repeat scroll 0 0 transparent; | ||
| 116 | padding-left: 20px; | ||
| 117 | } | ||
| 118 | |||
| 119 | .iconRSS { | ||
| 120 | background-image: url("$xwiki.getSkinFile('icons/silk/feed.png')"); | ||
| 121 | } | ||
| 122 | {{/code}} | ||
| 123 | |||
| 124 | === B1.1. //Custom case//: Action Menus === | ||
| 125 | |||
| 126 | {{warning}} | ||
| 127 | Standard: ##.hasIcon## | ||
| 128 | Custom: ##.actionmenu .hasIcon## | ||
| 129 | Custom: ##.actionmenu## (##.tmCreate##, ##.tmWiki##, ##.tmSpace##, ##.tmPage##, ##.tmEdit##, etc.) (36 classes) | ||
| 130 | {{/warning}} | ||
| 131 | |||
| 132 | * //Note//: Action menus code was written before the creation of the more generic ##.hasIcon## class. Eventually all the specific actionmenu classes should be rewritten to be more generic | ||
| 133 | * Styles added by http://jira.xwiki.org/browse/XSCOLIBRI-146 | ||
| 134 | |||
| 135 | [[image:iconB11.png]] | ||
| 136 | |||
| 137 | ====== HTML ====== | ||
| 138 | {{code}} | ||
| 139 | <div class="actionmenu"> | ||
| 140 | <div class="hasIcon tmWiki"><a href="." class="tme">Wiki</a> ... </div> | ||
| 141 | </div> | ||
| 142 | {{/code}} | ||
| 143 | |||
| 144 | ====== CSS ====== | ||
| 145 | {{code language="css"}} | ||
| 146 | /* Menu overrides standard .hasIcon class with custom styles */ | ||
| 147 | .actionmenu .hasIcon { | ||
| 148 | background: none no-repeat scroll 0 3px transparent; | ||
| 149 | padding: 0; | ||
| 150 | } | ||
| 151 | .actionmenu .hasIcon a.tme { | ||
| 152 | padding-left: 20px; | ||
| 153 | } | ||
| 154 | ... | ||
| 155 | .actionmenu .tmWiki { | ||
| 156 | background-image: url("/xwiki/resources/icons/silk/world.png"); | ||
| 157 | } | ||
| 158 | ... | ||
| 159 | {{/code}} | ||
| 160 | |||
| 161 | == Other Links == | ||
| 162 | |||
| 163 | * More XWiki icon [[research>>http://incubator.myxwiki.org/xwiki/bin/view/Standards/Icons]] | ||
| 164 | * IconThemes idea [[XE-697>>http://jira.xwiki.org/browse/XE-697]] | ||
| 165 | * [[Special CSS Classes>>platform:DevGuide.SpecialCSSClasses]] |
