2 This is part of the VimFx documentation.
3 Copyright Simon Lydell 2015.
4 See the file README.md for copying conditions.
9 It is possible to change the style of VimFx’s hint markers, help dialog and
12 1. Copy rules from [style.css] into [userChrome.css] or a new [Stylish] style.
14 2. Make sure that the following code is at the top of the file:
17 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
20 It makes sure that your CSS only affects the browser chrome and not web
23 3. Adjust the rules to your likings. Make sure to end all declarations with
24 `!important` so that they override VimFx’d default styles properly.
26 If you use `userChrome.css` you need to restart Firefox for your changes to take
27 effect, while Stylish applies them instantly.
29 [style.css]: ../extension/skin/style.css
30 [userChrome.css]: http://kb.mozillazine.org/UserChrome.css
31 [Stylish]: https://addons.mozilla.org/firefox/addon/stylish/
35 Making small adjustments to hint markers:
38 #VimFxMarkersContainer .marker {
39 font-size: 1.2em !important; /* Larger text. */
40 text-transform: lowercase !important; /* Lowercase text. */
41 opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
45 To make the hint markers look like they did in version 0.5.x:
48 /* Warning: This might slow hint generation down! */
49 #VimFxMarkersContainer .marker {
50 padding: 1px 2px 0 2px !important;
51 background-color: #FFD76E !important;
52 border: solid 1px #AD810C !important;
53 border-radius: 2px !important;
54 box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.3) !important;
55 font-size: 12px !important;
56 color: #302505 !important;
57 font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans" !important;
58 font-weight: bold !important;
59 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
61 #VimFxMarkersContainer .marker--matched,
62 #VimFxMarkersContainer .marker-char--matched {
63 color: #FFA22A !important;
67 Making the address bar red when in ignore mode (you may substiute “ignore” with
71 #main-window[vimfx-mode="ignore"] #urlbar {
72 background: red !important;
76 (While speaking of highlighting the current mode, you might be interested in
77 reading about the [the `modeDisplayChange` event].)
79 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event