Herramientas de usuario

Herramientas del sitio


ayuda:rgss:biblioteca:menudeanillo

Menú en Forma de Anillo

Ficha técnica

  • Nombre original: Ring Menu System.
  • Nombre del autor: XRXS (modificado por Maki y Dubealex).
  • Utilidad: Cambia el menú por defecto a uno en forma de anillo.
  • Dependencia de otros scripts: No
  • Incompatibilidad: Puede resultar incompatible con scripts para los que resulte necesario modificar "Window_Gold" o "Scene_End"
  • **Al comprobar los scripts, los pasos 2 y 3 dan error al escribirlos, en cambio si se dejan sin poner, el script funciona perfectamente.

Instalación

Paso 1 de 3

Crear una nueva clase por encima de "Main" y pegar el siguiente código:

#===================================================
# â–�  Ring Menu - Show Player Location - Release #1 (Edited By Dubealex)
#===================================================
# For more infos and update, visit:
# rmxp.dubealex.com [OR] X-RPG V2 Forum
#
# Original Ring Menu by: 和希 (From XRXS)
# Original Edit and Fix by: Maki
# Show Player Location Version by: Dubealex
#
# You can customize this script at line #35 - Have fun !!
# If you want to show more stuff, its easy to do, just ask, and I will release
# new version of this edited script !
#
# alex@dubealex.com
#===================================================
#7/26/05-
# �  �  � Edited by Tsunokiette (include gold and remove save)
#===================================================
 
#===================================================
# â–¼ CLASS Scene_Menu Begins
#===================================================
 
class Scene_Menu
#-----------------------------------------------------------------------------------------
# menu_index : this initializes the menu_index, as well as some arrays
#-----------------------------------------------------------------------------------------
def initialize(menu_index = 0)
@menu_index = menu_index
$location_text=[]
$window_size=[]
$ring_menu_text=[]
$chara_select=[]
@window_opacity=[]
@chara_select=[]
@window_position=[]
 
#---------------------------------------------------------------------------
# â–�  Ring Menu Customization Section: (By Dubealex)
#---------------------------------------------------------------------------
# Those variables defines how the script will act.
# Simply change the value by those you want.
# Remember that changing the font size has its limitation due to text space.
#
 
 
 
# TEXT SETTINGS FOR SHOW PLAYER LOCATION WINDOW:
#(adds 4 new variables to $location_text, and sets their values)
$location_text[0]="Arial" # Font Type
$location_text[1]=22 # Font Size
$location_text[2]=6 # Location Title Color
$location_text[4]=0 # Map Name Color
$location_text[3]="Localización:" # Customize the "Location" Title Text
 
# SHOW LOCATION WINDOW SETTINS:
@show_location_window=true #Set to false to not use it !
@window_opacity[0]=255 # Border Opacity
@window_opacity[1]=130 # Background Opacity
$window_location_skin="001-Blue01" # Window skin
@window_position[0]=20 # X Axis Position
@window_position[1]=20 # Y Axis Position
$window_size[0]=160 # Width
$window_size[1]=96 # Heigh
 
# TEXT SETTINGS FOR INSIDE THE RING MENU:
$ring_menu_text[0]="Arial" # Font Type
$ring_menu_text[7]=0 # Font Color
$ring_menu_text[8]=22 # Font Size
$ring_menu_text[1]="Objetos" # Items Menu Text
$ring_menu_text[2]="Habilidades" # Skills Menu Text
$ring_menu_text[3]="Equipo" # Equip Menu Text
$ring_menu_text[4]="Estado" # Stats Menu Text
$ring_menu_text[5]="Salir" # Quit Menu Text
 
# CHARACTER SELECTION WINDOW SETTINGS :
@chara_select[0]=400 # X Axis Position
@chara_select[1]=0 # Y Axis Position
$chara_select[0]="Arial" # Font Type
$chara_select[1]=0 # Font Color
$chara_select[5]=22 # Font Size
$chara_select[2]=255 # Window Border Opacity
$chara_select[3]=130 # Window Background Opacity
$chara_select[4]="001-Blue01" # Window Skin to use
#--------------------------------------------------------------------------
 
end
#--------------------------------------------------------------------------
# Scene_Menu starts
#--------------------------------------------------------------------------
def main
 
