How do you show the Keyboard *symbols* on my own confluence pages?

[Barry Keown]

This question is in reference to Atlassian Documentation: Confluence Wiki Markup

How do you show the Keyboard *symbols* on my own confluence pages?

Like the nice ones shown here: https://jira.atlassian.com/secure/ViewKeyboardShortcuts!default.jspa

[Barry Keown]

Thanks @Milo Grika for the swift reply.

I'm a relative newbie on Confluence editing, and have given this a go.

On editing my Confluence page, I proceeded to...

1. INSERT -->Other Macros --> search for  'CSS' --> Select 'CSS Stylesheet'
2. Pasted in your text as above into the CSS Stylesheet that appeared
3. INSERT -->Other Macros --> search for 'HMTL' --> found some suitable results and tried selecting 'HMTL comment
4. Pasted in  '<kbd><kbd>K</kbd></kbd>' into the HTML Comment that appeared
5. Save the page
   
   
   Result = Nothing new appears on the page.

Am i doing the wrong thing?

How does one 'edit the look and feel' please? 

Thanks for your help

[Milo Test]

First off, you need to use the HTML and exactly the HTML macro. The HTML macro is disabled by default and has to be manually enabled:

image2015-11-12 9:1:14.png --> Add-ons --> image2015-11-12 9:3:2.png --> Confluence HTML Macros --> image2015-11-12 9:4:42.png --> HTML --> Enable

Look and Feel changes can be done both Space specifically or site wide:

Site: image2015-11-12 9:1:14.png --> LOOK AND FEEL --> Stylesheet

Space: Space tools --> Look and Feel --> Stylesheet

image2015-11-12 9:1:14.png

image2015-11-12 9:8:46.png

image2015-11-12 9:3:2.png

image2015-11-12 9:4:42.png

[Milo Test]

This is done with a combination of CSS and HTML.

Start with a CSS macro (or edit the Look and Feel):

kbd > kbd {
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  border-radius: 3px;
  padding: .1em .7em;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  background-color: ;
  display: inline-block;
  margin: 0 .1em;
  white-space: nowrap;
  font-size: 1em;
}

Then wrap the key letters and words in HTML:

<kbd><kbd>K</kbd></kbd>

image2015-11-11 16:16:35.png

This will give the same look:

image2015-11-11 16:18:32.png

image2015-11-11 16:18:32.png

image2015-11-11 16:16:35.png