topic Re: Share - dashlet - stylesheet in Alfresco Archive

Share - dashlet - stylesheet

luigi — Fri, 07 Feb 2014 11:34:49 GMT

Ciao a tutti,stavo provando a creare una dashlet in Alfresco Share 4.2.e, seguendo questo <a href='http://zlayer.net/blog/?p=255'>esempio</a>.Il risultato è quello atteso ovviamente, e riesco a visualizzarlo all'indirizzo http://127.0.0.1:8080/share/page/components/dashlets/my-dashlet‍‍‍

Re: Share - dashlet - stylesheet

davidciamberlan — Mon, 10 Feb 2014 17:15:16 GMT

Ciao,

il codice sembra corretto.
Il problema secondo me è dovuto al fatto che le proprietà che setti nel tuo css vengono sovrascritte da qualche altro css.

Per capire se il problema è questo, puoi provare a inserire nel file ftl un elemento di prova con un id personalizzato come ad esempio:

<div id="my-dashlet">Prova!</div>‍

e poi aggiungere una regola nel css per questo nuovo elemento.

#my-dashlet { color: red; }‍

.

Ricarica tutto (consigliato per evitare problemi di cashing con il css) e se vedi la scritta "Prova!" in rosso, allora il problema è quello che ti ho detto.

In questo caso puoi inserire nel tuo elemento degli id (o class) personalizzati nel tuo elemento, (es:

<div class="my-title">…‍

oppure inserire la direttiva !important dopo la proprietà che vuoi modificare (

color: red !important‍

).
Attenzione però che se fai in questo modo per la classe "title" cambierai il colore di tutte le dashlet.

Spero questo risolva il tuo problema.

Re: Share - dashlet - stylesheet

luigi — Tue, 11 Feb 2014 13:37:40 GMT

Ciao David,

non sono risucito a variare i colori della dashlet nè con l'id personalizzato e nemmeno con la direttiva "! important".
Come se non interpretasse il css !


<@markup id="css" >
 <#– Link to your CSS file –>
 <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/dashlets/my-dashlet.css" group="dashlets"/>
</@>

<@markup id="html">
  <@uniqueIdDiv>
    <div class="dashlet my-class">
      <div class="title">${msg("header.title")}</div>
        <div class="body">${msg("text.hello")}</div>          
      </div>
      <div class="blogs-greeting-io">${url.context}</div>
      <div id="my-dashlet-pippo">Prova!</div>
    </@>
 </@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


.title {color:orange !important;}
.blogs-greeting-io {
   padding: 10px;
   color: orange;
   font-weight: bold;
}
#my-dashlet-pippo { color: red; }
‍‍‍‍‍‍‍‍‍

In allegato quanto visualizzo a video.

Luigi

Re: Share - dashlet - stylesheet

davidciamberlan — Tue, 11 Feb 2014 14:08:35 GMT

Ciao,

sono abbastanza sicuro che si tratti ancora di problemi di cache.

Mi confermi che il tuo file css si trova in webapps/share/components/dashlets e con l'url http://localhost/res/components/dashlets/my-dashlet.css riesci a vedere correttamente il css?

Prova a:
caricare la pagina con un altro browser oppure a cambiare il nome del css (anche nella relativa riga del template) e ricaricare la pagina.

Re: Share - dashlet - stylesheet

luigi — Tue, 11 Feb 2014 15:49:30 GMT

ok David.
Per mia ignoranza e perchè mi ero perso una frase del blog da cui ho ricavato l'esempio, ossia


You can even access the component directly, by going to http://localhost:8080/share/components/dashlets/my-dashlet – you would only get the component (dashlet), not the whole page.
‍‍‍

mi ostinavo a voler visualizzare direttamente da quel link anche le trasformazioni del file di stile, mentre queste sono visibili solo in fase di customizzazione della user dashboard …

Ti ringrazio comunque per la tua assistenza.

"Prometto" che la prossima volta prima di aprire un post sul forum leggerò meglio ]

Ciao
Luigi