# Show Player Location Feature:
if @show_location_window==true #if this is true, it shows the location window
@window_location = Window_Location.new
@window_location.x = @window_position[0]
@window_location.y = @window_position[1]
@window_location.opacity = @window_opacity[0]
@window_location.back_opacity = @window_opacity[1]
end
#End of Show Player Location
 
#show gold feature, delete this part if you don't want a gold window
 @gold_window = Window_Gold.new
 @gold_window.x = 20
 @gold_window.y = 120
 @gold_window.opacity = 255
 @gold_window.back_opacity = 130
#end show gold feature
 
# stores the map image into @spriteset
@spriteset = Spriteset_Map.new
# stores the play x and y into local variables px and py, then opens the ring menu above player
px = $game_player.screen_x - 15
py = $game_player.screen_y - 24
@command_window = Window_RingMenu.new(px,py)
@command_window.index = @menu_index
# starts if statement with the arguement - $game_pary.actors.size == 0
if $game_party.actors.size == 0
# disables skills, equip, and status for the characters not in your party
@command_window.disable_item(0)
@command_window.disable_item(1)
@command_window.disable_item(2)
@command_window.disable_item(3)
end
@command_window.z = 100
# if you have save disabled (Tsunokiette: I removed save from this version of � the ring menu)
if $game_system.save_disabled
# then it disables save in menu
@command_window.disable_item(4)
end
# sets up the character status window *where you choose a character*
@status_window = Window_RingMenuStatus.new
@status_window.x = @chara_select[0]
@status_window.y = @chara_select[1]
@status_window.z = 200
@status_window.opacity=$chara_select[2]
@status_window.back_opacity=$chara_select[3]
@status_window.visible = false #defaultly turns window off, keep this false at all times
# prepares for transition
Graphics.transition
# starts a loop
loop do
# updates graphics on screen
Graphics.update
# updates based on input from player
Input.update
# updates scene
update
# if $scene is not = to itself, then break the loop
if $scene != self
break
end
end
# when you exit
Graphics.freeze
# disposes of the spriteset (false map image)
@spriteset.dispose
# if @show location is true then dispose (get rid) of @window_location
if @show_location_window==true
@window_location.dispose
end
#disposes of other windows
@command_window.dispose
@status_window.dispose
@gold_window.dispose
end
#--------------------------------------------------------------------------
# define update
#--------------------------------------------------------------------------
def update
# if @show_location_window==true, then update @window_location
if @show_location_window==true
@window_location.update
end
#update the windows
@command_window.update
@status_window.update
# updates the ring menu if it is active �
if @command_window.active
update_command
return
end
# updates the status window if it is active
if @status_window.active
update_status
return
end
end
#--------------------------------------------------------------------------
# define input updates for menu
#--------------------------------------------------------------------------
def update_command
# if player presses esc (b)
if Input.trigger?(Input::B)
# plays sound effect
$game_system.se_play($data_system.cancel_se)
# changes the scene back to Scene_Map
$scene = Scene_Map.new
return
end
# if player presses the confirmation button (enter, return, space, etc.)
if Input.trigger?(Input::C)
# if nobody is in the party, AND there are less the 4 commands in the index
if $game_party.actors.size == 0 and @command_window.index < 4
# play buzzer sound �
$game_system.se_play($data_system.buzzer_se)
return
end
# set up commands for menu
case @command_window.index
when 0 # when window_command index is 0
# play sound effect
$game_system.se_play($data_system.decision_se)
# opens the item menu
$scene = Scene_Item.new
when 1 # when window_command index is 1
# play sound effect
$game_system.se_play($data_system.decision_se)
# deactivates command window, and activates � the status window, and sets its index to 0
@command_window.active = false
@status_window.active = true
@status_window.visible = true
@status_window.index = 0
when 2 # when window_command index is 2
# play sound effect
$game_system.se_play($data_system.decision_se)
# deactivates command window, and activates � the status window, and sets its index to 0
@command_window.active = false
@status_window.active = true
@status_window.visible = true
@status_window.index = 0
when 3 # when window_command index is 3
# play sound effect
$game_system.se_play($data_system.decision_se)
# deactivates command window, and activates � the status window, and sets its index to 0
@command_window.active = false
@status_window.active = true
@status_window.visible = true
@status_window.index = 0
when 4 # when window_command index is 4
# play sound effect
$game_system.se_play($data_system.decision_se)
# opens Scene_End
$scene = Scene_End.new
end
return
end
# loops moving of the icons
return if @command_window.animation?
# if up or left is pressed, then icons are shifted to the left
if Input.press?(Input::UP) or Input.press?(Input::LEFT)
$game_system.se_play($data_system.cursor_se)
@command_window.setup_move_move(Window_RingMenu::MODE_MOVEL)
return
end
# if down or right is pressed, then icons are shifted to the right
if Input.press?(Input::DOWN) or Input.press?(Input::RIGHT)
$game_system.se_play($data_system.cursor_se)
@command_window.setup_move_move(Window_RingMenu::MODE_MOVER)
return
end
end
#--------------------------------------------------------------------------
# define input updates for menu_status
#--------------------------------------------------------------------------
def update_status
# if player presses esc (b)
if Input.trigger?(Input::B)
# sound effect played
$game_system.se_play($data_system.cancel_se)
#activates command_window, disactivates status_window, and sets status_window's index to -1
@command_window.active = true
@status_window.active = false
@status_window.visible = false
@status_window.index = -1
return
end
# if enter (confirmation) is pressed
if Input.trigger?(Input::C)
# sets @command_window.index as the arguement
case @command_window.index
when 1 # when command_window's index is 1
# if no characters
if $game_party.actors[@status_window.index].restriction >= 2
# sound effect
$game_system.se_play($data_system.buzzer_se)
return
end
# sound effect
$game_system.se_play($data_system.decision_se)
# opens the skill scene for selected character
$scene = Scene_Skill.new(@status_window.index)
when 2 #when command_window's index is 2
# sound effect
$game_system.se_play($data_system.decision_se)
# opens the equip sceen for selected character
$scene = Scene_Equip.new(@status_window.index)
when 3 # when command_window's index is 3
# sound effect
$game_system.se_play($data_system.decision_se)
# opens the status scene for selected character
$scene = Scene_Status.new(@status_window.index)
end
return
end
end
end
 
