• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

change style to Fabrik's fileupload plugin

cerrani

New Member
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:

Code:
<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>
 

Attachments

  • view upload elements.JPG
    view upload elements.JPG
    16.6 KB · Views: 63
I managed to remove the progress bar and the icon by adding these rules to the custom.css of the template

Code:
.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
 

Attachments

  • view upload elements.JPG
    view upload elements.JPG
    16.6 KB · Views: 50
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.
 
I tried but don't work, I m afraid that it is the table class within the pluploader class that is causing the problem
 
OK, in that case it's probably a row/cell class. So try:

.plupload_container > .plupload > table td {
background-color:#fff!important;
}
 
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",

CSS:
<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;
}
 
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.
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top