documentation/styling.md

   1 <!--
   2 This is part of the VimFx documentation.
   3 Copyright Simon Lydell 2015, 2016.
   4 See the file README.md for copying conditions.
   5 -->
   6
   7 # Styling
   8
   9 It is possible to change the style of VimFx’s hint markers (such as the font
  10 size), help dialog and button with CSS. In fact, using the techniques shown here
  11 you can re-style almost _any_ part of Firefox.
  12
  13 1. Copy stuff from the below examples or from [style.css] into [userChrome.css]
  14    or a new [Stylish] style. You get far just by copying and pasting.
  15
  16 2. Make sure that the following code is at the top of the file:
  17
  18    ```css
  19    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  20    ```
  21
  22    It makes sure that your CSS only affects the browser UI and not web pages.
  23
  24 3. Adjust the CSS to your likings. Make sure to end lines with `!important;`, so
  25    that they override VimFx’s default styles properly.
  26
  27 If you use `userChrome.css` you need to restart Firefox for your changes to take
  28 effect, while Stylish applies them instantly.
  29
  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/
  33
  34
  35 ## Examples
  36
  37 Making small adjustments to hint markers (such as font size):
  38
  39 ```css
  40 #VimFxMarkersContainer .marker {
  41   font-size: 12px !important; /* Specific font size. */
  42   text-transform: lowercase !important; /* Lowercase text. */
  43   opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
  44 }
  45 ```
  46
  47 To make the hint markers look like they did in version 0.5.x:
  48
  49 ```css
  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;
  62 }
  63 #VimFxMarkersContainer .marker--matched,
  64 #VimFxMarkersContainer .marker-char--matched {
  65   color: #FFA22A !important;
  66 }
  67 #VimFxMarkersContainer .marker--highlighted {
  68   background-color: #FFD76E !important;
  69 }
  70 ```
  71
  72 Making the location bar red when in Ignore mode (you may substitute “ignore”
  73 with any mode name below):
  74
  75 ```css
  76 #main-window[vimfx-mode="ignore"] #urlbar {
  77     background: red !important;
  78 }
  79 ```
  80
  81 (While speaking of highlighting the current mode, if you’re a [config file] user
  82 you might be interested in reading about the [the `modeDisplayChange` event].)
  83
  84 [config file]: config-file.md
  85 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event