#===================================================
# CLASS Scene_Menu Ends
#===================================================
 
 
#===================================================
# CLASS Window_RingMenu Begins
#===================================================
class Window_RingMenu < Window_Base
#--------------------------------------------------------------------------
# defines global variables (i think)
#--------------------------------------------------------------------------
STARTUP_FRAMES = 20
MOVING_FRAMES = 5
RING_R = 64
ICON_ITEM = RPG::Cache.icon("034-Item03") #stores the icon 034-Item03 into ICON_ITEM
ICON_SKILL = RPG::Cache.icon("044-Skill01") #etc
ICON_EQUIP = RPG::Cache.icon("001-Weapon01") #etc
ICON_STATUS = RPG::Cache.icon("050-Skill07") #etc
ICON_EXIT = RPG::Cache.icon("046-Skill03") #etc
ICON_DISABLE= RPG::Cache.icon("") #etc
SE_STARTUP = "056-Right02" #stores sound effect 056-Right02 into SE_STARTUP
MODE_START = 1
MODE_WAIT = 2
MODE_MOVER = 3
MODE_MOVEL = 4
#--------------------------------------------------------------------------
# deffines the attribute accessor (index)
#--------------------------------------------------------------------------
attr_accessor :index
#--------------------------------------------------------------------------
# sets up the ring menu
#--------------------------------------------------------------------------
def initialize( center_x, center_y )
super(0, 0, 640, 480)
self.contents = Bitmap.new(width-32, height-32)
self.contents.font.name = $ring_menu_text[0]
self.contents.font.color = text_color($ring_menu_text[7])
self.contents.font.size = $ring_menu_text[8]
self.opacity = 0
self.back_opacity = 0
s1 = $ring_menu_text[1]
s2 = $ring_menu_text[2]
s3 = $ring_menu_text[3]
s4 = $ring_menu_text[4]
s5 = $ring_menu_text[5]
@commands = [ s1, s2, s3, s4, s5]
@item_max = 5
@index = 0
@items = [ ICON_ITEM, ICON_SKILL, ICON_EQUIP, ICON_STATUS, ICON_EXIT ]
@disabled = [ false, false, false, false, false ]
@cx = center_x - 16
@cy = center_y - 16
setup_move_start
refresh
end
#--------------------------------------------------------------------------
# define the update method for the ring menu
#--------------------------------------------------------------------------
def update
super
refresh
end
#--------------------------------------------------------------------------
# defines the refresh method for the ring menu
#--------------------------------------------------------------------------
def refresh
self.contents.clear
# starts argument @mode
case @mode
when MODE_START
refresh_start
when MODE_WAIT
refresh_wait
when MODE_MOVER
refresh_move(6)
when MODE_MOVEL
refresh_move(0)
end
# draws the ring menu
rect = Rect.new(@cx - 272, @cy + 24, self.contents.width-32, 32)
self.contents.draw_text(rect, @commands[@index],1)
end
#--------------------------------------------------------------------------
#math for moving the ring
#--------------------------------------------------------------------------
def refresh_start
d1 = 2.0 * Math::PI / @item_max  #d1(diamater 1)= 2.0 * pi / @item_max
d2 = 1.0 * Math::PI / STARTUP_FRAMES #d2(diamater 2)= 1.0 * pi / STARTUP_FRAMES
r = RING_R - 1.0 * RING_R * @steps / STARTUP_FRAMES#r(radius)=RING_R - 1.0*RING_R*@steps/STARTUP_FRAMES
for i in 0...@item_max #starts for loop
j = i - @index #j= i (0,.....,@item_max) - @index
d = d1 * j + d2 * @steps #d= d1 * j + d2 * @steps
x = @cx + ( r * Math.sin( d ) ).to_i #x = @cx + (r* Math.sin(d)).to_i
y = @cy - ( r * Math.cos( d ) ).to_i #y = @cy + (r*Math.cos(d)).to_i
draw_item(x, y, i) #draws the icon accordingly
end
@steps -= 1 #@steps removes 1 from itself
if @steps < 1 #if @steps is less than 1 then @mode= MODE_WAIT
@mode = MODE_WAIT
end
end
#--------------------------------------------------------------------------
# define method for refresh_wait
#--------------------------------------------------------------------------
def refresh_wait
d = 2.0 * Math::PI / @item_max
for i in 0...@item_max
j = i - @index
x = @cx + ( RING_R * Math.sin( d * j ) ).to_i
y = @cy - ( RING_R * Math.cos( d * j ) ).to_i
draw_item(x, y, i)
end
end
#--------------------------------------------------------------------------
# define refresh_move( mode ) method
#--------------------------------------------------------------------------
def refresh_move( mode )
d1 = 2.0 * Math::PI / @item_max
d2 = d1 / MOVING_FRAMES
d2 *= -1 if mode != 0
for i in 0...@item_max
j = i - @index
d = d1 * j + d2 * @steps
x = @cx + ( RING_R * Math.sin( d ) ).to_i
y = @cy - ( RING_R * Math.cos( d ) ).to_i
draw_item(x, y, i)
end
@steps -= 1
if @steps < 1
@mode = MODE_WAIT
end
end
#--------------------------------------------------------------------------
# defines the draw_item method
#--------------------------------------------------------------------------
def draw_item(x, y, i)
#p "x=" + x.to_s + " y=" + y.to_s + " i=" + @items[i].to_s
rect = Rect.new(0, 0, @items[i].width, @items[i].height)
if @index == i
self.contents.blt( x, y, @items[i], rect )
if @disabled[@index]
self.contents.blt( x, y, ICON_DISABLE, rect )
end
else
self.contents.blt( x, y, @items[i], rect, 128 )
if @disabled[@index]
self.contents.blt( x, y, ICON_DISABLE, rect, 128 )
end
end
end
#--------------------------------------------------------------------------
# define the disable_item(index) method
#--------------------------------------------------------------------------
def disable_item(index)
@disabled[index] = true
end
#--------------------------------------------------------------------------
# defines the start for moving the icons
#--------------------------------------------------------------------------
def setup_move_start
@mode = MODE_START
@steps = STARTUP_FRAMES
if SE_STARTUP != nil and SE_STARTUP != ""
Audio.se_play("Audio/SE/" + SE_STARTUP, 80, 100)
end
end
#--------------------------------------------------------------------------
# defines the moving of the icons
#--------------------------------------------------------------------------
def setup_move_move(mode)
if mode == MODE_MOVER
@index -= 1
@index = @items.size - 1 if @index < 0
elsif mode == MODE_MOVEL
@index += 1
@index = 0 if @index >= @items.size
else
return
end
@mode = mode
@steps = MOVING_FRAMES
end
#------------------------------------------------------------------------------------
# when animation (icons moving as well as index) then game waits
#------------------------------------------------------------------------------------
def animation?
return @mode != MODE_WAIT
end
end
 
