Subversion Repositories wimsdev

Rev

Rev 17544 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 17544 Rev 17898
Line 13... Line 13...
13
!next
13
!next
14
<tr><th><span class="wims_color1">wims_color1</span></th><td>theme style for menu</td></tr>
14
<tr><th><span class="wims_color1">wims_color1</span></th><td>theme style for menu</td></tr>
15
<tr><th><span class="wims_color2">wims_color2</span></th><td>theme style for button</td></tr>
15
<tr><th><span class="wims_color2">wims_color2</span></th><td>theme style for button</td></tr>
16
<tr><th><span class="wims_color3">wims_color3</span></th><td>theme style for help button</td></tr>
16
<tr><th><span class="wims_color3">wims_color3</span></th><td>theme style for help button</td></tr>
17
</table>
17
</table>
-
 
18
 
-
 
19
You may create your own style by including html tag directly in your exercise code.
-
 
20
        You must use the WIMS command \css for it.
18
 
21
 
19
One can also use the var() CSS functions instead of any part of a value of another property
22
One can also use the var() CSS functions instead of any part of a value of another property
20
  to insert their values.
23
  to insert their values. Here is the list:
21
<pre>
24
<pre>
22
  --wims_bgcolor
25
  --wims_bgcolor
23
  --wims_link_color
26
  --wims_link_color
24
  --wims_vlink_color
27
  --wims_vlink_color
25
  --wims_hlink_color
28
  --wims_hlink_color
26
  --wims_ref_menucolor
29
  --wims_ref_menucolor
27
  --wims_ref_bgcolor
30
  --wims_ref_bgcolor
28
  --wims_ref_button_color
31
  --wims_ref_button_color
29
  --wims_ref_button_bgcolor
32
  --wims_ref_button_bgcolor
30
</pre>
33
</pre>
-
 
34
For example, the following code prepares a frame
-
 
35
        that consists of a border of specific width and use the specific wims color.
31
<pre>
36
<pre>
32
&lt;style> .mystyle {
37
&lt;style> .mystyle {
33
  padding:1em;border-left:solid;
38
  padding:1em;border-left:solid;
34
  border-left-width:.2em;
39
  border-left-width:.2em;
35
  border-left-color:var(--wims_ref_bgcolor);
40
  border-left-color:var(--wims_ref_bgcolor);
Line 42... Line 47...
42
  border-left-width:.2em;
47
  border-left-width:.2em;
43
  border-left-color:var(--wims_ref_bgcolor);
48
  border-left-color:var(--wims_ref_bgcolor);
44
  }
49
  }
45
</style>
50
</style>
46
 
51
 
47
Another example which can be useful:
52
Another example which can be useful in the exercise code for preparing
-
 
53
two boxes side by side, for example an image and some text.
-
 
54
The result will be responsive, so the display will adapt to the screen size.
48
<pre>
55
<pre>
49
&lt;div class="wims_columns">
56
&lt;div class="wims_columns">
50
  &lt;div class="medium_size img_col">image&lt;/div>
57
  &lt;div class="medium_size img_col">image&lt;/div>
51
  &lt;div class="medium_size text_col">text&lt;/div>
58
  &lt;div class="medium_size text_col">text&lt;/div>
52
&lt;/div>
59
&lt;/div>