[RÉGLÉ] Modifier les CSS d'un module externe ?

[Pataroller]

Je travaille sur des modifications du template de base protostar pour un futur site.

J'ai créé un custom.css qui remplit son office et je maitrise l'override des vues. Tout va bien donc et ben non.

Je veux modifier une ligne CSS du fichier Style.css d'un module de connexion qui ouvre un popup. Si je le fais directement dans le fichier natif cela marche, mais ce que je veux c'est que cette modification css aille dans le fichier custom.css. Et là rien. J'ai beau placer en fin de fichier rien n'y fait.
Pourtant avec firebug je vois bien ma modif de CSS, mais elle apparait barrée et après la css du fichier natif. J'en conclue que le fichier de mon module se charge peut être avant mon fichier custom. Mais comment fait-on pour changer cela ? Déjà que je ne sais pas comment on fait pour vérifier l'ordre de chargement.

Quelqu'un a des pistes pour m'aider ?

Merci

[PhilJ]

Re : Modifier les CSS d'un module externe ?

Bonjour,

[...] avec firebug je vois bien ma modif de CSS, mais elle apparait barrée et après la css du fichier natif. J'en conclue que le fichier de mon module se charge peut être avant mon fichier custom. Mais comment fait-on pour changer cela ? Déjà que je ne sais pas comment on fait pour vérifier l'ordre de chargement.

C'est très simple : il suffit de consulter le code source de l'une des pages de votre site (par exemple en utilisant la combinaison de touches CTRL+U), le principe général étant que c'est le dernier qui « parle » qui l'emporte.

[...] J'ai créé un custom.css qui remplit son office et je maitrise l'override des vues. Tout va bien donc et ben non. Je veux modifier une ligne CSS du fichier Style.css d'un module de connexion qui ouvre un popup. Si je le fais directement dans le fichier natif cela marche, mais ce que je veux c'est que cette modification css aille dans le fichier custom.css. Et là rien. J'ai beau placer en fin de fichier rien n'y fait.

—

• Si, dans le code source, l'appel au custom.css apparaît après le style.css du module de connexion, alors ce sont les directives CSS de custom.css qui l'emportent.
  —
• Si, au contraire, dans le code source, l'appel au custom.css apparaît avant le style.css du module de connexion, alors ce sont les directives CSS de style.css qui l'emportent.

=> Vous pouvez essayer d'ajouter l'attribut !important à la valeur de la propriété de la règle à modifier. L'attribut !important permet de forcer une règle CSS.

Exemple :

Supposons par exemple que style.css contienne :
—

p {

color: #333;

}
—

et que custom.css se charge avant style.css, vous pouvez modifier la règle dans custom.css en y introduisant :
—

p {

color: #000 !important;

}

Le cas le plus ennuyeux est (évidemment) lorsque custom.css se charge avant style.css et qu'une règle CSS de style.css contient un attribut !important. Dans ce cas, il n'y a guère d'autre moyen que de modifier style.css. Heureusement, cette situation reste assez rare.

[Pataroller]

Re : Modifier les CSS d'un module externe ?

J'ai vérifié et mon custom.css se charge immédiatement après le template.css et avant tous les appels aux modules.

De plus la ligne CSS que je veux modifier à l'attribut important.

Je vais donc voir en fonction de tes explications ce qui marche le mieux.

Merci pour ces explications qui sont très claires.

[Pataroller]

Re : Modifier les CSS d'un module externe ?

J'ai tenté d'enlever l'attribut important de la ligne CSS dans Style.css, mais rien n'y fait.

J'ai alors tenter de changer l'ordre des appels aux CSS dans le fichier index.php, pareil custom.css est appelé avant les css des modules.

A toutes fins utiles le code source :
<link rel="stylesheet" href="/plugins/content/responsive-tables/responsive-tables.css">
<link rel="stylesheet" href="/templates/protostar/css/template.css">
<link rel="stylesheet" href="/templates/protostar/css/custom.css">
<link rel="stylesheet" href="http://www.aflux.fr/media/mod_mailchimpsignup/css/mailchimpsignup.css">
<link rel="stylesheet" href="/media/mod_languages/css/template.css">
<link rel="stylesheet" href="http://www.aflux.fr/modules/mod_je_popuplogin/css/style.css">

Et voici le code dans le fichier index.php :
// Add Stylesheets

// Check for a custom User CSS file
$userCss = JPATH_SITE . '/templates/' . $this->template . '/css/user.css';

if (file_exists($userCss) && filesize($userCss) > 0)
{
$doc->addStyleSheetVersion('templates/' . $this->template . '/css/user.css');
}

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Check for a custom template CSS file
$userCss = JPATH_SITE . '/templates/' . $this->template . '/css/custom.css';
if (file_exists($userCss) && filesize($userCss) > 0)
{
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');
}
else {
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
}

J'ai bien essayé de mettre l'appel au custom.css en dernier, mais le résultat n'est pas là. En fait je ne sais pas bien où se fait l'appel aux css de module.

[PhilJ]

Re : Modifier les CSS d'un module externe ?

J'ai tenté d'enlever l'attribut important de la ligne CSS dans Style.css, mais rien n'y fait.

Quelle est cette ligne / cette règle ?

[Pataroller]

Re : Modifier les CSS d'un module externe ?

#je-popuplogin { margin:0; text-shadow:none!important}
//1ere ligne dans style.css du module je_popuplogin

#je-popuplogin { margin:10px 0; text-shadow:none!important}
// placé en bas du custom.css

[PhilJ]

Re : Modifier les CSS d'un module externe ?

La solution est simple dans ce cas, puisque la marge extérieure (= margin) n'a pas d'attribut !important dans style.css. De ce fait, même si custom.css est chargé avant style.css, il suffit d'ajouter !important dans custom.css à la directive margin.

=> Dans custom.css :
—

#je-popuplogin {

margin: 10px 0 !important;

}

Inutile de remettre text-shadow: none !important.

[Pataroller]

Re : Modifier les CSS d'un module externe ?

Désolé pour le retard pour répondre j'étais absent ces jours derniers.

En tout cas merci, cette fois ci est la bonne et j'ai appris quelque chose d'important !!!!!!!!!

La solution est simple dans ce cas, puisque la marge extérieure (= margin) n'a pas d'attribut !important dans style.css. De ce fait, même si custom.css est chargé avant style.css, il suffit d'ajouter !important dans custom.css à la directive margin.

=> Dans custom.css :
—

#je-popuplogin {

margin: 10px 0 !important;

}

Inutile de remettre text-shadow: none !important.

[PhilJ]

Re : Modifier les CSS d'un module externe ?

[...] et j'ai appris quelque chose d'important !!!!!!!!!

Je dirais même plus : quelque chose d' !important



Amicalement,