<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Aptos;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
font-size:12.0pt;
font-family:"Aptos",sans-serif;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Verdana",sans-serif;
color:#156082;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-GB" link="#467886" vlink="#96607D" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">It depends what tweaks you want to make.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">If you
<b><u>just want to change the colour scheme</u></b>, it’s pretty easy; create a CSS file that has the following in it:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> :root {<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-layout-bg : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-layout-data2 : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-layout-outline : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-layout-fg : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-layout-strong : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">
</span><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">--colour-layout-contrast : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-text-normal : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-text-strong : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-text-bright : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-text-faint : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-tooltip-frame : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> --colour-tooltip-bg : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="FR" style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">
</span><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">--colour-tooltip-text : $COLOUR;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"> }<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">In the example above, $COLOUR means you can use any of the normal CSS ways of specifying a colour:
<b>#3399cc</b>, <b>black</b>, <b>red</b>, etc. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">Save your CSS file. Put it on the web – anywhere will do; not necessarily in the CQPweb server.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">You then need to switch a given corpus over to the new colour scheme. Here’s how: go to the SQL client, and run this command as many
times as necessary:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="text-indent:36.0pt"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">update corpus_info set colour_scheme = "$path" where corpus = "$handle";<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">… filling in $path and $handle as follows.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">$path – either a full URL (w/ leading http or https) OR if you put it under CQPweb’s css folder, a path of this form: “../css/xxxxxxxxx.css”<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">$handle – lowercase handle of the corpus<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">To apply a bunch of custom colours to the three no-corpus UIs (admin, homepage, user acct page): create a CSS file with a :root {}
as per above, but put the URL into the relevant config file values:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">## Colour scheme to use for the main menu page (e.g. "~blue", "~red", etc.).
</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"># $colour_scheme_for_homepage = "~blue";</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">## Colour scheme to use for the admin control panel page.
</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"># $colour_scheme_for_adminpage = "~red";</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US">## Colour scheme to use for the user-login homepage.
</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:36.0pt"><i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"># $colour_scheme_for_userpage = "~green";</span></i><span style="font-size:10.0pt;font-family:"Courier New";color:#156082;mso-fareast-language:EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">Replace “~blue/red/green” with the URL you want to use (or path to something under the “css” folder).<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><b><u><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">Changing more than just colours</span></u></b><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">
is more complex. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">If you want to add special styling for S-attribute or P-attribute data in the interface, you need to use visualisations to make the
relevant spans/divs show up in the UI, and then create custom CSS to render them how you want them to appear.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">If you want to change stuff more fundamentally, e.g. table border widths, text size, etc. the only way to do it is to have a look at
the main CSS file (which is <i>css/0system.css</i>) and create overrides to what you find there in your own CSS file, hooked into the system as per above (for specific corpora and/or the three other interfaces).
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">Note that all of the above is for v3.3. v3.2 was different. You could change stuff more easily, IIRC.
<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">best<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US">Andrew.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:10.0pt;font-family:"Verdana",sans-serif;color:#156082;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm;font-size:pt">
<p class="MsoNormal"><b><span style="font-family:"Calibri",sans-serif">From:</span></b><span style="font-family:"Calibri",sans-serif"> CWB <cwb-bounces@sslmit.unibo.it>
<b>On Behalf Of </b>Graham Ranger -- UAPV via CWB<br>
<b>Sent:</b> 27 May 2026 15:00<br>
<b>To:</b> Open source development of the Corpus WorkBench <cwb@sslmit.unibo.it><br>
<b>Cc:</b> Graham Ranger -- UAPV <graham.ranger@univ-avignon.fr><br>
<b>Subject:</b> [CWB] CSS<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<p class="MsoNormal">Hello again,<br>
The second question I mentioned concerns CSS files and themes for cqpweb. I'm pretty sure this has been asked before, so please point me in the right direction, if this is the case.<br>
Is there a simple "how to", explaining how to tweak the appearance of the site? (I.e. which css files need modifying.)<br>
And secondly, are there any kind souls who would like to share successful css files, possibly for further tweaking?<br>
Many thanks again for your help.<br>
Best,<br>
Graham. <o:p></o:p></p>
</div>
</div>
</body>
</html>