In it’s basic configuration, the plugin is fully responsive thanks to the CSS property of the percentage of the size. To redesign the plugin using CSS, you need to understand how the plugin’s HTML is structured. To use the plugin in it’s default CSS-configuration, just copy the following stylesheet into the custom CSS field

Default CSS

/*
The Plugin is devided into 3 sections and one header-section:

- the control_area is present in every of the 3 sections

-- The Login_Area is the default view of the plugin that is shown, when no user is logged in

-- The Main_Area is the the view that is shown, when a user is 
logged in to the plugin and hasn't started a simualtion

-- The result area is shown, when a logged in user submits a job 
*/

#csme_msg_view{
 text-align: center;
}


#csme_control_area{
width:90%;
height:auto;
 margin: 0 auto;
}

#csme_login_area{
width:90%;
height:90%;
 margin: 0 auto;
}

#csme_main_area{
width:90%;
 margin: 0 auto;

}

#csme_result_area{
width:90%;
 margin: 0 auto;
}

The plugin is divided into 3 sections and a header section. Each area is displayed below the header section.

<form id="csme-parent-form">
	<div id="csme_control_area"></div>
	<div id="csme_login_area"></div>
	<div id="csme_main_area"></div>
	<div id="csme_result_area"></div>
</form>

Description of each section

 

The control_area

The control_area is visible in all sections. Its shows the name of your plugin and by default the logout-button in hidden-mode. It also features two more <td>-tags for custom content like a logo and a link or description. All HTML-elements that are inside the control_area are listet below:

<div id="csme_control_area"><--Root-element
                        <table id="csme_ct">
                            <tbody><tr>
                                <th id="csme_c1"></th> <--custom field 1
                                <th id="csme_c2"></th> <--custom field 2
                            </tr>
                            <tr>
                                <td>
                                    <label id="csme_msg_view">cloudSME HPC plugin</label> <-- Name can be changed in the plugin-editor
                                </td>
                                <td>
                                    <label id="cb_logout" class="hidden">Log out</label> <--logout-button
                                </td>
                            </tr>
                        </tbody></table>
                    </div>

The login_area

As the name allready indicates, the login_area provides all needed input-fields for the login of the plugin.

<div id="csme_login_area"><--Root-element

                        <label class="login-field-icon fui-user" for="csme-reg-name"></label>
                        <div class="form-group is-empty">
                                   <input name="reg_name" type="text" class="form-control" placeholder="Username" value="" id="csme-reg-name"> <--Username
                         </div>

                        <label class="login-field-icon fui-lock" for="csme-reg-pass"></label>
                        <div class="form-group is-empty">
                                   <input name="reg_password" type="password" class="form-control" placeholder="Password" value="" id="csme-reg-pass"><--Password
                        </div>
                        <br>
                        <button id="cb_login" type="button" class="btn btn-primary btn-block " rel="tooltip" data-placement="top" title="" data-original-title="Log into your platform account">Login
                        </button> <--Login-button
                    </div>

The main_area

The main_area appears after a user has logged-in to the plugin. Its the place where you specify your job-parameters and your input-files.

<div id="csme_main_area" class="hidden"><--Root-element

                        <div id="info_block">
                            <label id="soft_name" rel="tooltip" data-placement="top" title="" data-original-title="Software to process you jobs"></label> <--Software name
                        </div>

                        <div class="panel">
                            <div class="panel-body" style="">
                                <div class="form-group has-feedback is-empty">
                                    <input type="text" class="form-control" id="inputArgs" placeholder="Specify parameters" rel="tooltip" data-placement="top" title="" data-original-title="Specify here job execution parameters"> <--Parameter field

                                </div>

                                <div class="form-group has-feedback is-empty is-fileinput">
                                    <input type="file" id="file_upload" class="filestyle" data-classbutton="btn btn-primary" data-placeholder="Select file" data-classicon="icon-plus" data-buttontext="Job input" data-buttonbefore="true" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);"><--file-selection-button

<div class="bootstrap-filestyle input-group form-group"><span class="group-span-filestyle input-group-btn" tabindex="0"><label for="file_upload" class="btn btn-default ">
<span class="icon-span-filestyle glyphicon glyphicon-folder-open"></span>
<span class="buttonText">Job input</span> <--Button-Text</label></span>
<input type="text" class="form-control" placeholder="Select file" disabled=""></div>
                                    <input type="checkbox" id="is_archive"> <--Is archive-checkbox
                                    
<label style="text-align: left" rel="tooltip" data-placement="top" title="" data-original-title="supported formats: .tgz, .tar.gz, .tar, .gzip, .gz, .zip">archive</label><br>

                                    <button id="composed_command" type="button" class="btn btn-primary btn-block btn-primary">
                                        Launch job
                                    </button> <--Launch-job-button

                                </div>
                            </div>
                        </div>
                    </div>

The result_area

The result area displays a user simulation-output.

<div id="csme_result_area" class="hidden"><--Root-element

                        

                            <table id="job_status_table" class="table">
                                <thead id="job_status_table_head">
                                <tr>
                                    <th style="width: 50%;">Job</th>
                                    <th style="width: 50%;">Status</th>
                                </tr>
                                </thead>
                                <tbody id="job_status_table_body">
                                <tr>
                                    <td id="job_name_1">updating..</td>
                                    <td id="job_status_1">updating..</td>
                                </tr>
                                </tbody>
                            </table>

                            <button id="get_files" type="button" class="btn btn-primary btn-block" rel="tooltip" data-placement="top" title="" data-original-title="After job completed get links to files">Get files
                            </button>

                            <table id="data_files_table" class="table">
                                <thead id="data_files_table_head">
                                <tr>
                                    <th style="width: 50%;">Name</th>
                                    <th style="width: 50%;">Link</th>
                                </tr>
                                </thead>
                                <tbody id="data_files_table_body">

                                </tbody>
                            </table>
                            <label id="csme_next_job" style="display: none;">Run next job</label> <--Next-Job-button
                        
                    </div>