[dactyl.git] / common / locale / en-US / styling.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="dactyl://content/help.xsl"?>

<!DOCTYPE document SYSTEM "dactyl://content/dtd">

<document
    name="styling"
    title="&dactyl.appName; Styling"
    xmlns="&xmlns.dactyl;"
    xmlns:html="&xmlns.html;">

<h1 tag="styling">Styling the GUI and web pages</h1>
<toc start="2"/>

<p>
    &dactyl.appName; allows you to apply custom CSS styling to the web pages
    you view as well as to the browser itself. Although it is possible to
    style any user interface element via the <ex>:style</ex> command, most
    &dactyl.appName; elements can be styled more easily by means of the
    more specialized <ex>:highlight</ex> command.
</p>

<item>
    <tags>E185 :colo :colorscheme</tags>
    <spec>:colo<oa>rscheme</oa> <a>name</a></spec>
    <description>
        <p>
            Load a color scheme. <a>name</a> is found by searching the <o>runtimepath</o> for the
            first file matching <tt>colors/<a>name</a>.&dactyl.fileExt;</tt>.
        </p>

        <p>
            The ColorScheme autocommand is triggered after the color scheme has been
            sourced.
        </p>
    </description>
</item>

<item>
    <tags>:hi :highlight</tags>
    <spec>:hi<oa>ghlight</oa><oa>!</oa> <a>group</a><oa>selector</oa></spec>
    <spec>:hi<oa>ghlight</oa><oa>!</oa> <oa>-append</oa> <oa>-link=<a>group</a>,…</oa> <a>group</a><oa>selector</oa> <oa>css</oa></spec>
    <description>
        <p>
            Highlight <a>group</a> with <oa>css</oa>. <oa>css</oa> is one or more
            semicolon-separated CSS declarations (E.g. <em>color: blue;
            background-color: red</em>). <oa>selector</oa>, if provided, may
            be any valid CSS selector (such as <em>:hover</em> or
            <em>[href]</em>), and will restrict the highlighting to matching
            elements.
        </p>

        <p>
            If <em>-link</em> (short name <em>-l</em>) is supplied, the value of
            each of the listed groups is prepended to the style of this group.
        </p>

        <p>Valid groups include:</p>

        <dl>
            <dt>Bell</dt>              <dd>&dactyl.appName;'s visual bell</dd>
            <dt>Boolean</dt>           <dd>A JavaScript Boolean object</dd>
            <dt>CmdLine</dt>           <dd>The command line</dd>
            <dt>CmdOutput</dt>         <dd>The output of commands executed by <ex>:run</ex></dd>
            <dt>CompDesc</dt>          <dd>The description column of the completion list</dd>
            <dt>CompGroup</dt>         <dd>The top-level container for a group of completion results</dd>
            <dt>CompIcon</dt>          <dd>The favicon of a completion row</dd>
            <dt>CompItem</dt>          <dd>A row of completion list</dd>
            <dt>CompItem[selected]</dt><dd>A selected row of completion list</dd>
            <dt>CompLess::after</dt>   <dd>The character of indicator shown when completions may be scrolled up</dd>
            <dt>CompLess</dt>          <dd>The indicator shown when completions may be scrolled up</dd>
            <dt>CompMore::after</dt>   <dd>The character of indicator shown when completions may be scrolled down</dd>
            <dt>CompMore</dt>          <dd>The indicator shown when completions may be scrolled down</dd>
            <dt>CompMsg</dt>           <dd>The message which may appear at the top of a group of completion results</dd>
            <dt>CompResult</dt>        <dd>The result column of the completion list</dd>
            <dt>CompTitle</dt>         <dd>Completion row titles</dd>
            <dt>CompTitleSep</dt>      <dd>The element which separates the completion title from its results</dd>
            <dt>Disabled</dt>          <dd>Text indicating disabled status, such as of an extension or style group</dd>
            <dt>Enabled</dt>           <dd>Text indicating enabled status, such as of an extension or style group</dd>
            <dt>ErrorMsg</dt>          <dd>Error messages</dd>
            <dt>Filter</dt>            <dd>The matching text in a completion list</dd>
            <dt>FrameIndicator</dt>    <dd>The indicator shown when a new frame is selected</dd>
            <dt>Function</dt>          <dd>A JavaScript Function object</dd>
            <dt>Hint</dt>              <dd>A hint indicator. See <ex>:help hints</ex></dd>
            <dt>HintActive</dt>        <dd>The hint element of link which will be followed by <k name="CR"/></dd>
            <dt>HintElem</dt>          <dd>The hintable element</dd>
            <dt>HintImage</dt>         <dd>The indicator which floats above hinted images</dd>
            <dt>Indicator</dt>         <dd>The <em>#</em> and  <em>%</em> in the <ex>:buffers</ex> list</dd>
            <dt>InfoMsg</dt>           <dd>Information messages</dd>
            <dt>Key</dt>               <dd>Generally a keyword used in syntax highlighting.</dd>
            <dt>Keyword</dt>           <dd>A bookmark keyword for a URL</dd>
            <dt>LineNr</dt>            <dd>The line number of an error</dd>
            <dt>Message</dt>           <dd>A message as displayed in <ex>:messages</ex></dd>
            <dt>ModeMsg</dt>           <dd>The mode indicator in the command line</dd>
            <dt>MoreMsg</dt>           <dd>The indicator that there is more text to view</dd>
            <dt>NonText</dt>           <dd>The <em>~</em> indicators which mark blank lines in the completion list</dd>
            <dt>Normal</dt>            <dd>Normal text in the command line</dd>
            <dt>Null</dt>              <dd>A JavaScript Null object</dd>
            <dt>Number</dt>            <dd>A JavaScript Number object</dd>
            <dt>Object</dt>            <dd>A JavaScript Object</dd>
            <dt>Preview</dt>           <dd>The completion preview displayed in the &tag.command-line;</dd>
            <dt>Question</dt>          <dd>A prompt for a decision</dd>
            <dt>StatusLine</dt>        <dd>The status bar</dd>
            <dt>StatusLineNormal</dt>  <dd>The status bar for an ordinary web page</dd>
            <dt>StatusLineBroken</dt>  <dd>The status bar for a broken web page</dd>
            <dt>StatusLineExtended</dt><dd>The status bar for a secure web page with an Extended Validation (EV) certificate</dd>
            <dt>StatusLineSecure</dt>  <dd>The status bar for a secure web page</dd>
            <dt>String</dt>            <dd>A JavaScript String object</dd>
            <dt>TabClose</dt>          <dd>The close button of a browser tab</dd>
            <dt>TabIcon</dt>           <dd>The icon of a browser tab</dd>
            <dt>TabIconNumber</dt>     <dd>The number of a browser tab, over its icon</dd>
            <dt>TabNumber</dt>         <dd>The number of a browser tab, next to its icon</dd>
            <dt>TabText</dt>           <dd>The text of a browser tab</dd>
            <dt>Tag</dt>               <dd>A bookmark tag for a URL</dd>
            <dt>Title</dt>             <dd>The title of a listing, including <ex>:pageinfo</ex>, <ex>:jumps</ex></dd>
            <dt>URL</dt>               <dd>A URL</dd>
            <dt>WarningMsg</dt>        <dd>A warning message</dd>
        </dl>

        <p>
            The help system also has a comprehensive set of styling groups
            which are not explained here, but many of which are described
            along with <t>writing-docs</t>.
        </p>

        <p>
            Every invocation completely replaces the styling of any previous
            invocation, unless <em>-append</em> (short name <em>-a</em>) is
            provided, in which case <a>css</a> is appended to its current
            value. If <a>css</a> is not provided, any styles beginning with
            <a>group</a> are listed.
        </p>
    </description>
