Front Legend (.keyborder) height

[ArmynC]

How I can modify the Front Legend div height?

This variant do nothing: .keyborder { height: 100px; } but if I edit this one in browser's console (inspect) it does work.

PS: 1) How I can edit the [Top-Center-Bottom Legend] (div) box color (idependent from the rest of the key's colors & with different colors for more keys, not the same everywhere) ? 2) How can I edit the sides (Front Legend+left+right+up) of the buttons colors (to get them the same as the background)?

• I tried with an div but it changes all to the same color, I want to set them with their own colors...

[ijprest]

I'm not really certain what you're trying to accomplish, but I'd avoid editing .keyborder, since that'll affect a lot of stuff that you probably don't want to change. The front legends are .keylabel9, .keylabel10, and .keylabel11.

All the sizes are computed based on the width/height of the key and the key's profile, and specified directly on the element itself. If you want to override it, you'll have to use !important to override the normal CSS cascade rules, e.g., .keylabel10 { height: 100px !important; }.

1. You should be able to choose independent colors for each label with the color-pickers next to each input field. Or did you mean something else?
2. I'm not 100% certain what you're trying to do... can you post a screenshot/mockup?

[ArmynC]

What I want to achieve (example through inspect mode):

(1) & (2)

(1) I want the sides of the key to be the same as the background of the keyboard and to set different colours for more keys (in the center box). (2) I want a higher height for the Front Legend div.. the default size is cutting some symbols..

PS: One more question... If I try to put a new font.. all the emojies/icons are going to be presented as empty squares (display error). How I can "bypass" this? PS2: There should be a "picker ui" that allows you to edit every div [left side, top side, bottom side, right side, center side] aspect (height, width etc.)

[ijprest]

For (1), the editor does everything natively (using the 'properties' tab) except the "transparent" key sides, but you can do that with 'custom styles' (.keyborder { background-color: transparent !important; }). Here's an example.

[ArmynC]

Thanks, at (1) works (first time I tried with a color, didin't knew about transparent) ...

But at (2) I tried .keylabel10 { height: 100px !important; } and it does not work, the .keyborder { height: 100px !important; } worked but it did mess some keys from numpad (the center box is comes over front legend)

Also any advice for custom font -emoji display error-?

[ijprest]

For (2) (and PS2), ultimately we'd probably want to support some sort of custom profile (#209).

For now, you can use CSS. I think it would probably be better to shrink the "keytop" part of the key, rather than trying to make the sides bigger, so as to prevent alignment problems if you had a second row of keys. You could do this with CSS:

.keytop { height: 38px !important; }
.keylabel9, .keylabel10, .keylabel11 { margin-top: -3px;}

Default height of 1u keys is 42px (for DCS/normal profiles), so the first rule shrinks this to 38px (-4px). The second rule shifts the side labels (label9/10/11) up by 2px (default is -1px, so new value is -3px) to keep it centered.

(This won't work well if you have any keys that are > 1u tall...)

[ijprest]

To set a custom font in such a way as to not break character-picker emojis, see my response to #241.

[ArmynC]

Yeah, got everything done :+1:

Using a font example: @import url(http://fonts.googleapis.com/css?family=Fredoka+One); .keylabel0, .keylabel1, .keylabel2, .keylabel3, .keylabel4, .keylabel5, .keylabel6, .keylabel7, .keylabel8, .keylabel9, .keylabel10, .keylabel11 { font-family: 'Fredoka One'; }

Thanks :)