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, help dialog and
  10 button with CSS. In fact, using the techniques shown here you can re-style
  11 almost _any_ part of Firefox.
  12
  13 1. Copy rules from [style.css] into [userChrome.css] or a new [Stylish] style.
  14
  15 2. Make sure that the following code is at the top of the file:
  16
  17    ```css
  18    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  19    ```
  20
  21    It makes sure that your CSS only affects the browser chrome and not web
  22    pages.
  23
  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.
  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:
  38
  39 ```css
  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! */
  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 ```
  68
  69 Making the location bar red when in ignore mode (you may substitute “ignore”
  70 with any mode name below):
  71
  72 ```css
  73 #main-window[vimfx-mode="ignore"] #urlbar {
  74     background: red !important;
  75 }
  76 ```
  77
  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].)
  80
  81 [config file]: config-file.md
  82 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event