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 | <style> .mystyle { |
37 | <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 | <div class="wims_columns"> |
56 | <div class="wims_columns"> |
50 | <div class="medium_size img_col">image</div> |
57 | <div class="medium_size img_col">image</div> |
51 | <div class="medium_size text_col">text</div> |
58 | <div class="medium_size text_col">text</div> |
52 | </div> |
59 | </div> |