Vis kilden til Hjelp:Wikilog styling

{{Wikilog user manual header|advanced}}

This page shows topographic diagrams of HTML blocks that may be useful in order to customize the appearance of the content generated by the Wikilog extension. The extension can be customized by adding CSS rules to [[MediaWiki:Common.css]].

== Summary pager ==

The summary pager is used by default to display the list of wikilog articles in wikilog pages and [[Special:Wikilog]].  It produces the following topography:

<div style="background:#EEE; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-wrapper'''<br/>
Contains the Wikilog-generated listing of wikilog articles.

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-options'''<br/>
Used only in Special:Wikilog, optional. It is a fieldset with query fields.
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-navbar .wl-navbar-top'''<br/>
Optional. The top navigation bar, with paging links to next/previous pages of articles.<br/>
''([[MediaWiki:Wikilog-navigation-bar|wikilog-navigation-bar]] -- customizable, optional)''
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-roll'''<br/>
The list of wikilog articles (entries).

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-entry''' [ ''.wl-draft'' ]<br/>
A single wikilog article (entry).

      <div style="background:#BBB; border:1px dashed gray; padding:3pt; margin:3pt;">
'''h2'''<br/>
The title of the wikilog article.
      </div>

      <div style="background:#BBB; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-summary-header'''<br/>
Optional. Contains the header of the summary entry, with authors, date, time, comments link, etc.<br/>
''([[MediaWiki:Wikilog-summary-header|wikilog-summary-header]] -- customizable)''
      </div>

      <div style="background:#BBB; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-summary'''<br/>
The summary text of the wikilog article.<br/>
''([[MediaWiki:Wikilog-summary-more|wikilog-summary-more]] -- customizable, conditional)''
      </div>

      <div style="background:#BBB; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-summary-footer'''<br/>
Optional. Contains the header of the summary entry, with authors, date, time, comments link, etc.<br/>
''([[MediaWiki:Wikilog-summary-footer|wikilog-summary-footer]] -- customizable)''
      </div>

    </div>

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-entry''' [ ''.wl-draft'' ] ...</div>
    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-entry''' [ ''.wl-draft'' ] ...</div>
<p style="text-align:center">...</p>

  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-navbar .wl-navbar-bottom'''<br/>
Optional. The bottom navigation bar, with paging links to next/previous pages of articles.<br/>
''([[MediaWiki:Wikilog-navigation-bar|wikilog-navigation-bar]] -- customizable, optional)''.
  </div>
</div>

== Comments page ==

The comments page of a wikilog article contains the standard page contents (usually blank, unless it was edited or viewing a single comment) followed by Wikilog-generated list of comments, with the following topography:

<div style="background:#EEE; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comments'''<br/>
Wraps entire Wikilog-generated list of comments.

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''h2#wl-comments-header'''<br/>
The "Comments" or "Replies" H2 heading.
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-threads'''<br/>
Contains all threads of the comments page.

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-thread'''<br/>
A single top-level comment and its thread (all its replies, recursively).<br/>
... (see below)
    </div>

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (see below)</div>
    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (see below)</div>
    <p style="text-align:center">...</p>
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''#wl-comment-form'''<br/>
The "add new comment" form that the user interacts with.
  </div>
</div>

=== Visible comment ===

A single visible comment thread, an all the replies to such a comment, is formatted as follows:

<div style="background:#EEE; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-thread'''<br/>
Indents the comment and all its replies in a thread.

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment''' [ ''.wl-comment-pending'' | ''.wl-comment-deleted'' ] [ ''.wl-comment-by-anon'' | ''.wl-comment-by-user'' [ ''.wl-comment-by-author'' ] ]<br/>
Contains the visible comment.

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment-header'''<br/>
Optional. Contains the header of the comment, with author, date, time, etc.<br/>
''([[MediaWiki:Wikilog-comment-header|wikilog-comment-header]] -- customizable)''
    </div>
    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment-text'''<br/>
The comment text itself.
    </div>
    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment-footer'''<br/>
Optional. Contains the footer of the comment, with author, date, time, etc.<br/>
''([[MediaWiki:Wikilog-comment-footer|wikilog-comment-footer]] -- customizable)''
    </div>
    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment-tools'''<br/>
Contains links related to the comment, like reply, page, edit, etc.
    </div>
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (recursive)</div>
  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (recursive)</div>
  <p style="text-align:center">...</p>
</div>

=== Hidden comment ===

A single hidden comment thread, an all the replies to such a comment, is formatted as follows:

<div style="background:#EEE; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-thread'''<br/>
Indents the comment and all its replies in a thread.

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment''' [ ''.wl-comment-pending'' | ''.wl-comment-deleted'' ] [ ''.wl-comment-by-anon'' | ''.wl-comment-by-user'' [ ''.wl-comment-by-author'' ] ]<br/>
Contains the hidden comment and its metadata.

    <div style="background:#CCC; border:1px dashed gray; padding:3pt; margin:3pt;">
'''.wl-comment-placeholder'''<br/>
Placeholder of the hidden comment.
    </div>
  </div>

  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (recursive)</div>
  <div style="background:#DDD; border:1px dashed gray; padding:3pt; margin:3pt;">'''.wl-thread''' ... (recursive)</div>
  <p style="text-align:center">...</p>
</div>

{{Wikilog user manual footer}}