cambiare stile a plugin fileupload di Fabrik

[andrea cerra]

Ciao a tutti, mi hanno chiesto di modificare lo stile dell'elemento fileupload nella visualizzazione di una form e non riesco a venirne a capo perchè mi è ostico in joomla capire a quali file mettere mano (purtroppo sono obbligato dal committente ad usare joomla).
Detto questo quello che voglio fare è nell'elemnto di upload di esempio (immagine allegate) togliere lo sfondo grigio oppure togliere la progress bar, come posso fare? Su quali file devo intervenire e dove sono nella directory del mio sito?
Per info ho attivato "Use Ajax upload" nelle opzioni del componente fileupload per questo elemento

Grazie per chi avrà la pazienza di spiegarmi e di farmi capire in che modo intervenire.

Questo il codice che analizzo con gli strumenti web di firefox:

Codice: [Seleziona]

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


[tomtomeight]

Per cambiare stile non serve sapere quale css modificare, anche se e facile individuarli da analizza del browser come per tutti i siti e non per solo joomla. Poi individuate le classi basta scriverle in un custom.css che è individuabile da documentazione del template.

[andrea cerra]

quindi se volessi cambiare questa classe
div class="bar bar-success mi basta  nel custom.css del template  scrivere nuove regole  oppure settare  display: none se non volgio visualizzarla giusto?

[tomtomeight]

Esatto. Se non aggancia metti !important per dargli prevalenza.

[andrea cerra]

Ho provato ma non funziona, ho modificato così il custom.css come da foto ma niente da fare rimane tale e quale a prima

Codice: [Seleziona]

.bar {
  display: none; !important;
}

[andrea cerra]

come non detto sono riuscito per la barra di progresso, adesso sto litigando con un iconcina delle immagini

[tomtomeight]

Devi eliminare la cache ad ogni modifica.

[giusebos]

purtroppo sono obbligato dal committente ad usare joomla

Questa è fortuna, pensa se ti capitava di mettere mano ad un sito fatto con wordpress.

Comunque, come per tutte le cose: se lo sai fare è semplice, se non lo sai fare è impossibile.

Conoscere la sovrascrittura dei css non è una cosa specifica di joomla, quindi cosa non ti è chiaro?

Forse la verità è che non è proprio il tuo lavoro, altrimenti joomla, wordpress, prestashp typo3 o qualsiasi altro cms portano con se le buone regole della sovrascrittura o override in inglese.

[andrea cerra]

Conoscere la sovrascrittura dei css non è una cosa specifica di joomla, quindi cosa non ti è chiaro?

Non mi è chiaro come ogni css è legato alla pagina che voglio modificare e diciamo che ho sempre odiato i css, comunque poco importa fosse stato per me non avrai mai usato un cms per quello che dovevo fare.
Ora sono riuscito a togliere la progress bar e l'iconcina ma non riesco in nessun modo facendo override in custom.css a togliere lo sfondo grigio:se modifico questa classe ottengo certo quello che voglio ma io la dovrei modificare solo 

Codice: [Seleziona]

class="table table-striped table-condensed"ma io la dovrei modificare solo nella classe

Codice: [Seleziona]

plupload non ne vengo a capo

[giusebos]

con questo modus operandi nemmeno io ne vengo a capo.

C'è una procedura semplice, un workflow, che serve proprio ad aiutarti: se mi piazzi li un pezzo di codice come hai fatto senza contesto, senza pagina, senza link, io che ci dovrei fare?

[andrea cerra]

In realtà è tutto scritto nel mio primo post con anche gli screenshot del caso,
tomtomeight mi ha aiutato nel capire come togliere la progress bar ad esempio con le medesime indicazioni.
Di più non saprei come darti le indicazioni che ti servono

[giusebos]

tomtom è più bravo di me, io ho bisogno di più info...