</item>

<item>
    <tags>:highlight-clear</tags>
    <spec>:hi<oa>ghlight</oa> clear <oa>group</oa></spec>
    <description>
        <p>
            Reset the highlighting for <oa>group</oa> to its default value. If
            <oa>group</oa> is not given, reset all highlighting groups.
        </p>
    </description>
</item>

<item>
    <tags>:sty :style</tags>
    <spec>:sty<oa>le</oa> <oa>-name=<a>name</a></oa> <oa>-append</oa> <a>filter</a> <oa>css</oa></spec>
    <description>
        <p>
            Add CSS styles to the browser or to web pages. <a>filter</a> is a
            comma-separated list of <t>site-filters</t> for which the style will
            apply. Regular expression filters may not be used and the <tt>!</tt>
            character may not be used to invert the sense of the match.
            <oa>css</oa> is a full CSS rule set (e.g., <tt>body { color: blue; }</tt>).
        </p>

        <p>The following options are available:</p>
        <dl>
            <dt>-append</dt>
            <dd>If provided along with <em>-name</em>, <oa>css</oa> and
                <a>filter</a> are appended to its current value. (short name <em>-a</em>)</dd>

            <dt>-agent</dt>
            <dd>If provided, the style is installed as an Agent sheet, which
                applies to contents user interface widgets as well as normal
                elements. (short name <em>-A</em>)</dd>

            <dt>-group=<a>group</a></dt>
            <dd>The <t>group</t> to which to add this style. Please note that
                this grouping is for semantic and cleanup purposes only. No
                additional site filtering is applied.</dd>

            <dt>-name=<a>name</a></dt>
            <dd>If provided, any existing style with the same name is
                overridden, and the style may later be deleted using
                <a>name</a>. (short name <em>-n</em>)</dd>

        </dl>

        <p>If <oa>css</oa> isn't provided, matching styles are listed.</p>
    </description>
</item>

<item>
    <tags>:dels :delstyle</tags>
    <strut/>
    <spec>:dels<oa>tyle</oa><oa>!</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>
            Delete any matching styles. With <oa>!</oa>, delete all styles.
            If <oa>filter</oa> is provided, only matching elements of the
            filter are disabled. For instance, when run with a filter
            <str delim="">mozilla.org</str>, an existing style with a filter
            <str delim="">www.google.com,mozilla.org</str>, will result in a style for
            <str delim="">www.google.com</str>.
        </p>

        <p>The available options are:</p>

        <dl>
            <dt>-name</dt>  <dd>The name provided to <ex>:style</ex> (short name <em>-n</em>)</dd>
            <dt>-index</dt> <dd>For unnamed styles, the index listed by <ex>:style</ex>
                (short name <em>-i</em>)</dd>
        </dl>
    </description>
</item>

<item>
    <tags>:styleenable :stylee</tags>
    <tags>:styenable :stye</tags>
    <strut/>
    <spec>:styled<oa>isable</oa><oa>!</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Enable any matching styles. With <oa>!</oa>, enable all styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

<item>
    <tags>:styledisable :styled</tags>
    <tags>:stydisable :styd</tags>
    <strut/>
    <spec>:stylee<oa>nable</oa><oa>!</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Disable any matching styles. With <oa>!</oa>, disable all styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

<item>
    <tags>:styletoggle :stylet</tags>
    <tags>:stytoggle :styt</tags>
    <strut/>
    <spec>:stylet<oa>oggle</oa><oa>!</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Toggle any matching styles. With <oa>!</oa>, toggle all styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

</document>

<!-- vim:se sts=4 sw=4 et: -->