#===================================================
# â–² CLASS Window_RingMenu Ends
#===================================================
 
 
#===================================================
# â–¼ CLASS Window_RingMenuStatus Begins
#===================================================
 
class Window_RingMenuStatus < Window_Selectable
#--------------------------------------------------------------------------
# initializes the menu_status window
#--------------------------------------------------------------------------
def initialize
super(204, 64, 232, 352)
self.contents = Bitmap.new(width - 32, height - 32)
self.contents.font.size = $chara_select[5]
refresh
self.active = false
self.index = -1
end
#--------------------------------------------------------------------------
# draws the information into the window
#--------------------------------------------------------------------------
def refresh
self.contents.clear
self.contents.font.name = $chara_select[0]
self.contents.font.color = text_color($chara_select[1])
@item_max = $game_party.actors.size
for i in 0...$game_party.actors.size
x = 80
y = 80 * i
actor = $game_party.actors[i]
draw_actor_graphic(actor, x - 40, y + 63)
draw_actor_name(actor, x, y + 24)
end
end
#--------------------------------------------------------------------------
# defines the cursor size when it's in the status window
#--------------------------------------------------------------------------
def update_cursor_rect
if @index < 0
self.cursor_rect.empty
else
self.cursor_rect.set(0, @index * 80, self.width - 32, 80)
end
end
end
#===================================================
# â–² CLASS Window_RingMenuStatus Ends
#===================================================
 
 
#===================================================
# â–¼ CLASS Game_Map Additional Code Begins
#===================================================
class Game_Map
 
