Hi Booleano, so for the icons you need to make each icon image into its own separate file. Usually the icons are 64 width 64 height PNG image files.
Then copy your 3 new icon image files into the "icons" sub-folder inside the ui folder. Then you'll be able to use them in a command button.
For running those scripts, step #1 is to modify your SidePane1.htm file to add a <head> section, usually <style> and <script> go in the <head> section of an html file.
So that would look like this:
code:
<html>
<head>
<style>
/* Turn off text block under command button icon */
moi\:CommandButton > div {
display:none;
}
/* Cambio de tamaño de los iconos */
moi\:CommandButton > img, moi\:CommandMenuButton > img, moi\:CommandSplitButton > img {
width:8em;
height:8em;
}
</style>
</head>
<body class="SidePaneBody">
....
Now add a <script> section inside the <head> after the <style>:
code:
<html>
<head>
<style>
/* Turn off text block under command button icon */
moi\:CommandButton > div {
display:none;
}
/* Cambio de tamaño de los iconos */
moi\:CommandButton > img, moi\:CommandMenuButton > img, moi\:CommandSplitButton > img {
width:8em;
height:8em;
}
</style>
<script>
</script>
</head>
Then inside the <script></script> section you can add functions that contain script code:
code:
<script>
function ScriptCodeFunction1()
{
}
</script>
copy the script code from your Scripts.txt inside the function, in between { }.
To make a command button call the script function, put in an onclick="" attribute in the moi:CommandButton element, like this:
<moi:CommandButton icon="icons/icon_filename.png" onclick="ScriptCodeFunction1()">Text here</moi:CommandButton>
You can remove the command="" attribute from these particular 3 buttons, they will be calling script code inside this same file instead of running a command.
Let me know if you're still stuck.
- Michael
