parent nodes: HtmlFormatting | Intro3Formatting | UserFiles | WikiFiles
Html Css
Contents:
Back
Attention: The examples on this page realy do not work in internal preview!
General
Earlier WikidPad supported cascading style sheets (CSS) to a limited extent. In version 1.9 beta 19 however WikidPad's support for CSS was expanded. You can now influence the look and feel of your wiki pages in both html export and external preview using all the CSS style facilities on both the global level ánd for individual wikis. And you can use classes to make live a lot easier when you are using inline (x)html.
This page is not a course on (x)html and css; it expects those who want to use CSS to have some basic knowledge on the subject. It's main subject is WikidPad's CSS file structure. It does however give two short examples on what you can do with CSS for those who are curious for what it is all about. For more information on (x)html and CSS see:
The internal preview renderer neither supports XHTML nór CSS, but even then you can still use both for your html exported pages, since WikidPad will export them in the correct format wíth the CSS references. You just can't see in internal what your pages will look like in exported html and you will have to switch back and forth between wikidpad and browser, to get your layout like you want it to be. Or at least as close as possible. Don't forget to refresh your browser cache inbetween two tries (press F5?).
Top
Examples
Appearance
You can change the appearance of just about any "element" on your wiki pages, by (re)defining it's style in the wikistyle.css file. You could for instance make the font style of your level 3 and 4 headings italic by adding this to the css file:
h3{
font-style: italic;
}
h4{
font-style: italic;
}
Or you could change the appearance of wikidpad's default table, using this:
table {
font-size: 85%;
border: 1px #8CACBB solid;
padding: 4px;
margin: 0,8;
}
td {
border: solid;
border-width: 0px 0px 1px 1px;
padding: 4px;
margin: 0,8;
}
Or you could set basic properties for your pages with this:
body {
font-family: Arial;
font-size: 85%;
color: Navy;
background: FloralWhite;
margin: 1em;
pading: 0;
}
If you want to see what this would result in, then rename the "wikistyle.csx" file in this wiki's data directory to "wikistyle.css" and either: switch wikidpad to an external previewer like IE see: Preview or close and reopen the wiki, then export some pages to html and have a look at them in the browser.
Classes
The two buttoned links in the "General" section above used this: <a href="http://www.w3schools.com/tags/ref_colornames.asp" style="color: White; background-color: Green; border-style: outset; border-width: 2; padding: 1; text-decoration: none"> W3 Schools: Color reference </a>
To create a link looking like this: W3 Schools: Color reference
Since there were twó of those "button like links" on the page; the whole construct had to be written out twice; once for each "button". A lot of typing, error prone and a lot of work if you ever want to change the style of those "link buttons" in your wiki. You could make life a whole lot easier by using an xhtml "class" for it. Add a class definition like this:
.w3schools{
color: White;
background-color: Green;
border-style: outset;
border-width: 2;
padding: 1;
text-decoration: none;
}
to your WikiStyle.css file and reuse it for any button you would like to create; like this: <a href="http://www.w3schools.com/tags/ref_colornames.asp" class="w3schools"> W3 Schools: Color reference </a>
If you ever want to change the style of the buttons, you simply change the style definition for "w3schools" in wikistyle.css and all the buttons will look differently [1].
Top
[1] This wiki doesn't use classes in it's examples (yet), since it's supposed to be able to function without a wikistyle.css file.
CSS Files
General
WikidPad supports four (4) levels of style sheets for whitch the files are all in different locations. This is in part historically born and for reasons of backward compatibility. When a wiki ('s pages) are exported to html, also all the css files in use are copied to the export directory and references to them are added to the exported pages.
The css file references are also part of the page specification for preview, so also preview will show the pages including all the css style rendering. This is however restricted to external renderers; the internal renderer ignores the css references. For preview WikidPad supports an additional set of three (3) css files, that will allow you to "style" pages differently in preview then in export. Also this has an historical reason and one for backward compatibility.
Except for the wikidpad base css file "appbase.css", none of the css files is created automatically by wikidpad. If you want to use any of the files, you will have to create them yourself in the correct location and name them correctly. Only if a css file with the correct name exists in the correct place, will it be processed and will a reference to it be added to the wiki pages for export and/or preview. Wikidpad checks the available css files, when a wiki is opened and when a new tabbed page is opened.
History
Versions of WikidPad befóre 1.9 beta 9 also supported css, but only on a global level and for basic styling of elements like the TOC as the result of the [:toc:] insertion. There was one wikistyle.css file in the install subdirectory "export" and one wikipreview.css file in the subdirectory ".WikidPadGlobals" of the user-specific configuration directory. Both in fact at installation time had the same content, but were changeable by the user, as long as he kept in mind, that they could be overwritten by the installation of a new wikidpad version or else he would have to add version changes manually.
For the sake of backward compatibility these files had to be retained and it was decided to make the best use posible of them. It is for this reason that for instance the "admbase.css" has its source in the "export" directory and not in the install directory and that next to the general css files, the three extra for preview exist.
General css files
The general css support is done with css files for a maximum of four (4) levels, that set css styling for both (external) preview and export. When (part of) a wiki is exported, these files - íf present - are also copied to the directory that the pages are exported to. With the exeption of the application base file, all the files are called: wikistyle.css, for easy recognition. When copied to the export directory, their name is changed, since there can't be multiple files with the same name in the same directory.
The files that wikidpad searches for when preparing a page for preview or export:
Appbase.css is the primary application css file; it should not be changed, since it's content can be overwritten with each installation of a new wikidpad version. Admbase.css is the css file, where organisation wide css styles can be specified in accordance to the house style. Userbase.css is the css file, where a user can add his own specific styles. Wikistyle.css is a wiki specific css file for wiki specific style specifications.
Level depicts the following order of the css references for the files in the html page header. Style elements in 4 overrule/add to those in 3 that in turn overrules/adds to those in 2, etc.
Preview css files
For (external) preview only, three (3) additional files are searched for; these files are:
For preview only settings in these files overrule those of the general files on the same level. Since they are preview only, they are not copied to the export dir. at html export time. You can for instance use them to test changes in style specifications, without having to disturb any operational css files.
Top
Limitations
There are some known limitations to using css files with wikidpad:
• Paragraphs
The html generated by wikidpad does not use the <p> element; also not when paragraph_mode is set to true. You therefore can't use p{ .....} style elements in the css file(s) for anything else then paragraphs you defined yourself, using inline (x)html.
• html.attributes
When you use html.attributes in a wiki, their settings are overruled by settings for the same elements in the style sheets.
• wiki distribution
If you want to distribute a wiki itself to somebody else and you use admbase and userbase level css files then don't forget to also distribute the css files concerned.
Top
previous: Back
parents: HtmlFormatting, Intro3Formatting, UserFiles, WikiFiles
attributes: [paragraph_mode: true]
[help.status: done]