documentation/styling.md

   1 # Styling
   2
   3 It is possible to change the style of VimFx’s hint markers (such as the font
   4 size), help dialog and button with CSS. In fact, using the techniques shown here
   5 you can re-style almost _any_ part of Firefox.
   6
   7 1. Copy stuff from the below examples or from [style.css] into [userChrome.css].
   8    You get far just by copying and pasting.
   9
  10 2. Since Firefox 69, you must set
  11    `toolkit.legacyUserProfileCustomizations.stylesheets` in `about:config` to
  12    `true`.
  13
  14 3. Make sure that the following code is at the top of the file:
  15
  16    ```css
  17    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  18    ```
  19
  20    It makes sure that your CSS only affects the browser UI and not web pages.
  21
  22 4. Adjust the CSS to your likings. Make sure to end lines with `!important;`, so
  23    that they override VimFx’s default styles properly.
  24
  25 If you use `userChrome.css` you need to restart Firefox for your changes to take
  26 effect. Since Firefox 69, you have to enable `userChrome.css` by setting
  27 `toolkit.legacyUserProfileCustomizations.stylesheets` to `true` in
  28 `about:config`.
  29
  30 [style.css]: ../extension/skin/style.css
  31 [userChrome.css]: http://kb.mozillazine.org/UserChrome.css
  32
  33
  34 ## Examples
  35
  36 Making small adjustments to hint markers (such as font size):
  37
  38 ```css
  39 #VimFxMarkersContainer .marker {
  40   font-size: 12px !important; /* Specific font size. */
  41   text-transform: lowercase !important; /* Lowercase text. */
  42   opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
  43 }
  44 ```
  45
  46 To make the hint markers look like they did in version 0.5.x:
  47
  48 ```css
  49 /* Warning: This might slow hint generation down! */
  50 #VimFxMarkersContainer .marker {
  51   padding: 1px 2px 0 2px !important;
  52   background-color: #FFD76E !important;
  53   border: solid 1px #AD810C !important;
  54   border-radius: 2px !important;
  55   box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.3) !important;
  56   font-size: 12px !important;
  57   color: #302505 !important;
  58   font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans" !important;
  59   font-weight: bold !important;
  60   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  61 }
  62 #VimFxMarkersContainer .marker--matched,
  63 #VimFxMarkersContainer .marker-char--matched {
  64   color: #FFA22A !important;
  65 }
  66 #VimFxMarkersContainer .marker--highlighted {
  67   background-color: #FFD76E !important;
  68 }
  69 ```
  70
  71 Making the location bar red when in Ignore mode (you may substitute “ignore”
  72 with any mode name below):
  73
  74 ```css
  75 #main-window[vimfx-mode="ignore"] #urlbar {
  76     background: red !important;
  77 }
  78 ```
  79
  80 (While speaking of highlighting the current mode, if you’re a [config file] user
  81 you might be interested in reading about the [the `modeDisplayChange` event].)
  82
  83 [config file]: config-file.md
  84 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event