change style to Fabrik's fileupload plugin

[cerrani]

Hello everyone, they asked me to change the style of the fileupload element in the display of a form and I can't figure it out because it is difficult for me in joomla to understand which files to put my hand to.
Having said that what I want to do is in the example upload element (attached image) remove the gray background or remove the progress bar, how can I do? Which files should I work on and where are they in my site directory?
For info I have activated "Use Ajax upload" in the options of the fileupload component for this element

Thanks for those who will have the patience to explain and make me understand how to intervene.

This is the code that I analyze with the firefox web tools:

<div class="fabrikElement">
        <div class="fabrikSubElementContainer">

<span id="xtr_oggetti___oggetti_img"></span>


<div class="plupload_container" id="xtr_oggetti___oggetti_img_container" style="min-height: 200px; width: 400px; position: relative;">
    <div class="plupload" id="xtr_oggetti___oggetti_img_dropList_container">
        <table class="table table-striped table-condensed">
            <thead style="">
                <tr>
                    <th class="span4">Nome file</th>
                    <th class="span2 plupload_crop">&nbsp;</th>
                    <th class="span5 plupload_file_status"></th>
                    <th class="span1 plupload_file_action">&nbsp;</th>
                </tr>
            </thead>
            <tbody class="plupload_filelist" id="xtr_oggetti___oggetti_img_dropList">
            <tr id="p1f5asv23m15bg3q2pkcng1cbp9" class="plupload_delete plupload_done"><td class="span6 plupload_file_name"><span>3.png</span></td><td class="span1 plupload_resize"><a class="editImage" href="http://192.168.0.50/images/stories/3.png" alt="Ridimensiona" style="" id="resizebutton_p1f5asv23m15bg3q2pkcng1cbp9"><i data-isicon="true" class="icon-picture "></i></a></td><td class="span5 plupload_file_status"><div class="progress  " style="margin-left=6px; ">
    <div class="progress  " style="margin-left=6px; ">
    <div class="progress  " style="margin-left=6px; ">
    <div class="bar bar-success " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div></td><td class="span1 plupload_file_action"><a href="#"><i data-isicon="true" class="icon-delete"></i></a></td></tr></tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                                <a id="xtr_oggetti___oggetti_img_browseButton" class="btn btn-mini" href="#" style="position: relative; z-index: 0;"><i data-isicon="true" class="icon-plus-sign icon-plus"></i>                        Aggiungi file</a>
                            <span class="plupload_upload_status"></span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- FALLBACK; SHOULD LOADING OF PLUPLOAD FAIL -->
   
<div id="p1f5asuu63seu1as51ooi1rsd1cjk6_html5_container" style="position: absolute; background: transparent none repeat scroll 0% 0%; width: 123px; height: 34px; overflow: hidden; z-index: -1; opacity: 0; top: 119px; left: 5px;" class="plupload html5"><input id="p1f5asuu63seu1as51ooi1rsd1cjk6_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" type="file" accept="image/bmp,text/csv,application/msword,image/gif,image/jpeg,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-excel" multiple="multiple"></div></div><input type="hidden" name="xtr_oggetti___oggetti_img[id][/images/stories/3.png]" id="id_p1f5asv23m15bg3q2pkcng1cbp9" value="0"><input type="hidden" name="xtr_oggetti___oggetti_img[cropdata][/images/stories/3.png]" id="data_p1f5asv23m15bg3q2pkcng1cbp9"><input type="hidden" name="xtr_oggetti___oggetti_img[crop][/images/stories/3.png]" id="coords_p1f5asv23m15bg3q2pkcng1cbp9">

</div>    </div>

 

[troester]

You can add custom CSS to your Fabrik form template
http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/
e.g. for hiding the scrollbar
#xtr_oggetti___oggetti_img_dropList_container .plupload_file_status {display: none;}

 

[cerrani]

I managed to remove the progress bar and the icon by adding these rules to the custom.css of the template

.plupload_file_status {
  display: none; !important;
}
.icon-picture {
  display: none; !important;
}

now I should remove the gray background but I don't understand how to do it and on which css to act

 

[juuser]

Inspect the container with browser inspect tool. I cannot check now, but it's probably "plupload_container". So

.plupload_container {
background-color:transparent!important;
}

should do.

 

[cerrani]

I tried but don't work, I m afraid that it is the table class within the pluploader class that is causing the problem

 

[juuser]

OK, in that case it's probably a row/cell class. So try:

.plupload_container > .plupload > table td {
background-color:#fff!important;
}

 

[cerrani]

Great!!! It works!!! Thank you very much!!!

 

[cerrani]

OK, in that case it's probably a row/cell class. So try:

.plupload_container > .plupload > table td {
background-color:#fff!important;
}

Last question, I want to remove "span options",

<tr>
                    <th class="span4">Nome file</th>
                    <th class="span2 plupload_crop">&nbsp;</th>
                    <th class="span5 plupload_file_status"></th>
                    <th class="span1 plupload_file_action">&nbsp;</th>
                </tr>

I tried in this way but is wrong....

.plupload_container > .plupload > table > span1 {
display: none; !important;
}

 

[troester]

This is all about CSS not Fabrik. You can use your browser to inspect and test the CSS which is applied, overridden...

.plupload table td.plupload_file_action { display: none;}
should do.