documentation/styling.md

   1 <!--
   2 This is part of the VimFx documentation.
   3 Copyright Simon Lydell 2015.
   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.
  11
  12 1. Copy rules from [style.css] into [userChrome.css] or a new [Stylish] style.
  13
  14 2. 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 chrome and not web
  21    pages.
  22
  23 3. Adjust the rules to your likings. Make sure to end all declarations with
  24    `!important` so that they override VimFx’d default styles properly.
  25
  26 If you use `userChrome.css` you need to restart Firefox for your changes to take
  27 effect, while Stylish applies them instantly.
  28
  29 [style.css]: ../extension/skin/style.css
  30 [userChrome.css]: http://kb.mozillazine.org/UserChrome.css
  31 [Stylish]: https://addons.mozilla.org/firefox/addon/stylish/
  32
  33 ## Examples
  34
  35 Making small adjustments to hint markers:
  36
  37 ```css
  38 #VimFxMarkersContainer .marker {
  39   font-size: 1.2em !important; /* Larger text. */
  40   text-transform: lowercase !important; /* Lowercase text. */
  41   opacity: 0.8 !important; /* Semi-transparent. Warning: Might be slow! */
  42 }
  43 ```
  44
  45 To make the hint markers look like they did in version 0.5.x:
  46
  47 ```css
  48 /* Warning: This might slow hint generation down! */
  49 #VimFxMarkersContainer .marker {
  50   padding: 1px 2px 0 2px !important;
  51   background-color: #FFD76E !important;
  52   border: solid 1px #AD810C !important;
  53   border-radius: 2px !important;
  54   box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.3) !important;
  55   font-size: 12px !important;
  56   color: #302505 !important;
  57   font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans" !important;
  58   font-weight: bold !important;
  59   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  60 }
  61 #VimFxMarkersContainer .marker--matched,
  62 #VimFxMarkersContainer .marker-char--matched {
  63   color: #FFA22A !important;
  64 }
  65 ```
  66
  67 Making the address bar red when in ignore mode (you may substitute “ignore” with
  68 any mode name below):
  69
  70 ```css
  71 #main-window[vimfx-mode="ignore"] #urlbar {
  72     background: red !important;
  73 }
  74 ```
  75
  76 (While speaking of highlighting the current mode, you might be interested in
  77 reading about the [the `modeDisplayChange` event].)
  78
  79 [the `modeDisplayChange` event]: api.md#the-modedisplaychange-event