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