Wiki source code of Standard Icon Classes
Last modified by Lucas Charpentier on 2024/01/16 12:06
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | Icon Types: |
 |
2.5 | 2 | |
 |
4.5 | 3 | * A. [[Clickable icons>>xwiki:Documentation.DevGuide.StandardIconClasses||anchor="clickableIcons"]] |
| |
1.1 | 4 | ** standalone icons, independent of surrounding text, clickable, link/action associated per icon |
| |
4.5 | 5 | * B. [[Decorative icons>>xwiki:Documentation.DevGuide.StandardIconClasses||anchor="decorativeIcons"]] |
| |
1.1 | 6 | ** text accompanied by background images, non individual clickable, link/action associated per whole text+icon |
| 7 | |||
 |
4.1 | 8 | = (% id="clickableIcons" %)A. //Type//: Clickable icons(%%) = |
| |
1.1 | 9 | |
| 10 | * 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 | ||
| 11 | ** using ##<a href=''/>## links | ||
| 12 | *** using ##<... class=''/>## + ##.css## or ##ssx## | ||
| 13 | *** using ##<img src=''/>## | ||
| 14 | ** using ##<input />## form actions | ||
| 15 | *** using ##<input class=''/>## + ##.css## or ##ssx## | ||
| 16 | *** using ##<input type='image' src=''/>## | ||
| 17 | * //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 | ||
 |
