Custom inline Icons and/or Emojis and TOC panels

Help / Discuss
1

Pretty new to using XWiki. Is it possible to use custom inline icons or emojis when writing content for a page? I’m writing documentation for a tool where a lot of functions are represented by icons without descriptors or text, and it’s nice to be able to include an example of the button that I’m telling users to look for with an icon/emoji that’s an exact match. E.g., “Double-click the Data folder :open_file_folder:”

Had a second quick question. Not especially familiar with velocity scripts, but would it possible to create a secondary panel that includes the Table of Contents consisting of the headers for the page that the user is currently on? Inserting the TOC directly onto the page with a macro tends to disrupt the layout of bulleted lists, tables, and images, which rely on visual consistency.

2

If those are icons you use in your interface you might want to rely on an icon theme.
If you’d rather not set all of this up, you can still use an image, with syntax just like those: [[image:AppWithinMinutes.ClassEditSheet@bulletcross.png]] or [[image:AppWithinMinutes.ClassEditSheet@bulletcross.png||style="display:inline-block"]].

Had a second quick question. Not especially familiar with velocity scripts, but would it possible to create a secondary panel that includes the Table of Contents consisting of the headers for the page that the user is currently on? Inserting the TOC directly onto the page with a macro tends to disrupt the layout of bulleted lists, tables, and images, which rely on visual consistency.

It’s possible, you can add macros in Panels :slight_smile: See Table of Contents in a Right Panel

Have a good day!
Lucas C.

3

Thanks! This helps. I got the TOC working – the only downside is that, for some reason, the bullet points aren’t appearing at all :frowning:

As for the icons, the workaround you recommended with the image syntax sounds good. Is there a way I can upload all of my icons somewhere such that they can be applied to any page? Or do the icon pngs need to be attachments to each individual page? For instance, if I attach an image called test.png to page A, is there a way that I will be able to use [[image:test.png||style="display:inline-block"]] on a page B and have it pull the same image? Currently, it seems like it’s page-specific, and using that syntax fails to pull the image if the particular image isn’t attached to the page in question.

If someone could help with one other thing, that’d be greatly appreciated!! I’m looking into solutions for formatting keystrokes. For instance, the keyboard shortcuts page here: XWiki Keyboard Shortcuts (XWiki.org) are formatted to resemble keys. I’ve looked at the source of that page, but can’t quite figure out how to replicate it. The table seen here uses statuses as a way of formatting: Comprehensive guide on XWiki’s keyboard shortcuts - XWiki. Neither of these seem to work on my pages, and I imagine I’m missing an extension or something?

4

It can probably be fixed with a custom StyleSheetExtension :slight_smile:

You need to provide the path to the image on the other page, see the XWiki Syntax documentation about images.

In the example I provided earlier, I used an icon that’s attached to another page (AppWithinMinutes.ClassEditSheet)when adding my icon to the Sandbox page.

If I understood correctly, you want the little rectangle around the key name, that kinda look like keycaps?

Activate the advanced user mode, and you should be able to easily see objects on every page (via the object edit mode). There’s a styleSheet extension on that page that provides extra CSS to style all blocks with the class .key that are generated in the source :slight_smile:
Onboarding tutorial on stylesheet extensions
For reference, the code in the SSX on https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/KeyboardShortcuts is:

.keyboard td:first-of-type {
  width: 20%;
}

.keyboard td {
  border: none;
  line-height: 2em;
  vertical-align: top;
}

.keyboard .description {
  line-height: 1.4em;
  max-width: 50em;
  *width: 50em; /* IE7 */
}

.keyboard .shortcut {
  display: inline-block;
  *display: inline; /* IE7 */
  font-weight: bold;
  white-space: nowrap;
}

.keyboard .shortcut p {
  *display: inline; /* IE7 */
}

.key {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #fafafa;
  background: -moz-linear-gradient(270deg , #fff 70%, #EFEFEF) repeat scroll 0 0 transparent;
  *background-color: #fafafa;
  border: 1px solid #ddd;
  display: inline-block;
  *display: inline; /* IE7 */
  min-width: 10px;
  padding: 4px 8px;
  *line-height: 2em; /* IE6 */
  text-align: center;
}