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 */