5.1 | 18 | * //Note//: although in the CSS-capable browsers clickable actions will be displayed just as icons, please don't forget to add ##title##, ##alt## attributes, or use a .sr-only workaround to describe the functionality, according to our [[HTML codestyle>>doc:dev:Community.CodeStyle.XhtmlCssCodeStyle.WebHome]]. This is also useful when the icons are missing (older text browsers). |
| |
1.1 | 19 | |
| |
4.1 | 20 | == (% id="iconClass" %) A1. //Standard//: ##.icon## class(%%) == |
| |
1.1 | 21 | |
| 22 | {{warning style="background-color: #C2D1F0"}} | ||
| 23 | Standard: ##.icon## | ||
| 24 | {{/warning}} | ||
| 25 | |||
| |
2.5 | 26 | * Styles added by [[this commit>>https://github.com/xwiki/xwiki-platform/commit/0c05d5a7b7bed298fd04da9059359517556052d3]] |
| |
1.1 | 27 | * Class used in conjunction with ##<img/>## tag |
| 28 | |||
| |
2.5 | 29 | ===== Example ===== |
| 30 | |||
| |
1.1 | 31 | [[image:iconA1.png]] |
| 32 | |||
| |
2.5 | 33 | ===== HTML ===== |
| 34 | |||
| 35 | {{code language="html"}} | ||
| |
1.1 | 36 | <a href="..."> |
| 37 | <img class="icon" title="RSS feed for wiki updates" alt="(RSS)" src="$xwiki.getSkinFile('icons/xwiki/rss-medium.png')"/> | ||
| 38 | </a> | ||
| 39 | {{/code}} | ||
| 40 | |||
| |
2.5 | 41 | ===== CSS ===== |
| 42 | |||
| |
1.1 | 43 | {{code language="css"}} |
| 44 | .icon { | ||
| 45 | vertical-align: middle; | ||
| 46 | } | ||
| 47 | {{/code}} | ||
| 48 | |||
| |
4.1 | 49 | == (% id="iconButtonClass" %) A2. //Standard//: ##input.icon-button## + ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## classes(%%) == |
| |
1.1 | 50 | |
| 51 | {{warning style="background-color: #C2D1F0"}} | ||
| |
5.1 | 52 | Standard: ##input.icon-button## |
| |
1.1 | 53 | Types: ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## |
| 54 | {{/warning}} | ||
| 55 | |||
 |
3.1 | 56 | * Styles added by [[XWIKI-7463>>https://jira.xwiki.org/browse/XWIKI-7463]] |
| |
1.1 | 57 | * Classes used in conjunction with ##input## buttons |
| 58 | |||
| |
2.5 | 59 | ===== Example ===== |
| 60 | |||
| |
1.1 | 61 | [[image:iconA2.png]] |
| 62 | |||
| |
2.5 | 63 | ===== HTML ===== |
| 64 | |||
| |
1.1 | 65 | {{code language="html"}} |
| 66 | <input type="button" class="icon-button remove-button" value="Delete" title="Delete this file" /> | ||
| 67 | {{/code}} | ||
| 68 | |||
| |
2.5 | 69 | ===== CSS ===== |
| 70 | |||
| |
1.1 | 71 | {{code language="css"}} |
| 72 | input.icon-button { | ||
| 73 | background: transparent none center center no-repeat; | ||
| |
5.1 | 74 | border: 0 none; |
| 75 | font-size: 80%; | ||
| |
1.1 | 76 | height: 16px; |
| 77 | margin: 0; | ||
| 78 | padding: 0; | ||
| |
5.1 | 79 | text-indent: -9999px; |
| |
1.1 | 80 | width: 16px; |
| 81 | } | ||
| 82 | |||
| |
5.1 | 83 | .icon-button.add-button { |
| 84 | background-image: url('$xwiki.getSkinFile(icons/silk/add.png)); | ||
| |
1.1 | 85 | } |
| |
5.1 | 86 | |
| |
1.1 | 87 | .icon-button.remove-button { |
| 88 | background-image: url('$xwiki.getSkinFile(icons/silk/cross.png)); | ||
| 89 | } | ||
| 90 | |||
| |
5.1 | 91 | .icon-button.accept-button { |
| 92 | background-image: url('$xwiki.getSkinFile(icons/silk/accept.png)); | ||
| |
1.1 | 93 | } |
| |
5.1 | 94 | |
| 95 | .icon-button.search-button { | ||
| |
1.1 | 96 | background-image: url('$xwiki.getSkinFile(icons/xwiki/search.png)); |
| 97 | } | ||
| 98 | {{/code}} | ||
| 99 | |||
| |
4.1 | 100 | = (% id="decorativeIcons" %)B. //Type//: Decorative icons(%%) = |
| |
1.1 | 101 | |
| 102 | * 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 | ||
| 103 | |||
| |
4.1 | 104 | == (% id="hasIconClass" %) B1. //Standard//: ##.hasIcon## class(%%) == |
| |
1.1 | 105 | |
| 106 | {{warning style="background-color: #C2D1F0"}} | ||
| |
5.1 | 107 | Standard: ##.hasIcon## |
| |
1.1 | 108 | Types: ##.iconRSS## |
| 109 | {{/warning}} | ||
| 110 | |||
| |
2.5 | 111 | * Styles added by [[this commit>>https://github.com/xwiki/xwiki-platform/commit/150baea0f8ae36a5f3eac301cf74700a3478cbdc]] |
| |
1.1 | 112 | * Classes used when background-images are needed and a single action/link is available |
| 113 | |||
| |
2.5 | 114 | ===== Example ===== |
| 115 | |||
| |
1.1 | 116 | [[image:iconB1.png]] |
| 117 | |||
| |
2.5 | 118 | ===== HTML ===== |
| 119 | |||
| |
1.1 | 120 | {{code language="html"}} |
| 121 | <a href="..." class="hasIcon iconRSS">RSS feed for search on [xwiki]</a> | ||
| 122 | {{/code}} | ||
| 123 | |||
| |
2.5 | 124 | ===== CSS ===== |
| 125 | |||
| |
1.1 | 126 | {{code language="css"}} |
| 127 | .hasIcon { | ||
| 128 | background: none no-repeat scroll 0 0 transparent; | ||
| 129 | padding-left: 20px; | ||
| 130 | } | ||
| 131 | |||
| 132 | .iconRSS { | ||
| 133 | background-image: url("$xwiki.getSkinFile('icons/silk/feed.png')"); | ||
| 134 | } | ||
| 135 | {{/code}} | ||
| 136 | |||
| |
2.5 | 137 | == B1.1. //Custom case//: Action Menus == |
| |
1.1 | 138 | |
| 139 | {{warning}} | ||
| |
5.1 | 140 | Standard: ##.hasIcon## |
| 141 | Custom: ##.actionmenu .hasIcon## | ||
| |
1.1 | 142 | Custom: ##.actionmenu## (##.tmCreate##, ##.tmWiki##, ##.tmSpace##, ##.tmPage##, ##.tmEdit##, etc.) (36 classes) |
| 143 | {{/warning}} | ||
| 144 | |||
| 145 | * //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 | ||
| |
3.1 | 146 | * Styles added by [[XSCOLIBRI-146>>https://jira.xwiki.org/browse/XSCOLIBRI-146]] |
| |
1.1 | 147 | |
| |
2.5 | 148 | ===== Example ===== |
| 149 | |||
| |
1.1 | 150 | [[image:iconB11.png]] |
| 151 | |||
| |
2.5 | 152 | ===== HTML ===== |
| 153 | |||
| 154 | {{code language="html"}} | ||
| |
1.1 | 155 | <div class="actionmenu"> |
| 156 | <div class="hasIcon tmWiki"><a href="." class="tme">Wiki</a> ... </div> | ||
| 157 | </div> | ||
| 158 | {{/code}} | ||
| 159 | |||
| |
2.5 | 160 | ===== CSS ===== |
| 161 | |||
| |
1.1 | 162 | {{code language="css"}} |
| 163 | /* Menu overrides standard .hasIcon class with custom styles */ | ||
| 164 | .actionmenu .hasIcon { | ||
| 165 | background: none no-repeat scroll 0 3px transparent; | ||
| 166 | padding: 0; | ||
| 167 | } | ||
| 168 | .actionmenu .hasIcon a.tme { | ||
| 169 | padding-left: 20px; | ||
| 170 | } | ||
| 171 | ... | ||
| 172 | .actionmenu .tmWiki { | ||
| |
2.4 | 173 | background-image: url("$xwiki.getSkinFile('icons/silk/world.png')"); |
| |
1.1 | 174 | } |
| 175 | ... | ||
| 176 | {{/code}} | ||
| 177 | |||
| |
2.5 | 178 | = Other Links = |
| |
1.1 | 179 | |
| 180 | * More XWiki icon [[research>>http://incubator.myxwiki.org/xwiki/bin/view/Standards/Icons]] | ||
| |
3.1 | 181 | * IconThemes idea [[XWIKI-8501>>https://jira.xwiki.org/browse/XWIKI-8501]] |
| |
4.5 | 182 | * [[Special CSS Classes>>xwiki:Documentation.DevGuide.FrontendResources.SpecialCSSClasses]] |
