Create or edit designs

Other language: de

  • Go to page:
  • [1]
  • [2]

How do I create an own design?

First you've got to understand the basics of CSS and HTML. The web has a lot of good tutorials.

Then it means knowing how wiki2xhtml works. When creating a new page, wiki2xhtml makes use of style/design-name/reck.html, which contains the basic structure, and inserts the generated contents there (like title, footer, menu and text). Through this file you can also manage used stylesheets and the page structure. After that the pages targetdir/*.html have been generated, all .png, .jpg, .gif, .ico and .css files are copied from style/design-name/ to targetdir/style/.

Image pages and thumbnails are based upon the same principle. Here are all used templates:

Used template Usage optional?
reck.html Whole page no
image-template.html Image page no
picture.html Image only yes
pictureT.html Image with description yes
thumbPicture.html Thumbnail yes
thumbPictureT.html Thumbnail with description yes
galleryContainer.html Gallery container yes
galleryText.html Gallery: Text yes
galleryImageNodesc.html Gallery: Thumbnail yes
galleryImage.html Gallery: Thumbnail with description yes
tplTOC.txt Table of Contents yes

Tags

Tags say what is to be inserted at which position. Some tags also own a delete tag: If the tag is empty, wiki2xhtml removes the content between the two delete tags.

Note that since wiki2xhtml 3.3 all tags are lowercase. If you start wiki2xhtml with the argument template [file], you can update a template. The file is optional.

For reck.html, following tags are availible:

Tag Function Delete Tag
[meta] Meta data in the head area of the document
[title] Title for the window bar
[textheader] Text header (Alternative to image)
[head>st*] head (Script etc.) will be inserted at this place. The optional argument describes how many tabs/spaces have to be prepended for an optimal look of the source code. Example: [head|tss] for a tab followed by two spaces.
[menu] Menu >menu> und <menu<
[footer] Footer >footer> und <footer<
[h1] Page title
[homelink] Link to home page
[content] Content

Tags for image-template.html (Example: Image gfx/img.jpg has been inserted on the page from.html):

Tag Function Delete Tag
[imagepath] Full Path to image: gfx/img.jpg
[imagename] Name of the image: img.jpg
[imagecaption] Caption (Argument caption=)
[alt] Content for the alt tag (caption without HTML code)
[args] Additional arguments for the image (since 3.4)
[argsLink] Additional arguments for a link (since 3.4)
[pre] ../ (directory containing the web pages)
[back] ../from.html#ID
[title] Title
[meta] Metadata
[desc] Image description >desc> and <desc<
[width] Standard width of images (from css-settings.txt)
[nextimage] Link to next image (if availible)
[previmage] Link to previous image (if availible)
Navigation, if image has been linked
from within a gallery 		>nav> and <nav<

Following tags can be used for the embedded image templates (thumb*.html, picture*.html, and gallery*.html):

Tag Function
[pos] Position (.right, .left) for CSS classes; only thumb*.html
[link] Target (Image or image page)
[thumb] Thumbnail
[imagepath] Direct link to the image
[width] Width
[desc] Description
[descxmlname] Description without special characters; may e.g. be used for the alt attribute
[id] ID (For anchor when linking back)

The two necessary files may be created now (or, simpler, copied and modified from an existing design).

Available tags for tplTOC.txt

Tag Function
[toc] Table of Contents itself
__TOC__ Default title for the TOC

Example: <div id="toc"><h2>Table of Contents</h2>
[toc]
</div><br style="clear: left;" />

Configuration files

wiki2xhtml is working with configuration files where you e.g. can set how many pictures have to be displayed per line in the gallery. wiki2xhtml looks for them in the directory where all other files (CSS files, images) for the design are located too. If the file isn't found, it uses standard values.

css-settings.txt

Measures have to be given in px or %.

{}GalleryImagesPerLine:n}} — n says how many images have to be on one line in the gallery. After this amount of images wiki2xhtml inserts a <br style="clear: both;" /> (if it is not switched off with {{ConsistentGallery:false}} in the common file or a page file).

{{GalleryThumbWidth:n(px|%)}} — Sets the width of thumbnails in galleries.

{{ImageWidthImagepage:n(px|%)}} — Sets the width for images on image pages.

{{thumb-imagewidth:n(px|%)}} — Sets the standard width of thumbnails (not in galleries).

  • Go to page:
  • [1]
  • [2]