#Dubealex Addition (from XRXS) to show Map Name on screen
def name
$map_infos[@map_id]
end
end
 
#===================================================
# â–² CLASS Game_Map Additional Code Ends
#===================================================
 
 
#===================================================
# â–¼ CLASS Scene_Title Additional Code Begins
#===================================================
class Scene_Title
 
#Dubealex Addition (from XRXS) to show Map Name on screen
$map_infos = load_data("Data/MapInfos.rxdata")
for key in $map_infos.keys
$map_infos[key] = $map_infos[key].name
end
end
 
#===================================================
# â–² CLASS Scene_Title Additional Code Ends
#===================================================
 
 
#===================================================
# â–¼ CLASS Window_Location Begins
#===================================================
 
class Window_Location < Window_Base
 
def initialize
super(0, 0, $window_size[0], $window_size[1])
self.contents = Bitmap.new(width - 32, height - 32)
self.contents.font.name = $location_text[0]
self.contents.font.size = $location_text[1]
refresh
end
 
def refresh
self.contents.clear
self.contents.font.color = text_color($location_text[2])
self.contents.draw_text(4, 0, 120, 32, $location_text[3])
self.contents.font.color = text_color($location_text[4])
self.contents.draw_text(4, 32, 120, 32, $game_map.name, 2)
end
 
end
#===================================================
# â–² CLASS Window_Location Ends
#===================================================
 
#===================================================
# â–² Ring Menu - Show Player Location R1 - Ends
#===================================================

Paso 2 de 3

Reemplazar el script por defecto "Window_Gold" por este:

#==============================================================================
# â–�  Window_Gold
#------------------------------------------------------------------------------
#  ゴールドを表示�るウィンドウ��。
#==============================================================================
 
class Window_Gold < Window_Base
#--------------------------------------------------------------------------
# � オブジェクト�期化
#--------------------------------------------------------------------------
def initialize
  super(0, 0, 160, 64)
  self.contents = Bitmap.new(width - 32, height - 32)
  self.contents.font.name = $defaultfonttype # "Gold" window font
  self.contents.font.size = $defaultfontsize
  refresh
