Modifier les CSS d'un module externe ?

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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
    Pat

  • #2
    Re : Modifier les CSS d'un module externe ?

    Bonjour,


    Envoyé par Pataroller Voir le message
    [...] 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.


    Envoyé par Pataroller Voir le message
    [...] 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.
    Dernière édition par PhilJ à 16/10/2016, 15h49
    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

    Commentaire


    • #3
      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.
      Dernière édition par Pataroller à 16/10/2016, 16h15 Raison: ajout
      Pat

      Commentaire


      • #4
        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.
        Pat

        Commentaire


        • #5
          Re : Modifier les CSS d'un module externe ?

          Envoyé par Pataroller Voir le message
          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 ?
          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

          Commentaire


          • #6
            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
            Pat

            Commentaire


            • #7
              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.
              Dernière édition par PhilJ à 16/10/2016, 18h15
              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

              Commentaire


              • #8
                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 !!!!!!!!!


                Envoyé par PhilJ Voir le message
                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.
                Pat

                Commentaire


                • #9
                  Re : Modifier les CSS d'un module externe ?

                  Envoyé par Pataroller Voir le message
                  [...] et j'ai appris quelque chose d'important !!!!!!!!!
                  Je dirais même plus : quelque chose d' !important



                  Amicalement,
                  Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X