logo
WXT, a Web and Xml Tool
from Ostfold College
: Introduction > Documentation >Styling

Styling

WXT produces some elements which are marked with class-attribute. You can, and should, control the appearance of these elements by defining the appropriate styles in a stylesheet.

Element/PI Styles Explanation
tocmenu tocmenu-n , tocmenu-an The n is the level of the page. Level 1 is top. Level 0 is used when the toc is generated with 0 columns (as a line). The a is used for the current page.
toctrail toctrail-0 , toctrail-a0 The a is used for the current page.
tocchildren tocchildren-0
tocsiblings tocsiblings-0 , tocsiblings-a0 The a is used for the current page.
tocgroup tocgroup-n ,tocgroup-an The n is the level of the page. Level 1 is top. Level 0 is used when the toc is generated with 0 columns (as a line). The a is used for the current page.
tocpage tocpage-n The n is the level. Level 1 is top. Level 0 is used when the toc is generated with 0 columns (as a line).
ixtable ixentry , ixword ixentry is the entry in the indextable. ixword is the word in the indextable.
import-text nncode, nnword, nnliteral, nncomment Used when type is applied in import text to "pretty-print" programcode. nn may be: java, c, cpp, csharp, python, xslt, aspx. You should also prepare the anonymous style: .code.
import-text, expand onoff Used to format expand and collapse buttons when we have a HTTPRequest on a page.
ref external Used to format an a-elemnt that points to an absolute (external) uri.
ref nolink_span Used to format an simple "[ix]" construction on a webpage.
reflist reflist_ul, reflist-li Used to format an unordered list of references in a referencelist.
reflist ref_field_n Used to format fields in a references, n any number [0 ...]
reflist ref_link, external
ref-link: Used to format all links in a reference
external: Used to format absolute links in a reference
demoref demo-div
Wrapping a demolink
demoref demo-link
A demolink
demoref demo-onscreen
A span-element that contains the text seen on screen in a demolink. Should be hidden in media print
demoref demo-onprint
A span-element that contains the text seen on print in a demolink Should be hidden in media screen
svn svndiv
Styling the div-fragment that contains the leading text and the svn address
svn svnaddress
Styling the span-fragment that contains the svn uri.

Part of a sample stylesheet

/* ************************************************* */
/* styles hardwired by WXT */
/* ************************************************* */
/* tocmenu PI,  3 levels */
.tocmenu-0,.tocmenu-1,.tocmenu-2,.tocmenu-3,.tocmenu-4,.tocmenu-5,
.tocmenu-a0,.tocmenu-a1,.tocmenu-a2,.tocmenu-a3,.tocmenu-a4,.tocmenu-a5
{
  font-size: 11px;
  font-weight:200;
  background-color:transparent;
  text-decoration:none;
  line-height:120%;
}
.tocmenu-0,.tocmenu-a0{ margin-left:0px;}
.tocmenu-1,.tocmenu-a1{ margin-left:7px;font-weight:200;line-height:150%;}
.tocmenu-2,.tocmenu-a2{ margin-left:14px;}
.tocmenu-3,.tocmenu-a3{ margin-left:21px;}
.tocmenu-4,.tocmenu-a4{ margin-left:28px;}
.tocmenu-5,.tocmenu-a5{ margin-left:34px;}

/* tocgroup PI  3 levels*/
.tocgroup-0,.tocgroup-1,.tocgroup-2,.tocgroup-3,.tocgroup-4,.tocgroup-5,
.tocgroup-a0,.tocgroup-a1,.tocgroup-a2,.tocgroup-a3,.tocgroup-a4,.tocgroup-a4{
  font-size: 12px;
  font-weight:200;
  background-color:transparent;
  text-decoration:none;
  line-height:120%;
}

.tocgroup-0,.tocgroup-a0{ margin-left:0px;}
.tocgroup-1,.tocgroup-a1{ margin-left:30px; font-weight:600; line-height:200%;}
.tocgroup-2,.tocgroup-a2{ margin-left:54px; font-weight:600; line-height:160%;}
.tocgroup-3,.tocgroup-a3{ margin-left:70px;}
.tocgroup-4,.tocgroup-a4{ margin-left:80px;}
.tocgroup-5,.tocgroup-a5{ margin-left:90px;}

/* tocpage PI  5 levels*/
.tocpage-0,.tocpage-1,.tocpage-2,.tocpage-3,
.tocpage-a0,.tocpage-a1,.tocpage-a2,.tocpage-a3
{
  font-size: 12px;
  font-weight:200;
  background-color:transparent;
  text-decoration:none;
  line-height:120%;
}

.tocpage-0,.tocpage-a0{ padding-left:0px;}
.tocpage-1,.tocpage-a1{ padding-left:30px; font-weight:600; line-height:200%;}
.tocpage-2,.tocpage-a2{ padding-left:44px; }
.tocpage-3,.tocpage-a3{ padding-left:50px;}

/* toctrail */
.toctrail-0,.toctrail-a0{
  font-size: 12px;
  font-weight:200;
  background-color:transparent;
  text-decoration:none;
  line-height:160%;
}

/* tocchildren and tocsiblings */
.tocsiblings-0, .tocsiblings-a0, .tocchildren{
  font-size: 12px;
  font-weight:200;
  background-color:transparent;
  text-decoration:none;
  line-height:160%;
}

/* indexes */
.ixentry{margin-left:30px;font-style:italic}
.ixword{margin-left:20px;font-weight:bold}

/* program code */
.cppcode,.ccode,.csharpcode,.javacode,.javascriptcode,.pythoncode,.mlcode,.code,.xsltcode {
	font-size:11px;
	white-space: pre;
	font-family: "Courier new","Courier",  mono-space;
	background-color: #EEEEFF;
	display: block;
	border-style:dashed;
	border-width:1px;
	padding:5px;
}
.mlcode{background-color: #FFFCFC}

.pythoncode{background-color:#FFFFE7}
.pythonword{color:#FF7700}
.pythonliteral{color:green}
.pythoncomment{color:#DD0000}

.javacode{background-color:#F0F0FA}
.javaword{color:blue}
.javaliteral{color:green}
.javacomment{font-style:italic;color:#DD0000}


.javascriptcode{background-color:#F0F0F0}
.javascriptword{color:blue}
.javascriptliteral{color:green}
.javascriptcomment{font-style:italic;color:#DD0000}


.javacode{background-color:#F0F0FA}
.xsltword{color:blue}
.xsltliteral{color:green}
.xsltcomment{font-style:italic;color:gray}

.cppword,.cword,.csharpword,.javaword{color:blue;font-weight:bolder}
.cppliteral,.cliteral,.csharpliteral{color:green}
.cppcomment,.ccomment,.csharpcomment{color:#DD0000}

/* expansion */
.onoff{
	font-weight:bold;
	background-color:yellow;
	font-size:14px;
	padding-left:3px;
	padding-right:3px;
	cursor:pointer;
	border:solid;
	border-width:1px}


/* end of styles hardwired by WXT */

WXT, a Web and Xml Tool from Ostfold College: http://www.ia.hiof.no/~borres/wxtdoc/


Bygget med WXT : 11.jan.2009