end
#--------------------------------------------------------------------------
# � リフレッシュ
#--------------------------------------------------------------------------
def refresh
 
  self.contents.clear
  cx = contents.text_size($data_system.words.gold).width
  self.contents.font.color = normal_color
  self.contents.draw_text(4, 0, 120-cx-2, 32, $game_party.gold.to_s, 2)
  self.contents.font.color = system_color
  self.contents.draw_text(124-cx, 0, cx, 32, $data_system.words.gold, 2)
end
end

Paso 3 de 3

Reemplazar el script por defecto "Scene_End" por éste:

#==============================================================================
# â–�  Scene_End
#------------------------------------------------------------------------------
#  ゲー� 終� 画��処� を行� クラス��。
#==============================================================================
 
class Scene_End
#--------------------------------------------------------------------------
# � メイン処�
#--------------------------------------------------------------------------
def main
  # コマンドウィンドウを作�
  s1 = "Ir al Título"
  s2 = "Salir a Windows"
  s3 = "Cancelar"
  @command_window = Window_Command.new(192, [s1, s2, s3])
  @command_window.x = 320 - @command_window.width / 2
  @command_window.y = 240 - @command_window.height / 2
  # トランジション実行
  Graphics.transition
  # メインループ
  loop do
    # ゲー� 画�を更新
    Graphics.update
    # å…¥å� ›æƒ…å� ±ã‚’æ›´æ–°
    Input.update
    # フレー� 更新
    update
    # 画��切� 替���らループを中断
    if $scene != self
      break
    end
  end
  # トランジション準備
  Graphics.freeze
  # ウィンドウを解放
  @command_window.dispose
  # タイトル画é?¢ã?«åˆ‡ã‚� 替ã?ˆä¸­ã?®å� ´å?ˆ
  if $scene.is_a?(Scene_Title)
    # 画�をフェードアウト
    Graphics.transition
    Graphics.freeze
  end
end
#--------------------------------------------------------------------------
# � フレー� 更新
#--------------------------------------------------------------------------
def update
  # コマンドウィンドウを更æ–
 
  @command_window.update
  # B ボタンã?Œæ� ¼ã?•ã‚Œã?Ÿå� ´å?ˆ
  if Input.trigger?(Input::B)
    # キャンセル SE を演�
    $game_system.se_play($data_system.cancel_se)
    # メニュー画��切� 替�
    $scene = Scene_Menu.new(5)
    return
  end
  # C ボタンã?Œæ� ¼ã?•ã‚Œã?Ÿå� ´å?ˆ
  if Input.trigger?(Input::C)
    # コマンドウィンドウ�カーソル�置�� �
    case @command_window.index
    when 0  # タイトル�
      command_to_title
    when 1  # シャットダウン
      command_shutdown
    when 2  # ã‚„ã‚?ã‚‹
      command_cancel
    end
    return
  end
end
#--------------------------------------------------------------------------
# â—? コマンド [タイトルã?¸] é?¸æ� žæ™‚ã?®å‡¦ç?�
#--------------------------------------------------------------------------
def command_to_title
  # 決定 SE を演�
  $game_system.se_play($data_system.decision_se)
  # BGM�BGS�ME をフェードアウト
  Audio.bgm_fade(800)
  Audio.bgs_fade(800)
  Audio.me_fade(800)
  # タイトル画��切� 替�
  $scene = Scene_Title.new
end
#--------------------------------------------------------------------------
# â—? コマンド [シャットダウン] é?¸æ� žæ™‚ã?®å‡¦ç?�
#--------------------------------------------------------------------------
def command_shutdown
  # 決定 SE を演�
  $game_system.se_play($data_system.decision_se)
  # BGM�BGS�ME をフェードアウト
  Audio.bgm_fade(800)
  Audio.bgs_fade(800)
  Audio.me_fade(800)
  # シャットダウン
  $scene = nil
end
#--------------------------------------------------------------------------
# â—? コマンド [ã‚„ã‚?ã‚‹] é?¸æ� žæ™‚ã?®å‡¦ç?�
#--------------------------------------------------------------------------
def command_cancel
  # 決定 SE を演�
  $game_system.se_play($data_system.decision_se)
  # メニュー画��切� 替�
  $scene = Scene_Menu.new(4)
end
end
ayuda/rgss/biblioteca/menudeanillo.txt · Última modificación: 2019/09/23 04:01 por 127.0.0.1

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki