2 This is part of the VimFx documentation.
3 Copyright Simon Lydell 2015, 2016.
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
10 button with CSS. In fact, using the techniques shown here you can re-style
11 almost _any_ part of Firefox.
13 1. Copy rules from [style.css] into [userChrome.css] or a new [Stylish] style.
15 2. Make sure that the following code is at the top of the file:
18 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
21 It makes sure that your CSS only affects the browser chrome and not web
24 3. Adjust the rules to your likings. Make sure to end all declarations with
25 `!important` so that they override VimFx’d default styles properly.
27 If you use `userChrome.css` you need to restart Firefox for your changes to take
28 effect, while Stylish applies them instantly.
30 [style.css]: ../extension/skin/style.css
31 [userChrome.css]: http://kb.mozillazine.org/UserChrome.css
32 [Stylish]: https://addons.mozilla.org/firefox/addon/stylish/
37 Making small adjustments to hint markers:
40 #VimFxMarkersContainer .marker {
41 font-size: 1.2em !important; /* Larger text. */
42 text-transform: lowercase !important; /* Lowercase text. */
43 opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
47 To make the hint markers look like they did in version 0.5.x:
50 /* Warning: This might slow hint generation down! */
51 #VimFxMarkersContainer .marker {
52 padding: 1px 2px 0 2px !important;
53 background-color: #FFD76E !important;
54 border: solid 1px #AD810C !important;
55 border-radius: 2px !important;
56 box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.3) !important;
57 font-size: 12px !important;
58 color: #302505 !important;
59 font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans" !important;
60 font-weight: bold !important;
61 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
63 #VimFxMarkersContainer .marker--matched,
64 #VimFxMarkersContainer .marker-char--matched {
65 color: #FFA22A !important;
69 Making the location bar red when in ignore mode (you may substitute “ignore”
70 with any mode name below):
73 #main-window[vimfx-mode="ignore"] #urlbar {
74 background: red !important;
78 (While speaking of highlighting the current mode, if you’re a [config file] user
79 you might be interested in reading about the [the `modeDisplayChange` event].)
81 [config file]: config-file.md
82 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event