# Styling for GUI instructions

With a graphical application like Blender, answers often require instructions that include navigating the interface. The standards recommend using <kbd> for this, but the current styling looks like a keyboard key and which is inappropriate (and not something we want to lose).

## Proposed solution:

Append the following to the blender.SE stylesheet:

em kbd {
font-size: 12px;
font-style: normal;
color: white;
background-color: rgba(25, 25, 25, 0.9);
border: 1px solid black;
box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
vertical-align: middle;
}

em kbd + kbd {
margin-left: -0.5em;
}

em kbd:after {
content: url("http://i.stack.imgur.com/naX0c.png");
display: inline-block;
margin: -3px 0 0 6px;
line-height: 0;
vertical-align: inherit;
}

em kbd:last-child:after {
content: none;
}


So we can use the following to markup interface interactions:

_<kbd>Add</kbd> <kbd>Mesh</kbd> <kbd>Cube</kbd>_


This'll result in it rendering similarly to Blender's own menus:

• This looks lovely. Let's hope it is possible. – iKlsR Aug 17 '13 at 20:20
• much much better to look at, but still looks like a pain to mark-up. – zeffii Aug 17 '13 at 20:55
• @zeffii Quite.. Though it's not that much more than the current way. (I always put <kbd></kbd>+ in the clipboard when I have to type long or multiple shortcuts :P) I do have a question though, is there a way with this to have separate looks for keyboard shortcuts and interface directions? Is such a separation of keyboard and interface considered necessary? – gandalf3 Aug 17 '13 at 21:10
• It would seem <samp> isn't allowed.. – iKlsR Aug 17 '13 at 21:18
• @iKlsR Was sure it was… Oh well, have updated the proposal. ;) – Aldrik Aug 17 '13 at 21:38
• @gandalf3 Yes, this'll leave current shortcut styling unchanged. – Aldrik Aug 17 '13 at 21:46
• @Aldrik +1 looks good to me :) though I'm not sure I understand "and not something we want to loose".. typo? – gandalf3 Aug 17 '13 at 22:27
• Question: what's the semantic reason for em? – wchargin Aug 17 '13 at 22:43
• @WChargin Mainly just trying to work within the Stackexchange limitations (lesser of the other evils). But I think it's acceptable to emphasis literal instructions. – Aldrik Aug 17 '13 at 23:42
• Okay, I understand that. Then, another question: I would propose em kbd { background-color: #5680C2;} and em kbd:last-child { background-color: #3F3F3F;} to match Blender's menu colors, the implication being that all but the last are selected (or including the last, if you want to remove the last-child if it makes more sense). For example: rendering in Chrome. – wchargin Aug 18 '13 at 0:51
• @WChargin I decided against it as I felt it lost the menu recognisability. Note if the community does want to go blue, Blender uses a subtle gradient and black text. – Aldrik Aug 18 '13 at 8:41
• my only slight issue with this is that despite the colours it actually reminds me of pre 2.5 interface, but I guess that's just because it's subjective. Would love to see several variations, extra spacing, padding, corner rounding etc. – Ray Mairlot Aug 19 '13 at 12:49
• @RayMairlot Here is a variant of WChargin's proposal with original colors and increased corner rounding, spacing, and padding. – gandalf3 Aug 22 '13 at 22:27
• @WChargin I would say that if we want the last one to be different, my personal preference would be to have the last one look like it is selected, rather than the other way around. – gandalf3 Aug 22 '13 at 23:44
• Is there any update on whether this will be possible? In the meantime, should we use <em><kbd> for forward compatibility? – wchargin Sep 14 '13 at 23:31

Here's a jsFiddle with my proposal.

Changes are all to reflect the Blender menus better:

• linear gradient for selected color
• decreased border-radius: it's really only aesthetic; the Blender menus are square
• changed border color to the actual color (#282828, not #000000)

I put the example in context with a paragraph (to show line height), a kbd tag (to contrast the two), and the full Blender.SE stylesheet, to make sure nothing interferes.

Regarding the text color: I know that Blender uses a black color, but white just seems a bit nicer on the eyes to me. What do you guys think?

(If you want to see the difference, open the link, in the CSS at top right, change color: white; to color: black; and press Run or CtrlEnter.)

• I guess the color will be a matter of personal preference.. I personally prefer the black. – gandalf3 Aug 19 '13 at 2:18
• @gandalf3 I could go with either one. – wchargin Aug 19 '13 at 3:27

So instead of asking others for iterations of designs I thought I would share my own, this is just an extension on the designs that others have done so far.

I haven't the skill to create these with css so I have just mocked this up in photoshop.

Firstly I have increased the spacing, or padding, between the text and the border of the box, I felt other designs were too squashed together. I also increased the gaps inbetween the boxes themselves, I don't think it's necessary that they touch, the arrow is enough to indicate they follow on from each other. I think this also helps to identify them as separate elements.

Actual size (drop shadows could probably be bigger at this size):

From the designs above my personal preference is number 8. While it doesn't use the traditional black of the blender menus I do feel it's slightly more readable (for me).

Number 9 is probably unnecessary, it has a slight bevel to try and imitate the blender menus more, but it's faint even at a larger size so it's largely pointless.

I don't know if the drop shadows are entirely necessary they are just another way of separating these 'menu paths' from the rest of the text. I think it's good to have the last element highlighted as blue just to clearly signify that that is the menu item/option you should be looking for. It uses a vertical gradient from light blue to dark blue using roughly the correct blender colours.

The font is the 'blender font' DejaVu Sans, I wasn't sure if other examples used this or not or whether it's even usable on the web. Certainly it's very clean to read.

Feel free to disagree with these points I know it's all very subjective. I also realise I haven't shown any iteration on padding or rounded edges, it can be very hard to judge very small details like that, but I look forward to your feedback/thoughts.

• Don't worry about CSS, we can handle that for you. These are rather large, please scale to the expected usage size for comparison. – Aldrik Aug 23 '13 at 13:30
• "roughly the correct blender colours" the exact ones, if you'd like them, are #7aa3ef (top) and #5680c1 (bottom). – wchargin Aug 25 '13 at 14:47

I love this idea, but I also think it should be use in addition to the tags. Reason being, sometimes we need to use kbd separately from menus for example.