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