{{indexmenu_n>20}}
====== Level Styling ======

Using CSS and JavaScript, you can change the interface of specific tasks or the game as a whole.

===== Displaying the Cumulative Bonus in a Storm Game =====

If the game engine is storm-based, you can display the total number of bonuses (points) accumulated by the team directly in the top panel of the screen.

{{ :authors_main:task_editor:storm_bonus_panel_en.png?800 |The points counter in the top panel: the common html header of the game adds it}}

To do this, you need to:
  - In the **"Common HTML header of the game"** field (in game settings), add the panel initialization script:
<code JavaScript>
<script>
$(document).ready(function () {
  $(".btn-toolbar").append( "<div class='m-auto'><span style='font-size:1.5em'> &#128181; :&nbsp;<span class='total_bonus'></span><span></div>" );
  show_money();
});
</script>
</code> 
  - In the script of each specific task (in the level script field) where points should be displayed, add:
<code JavaScript>
show_money();
</code>

===== Displaying Levels in a Storm Game in a Row =====

To display available levels in a storm game as a horizontal row of buttons instead of a drop-down list, insert into the **"Common HTML header of the game"**:
<code JavaScript>
<script>
$(document).ready(function(){
  restyleStormLevels({"type":0});
});
</script>
</code>

{{ :authors_main:task_editor:storm_levels_row_en.png?800 |restyleStormLevels: the available levels line up as buttons instead of a drop-down}}

===== Hiding Completed Levels in a Storm Game =====

To completely hide completed levels from the list of available ones, add style hiding blocks to the **"Common HTML header of the game"**:
<code CSS>
<style type="text/css">
#complete_levels_out {
  display: none;
}
.bonus-tasks {
  display: none;
}
</style>
</code>

===== More Information =====
Examples of interactive JS scripts and more complex manipulations are described on the [[en:authors_main:task_editor:advanced:author_scripts|Scripts and Interactive Elements]] page.