<h2 class="wimscenter">CSS</h2>
!set a=!record 0 of wimshome/public_html/bases/sys/css_classes
!set a=!nonempty lines $a
!set acnt=!linecnt $a
<table class="wimsborder wimscenter">
!for j = 1 to $acnt
!set aa=!line $j of $a
!if $(aa[1])!=$empty and $(aa[2])!=$empty
<tr><th>$(aa[1])</th><td>$(aa[2..-1])</td></tr>
!endif
<tr><th><span class="wims_color1">wims_color1</span></th><td>theme style for menu</td></tr>
<tr><th><span class="wims_color2">wims_color2</span></th><td>theme style for button</td></tr>
<tr><th><span class="wims_color3">wims_color3</span></th><td>theme style for help button</td></tr>
</table>
You may create your own style by including html tag directly in your exercise code.
You must use the WIMS command \css for it.
One can also use the var() CSS functions instead of any part of a value of another property
to insert their values
. Here is the
list:<pre>
--wims_bgcolor
--wims_link_color
--wims_vlink_color
--wims_hlink_color
--wims_ref_menucolor
--wims_ref_bgcolor
--wims_ref_button_color
--wims_ref_button_bgcolor
</pre>
For example, the following code prepares a frame
that consists of a border of specific width and use a specific wims color
(so it can change according to the WIMS server).
<pre>
<style> .mystyle {
padding:1em;border-left:solid;
border-left-width:.2em;
border-left-color:var(--wims_ref_bgcolor);
}
</style>
</pre>
<style>
.mystyle {padding:1em;
border-left:solid;
border-left-width:.2em;
border-left-color:var(--wims_ref_bgcolor);
}
</style>
The following example is useful in the exercise code for preparing
two boxes side by side, for example an image and some text.
The result will be responsive, so the display will adapt to the screen size.
<pre>
<div class="wims_columns">
<div class="medium_size img_col">image</div>
<div class="medium_size text_col">text</div>
</div>
</pre>