Problème d'intégration de CSS dans un portlet

[antoine fidalgo, modifié il y a 10 années.]

Bonjour bonjour,

Alors voilà, mon problème est que lorsque que j'écris du CSS directement dans une JSP celui-ci fonctionne parfaitement. Par contre lorsque je l'écris dans un fichier CSS et que je l'inclus dans la JSP via la balise <header-portlet-css>/css/main.css</header-portlet-css> du fichier liferay-portlet.xml, celui-ci ne fonctionne plus.

L'attribut !important dans le CSS n'y change rien. Et l'inclusion du CSS via une balise type
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css"/> non plus.

Mon portail est doté d'un Thème et d'un Layout créés spécialement pour son usage (Je précise au cas ou cela aurai une incidence).

Je reste donc pour le moment condamné, bien que je continue les recherches, à écrire le CSS directement dans les JSP.

Merci à toute personne qui me viendrait en aide

[Yousri BENDIABDALLAH, modifié il y a 10 années.]

Bonjour,

Est-ce que ton fichier CSS n'est pas inséré ou c'est le CSS qu'il n'est pas appliqué ?

As-tu testé la balise : <footer-portal-css>/css/main.css</footer-portal-css>

A+

[Darryl Kpizingui, modifié il y a 10 années.]

Bonjour,

Le dossier css se trouve t-il bien dans le docroot? Le chemin complet depuis la racine du portlet doit être exemple-portlet/docroot/css/main.css.

Pour débugger, vous pouvez copier l'URL du CSS directement dans le navigateur et inspecter les requêtes réseaux. Pour avoir l'URL, vous pouvez faire un echo dans la JSP

 <%=request.getContextPath()%>/css/main.css

Sinon, il faut peut être vérifié dans les logs si il n' y a pas de problème de compilation sass ou de cache dans le navigateur.

Bon courage.

[antoine fidalgo, modifié il y a 10 années.]

Merci à tous les deux de votre aide.

Yousri, je pense que le CSS n'est juste pas appliqué puisque l'inclusion du fichier CSS est bien présente dans le code source final et l'url fournie par le navigateur renvoie bien vers le CSS en question. Sinon je n'avais pas testé la balise <footer-portal-css>/css/main.css</footer-portal-css> mais elle n'a pas d'effet non plus.

Darryl, mon fichier CSS se trouve bien dans le dossier mon_portlet/docroot/css/main.css. L'url /mon_portlet/css/main.css donnée par le echo de <%=request.getContextPath()%>/css/main.css me renvoie bien vers mon CSS lorsque je renseigne l'url suivante dans mon navigateur : url_de_mon_portail/mon_portlet/css/main.css. Au niveau réseau le fichier CSS renvoie bien Status Code:200 OK (from cache). Peut être donc en effet un problème de cache mais alors là, à part vider le cache navigateur et supprimer le fichier CSS du répertoire docroot/css/.sass-cache/main.css pour qu'il soit re généré (chose qui a déjà été faite), je ne vois pas trop quoi faire :s

[Darryl Kpizingui, modifié il y a 10 années.]

Si le fichier est accessible mais que les styles ne sont pas appliqués sur les éléments, vous avez peut être des conflits ou un problème de sélecteurs. Avec Chrome developer tool (le console web de Chrome) vous deviez pouvoir inspecter les éléments et voir les styles appliqués, surchargés ou désactivés. Pour chaque style l'outil indique sa provenance, ce qui facilite le diagnostique. L'ouverture de la console permet aussi de ne pas recharger les données depuis le cache et de voir/revoir les requêtes réseaux et leurs contenus.

Sinon le problème ne peut venir de <footer-portal-css> ni <header-portal-css> puisque l'utilisation de la balise <link> ne change rien.

[Antoine FIDALGO, modifié il y a 10 années.]

Re bonjour,

Problème résolu ! Il s'agissait bien d'un problème de sélecteur. Liferay semble réagir différemment pour le CSS suivant si l'on met un id ou une classe sur un élément. Beaucoup de mes éléments possédaient une classe et du coup le CSS ne s'appliquait pas dessus, alors qu'avec des id cela fonctionne correctement pour les éléments en question. Bizarre, peut être une question de précision ... mais au final tout fonctionne.

Merci à vous pour votre aide ! C'est sympa d'avoir pris un peux de temps pour essayer de résoudre mon problème