CSS spécifique pour un article et ligne blanche

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

  • [RÉGLÉ] CSS spécifique pour un article et ligne blanche

    Bonjour,

    après quelques recherches sur notre ami Google et sur ce même forum je n'ai toujours pas trouvé une solution qui convient à mon problème, même si j'ai pu croisé des cas plus ou moins similaires il y a pas ou peu de réponses malheuresement, c'est pourquoi je viens vers vous aujourd'hui.

    Sur la template de mon site (template protostar modifier par mes soins) j'ai un menu 'informations' lorsque je clique sur ce menu il me renvoi vers une page qui contient un unique article dans lequel ce trouve des informations

    j'affiche le titre de cette article et donc, par default il prend le css que j'ai défini pour la balise h2.

    mon problème est que je ne vois pas comment identifié ce titre en particulier pour lui appliquer un CSS différents des autres.En effet je ne peux pas le cibler avec des attributs tel que h2[itemprop='name'] puisque la plus part ( si ce n'est tous) des articles on le même corps html à savoir :

    Code HTML:
    <div class="page-header">
       <h2 itemprop="name">
    	<a href="/joomla_3.3.1_frpackage/index.php/informations" itemprop="url"> Informations</a>
       </h2>
    </div>
    Ma question est donc simple : comment ciblé uniquement ce titre d'article afin de lui attribué un css qui lui est propre ?

    Edit 1 : j'en profite aussi pour vous demander si il est possible de modifier la couleur de la ligne blanche présente sous chaque titre d'article ? (cf : image)
    Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture.jpg 
Affichages : 1 
Taille : 5,3 Ko 
ID : 1820567


    Bien cordialement
    Dernière édition par Akharii à 29/07/2014, 14h55 Raison: problème de la ligne blanche
    Le blog des Développeurs NEP : http://nep-dev.blogspot.fr
    La communauté NEP : http://nep-gaming.fr/home

  • #2
    Re : CSS spécifique pour un article et ligne blanche

    Bonjour,

    et bienvenue sur le forum

    mon problème est que je ne vois pas comment identifié ce titre en particulier pour lui appliquer un CSS différents des autres.En effet je ne peux pas le cibler avec des attributs tel que h2[itemprop='name'] puisque la plus part ( si ce n'est tous) des articles on le même corps html à savoir :
    identifier de manière unique un élément HTML ne peut se faire de manière sûre et certaine qu'en lui attribuant un identifiant (cela se fait facilement avec un éditeur tel que JCE, ou si tu ne souhaites pas lui attribuer d'identifiant 'personnalisé' en lui attachant une classe particulière).

    Pour la deuxième question, le plus simple est (avec Firefox) de faire clic-droit sur la ligne blanche puis inspect element with firebug, Chrome et IE ont le même fonctionnement avec un nom de menu différent.

    Si tu veux qu'on t'aide plus précisément sur le sujet, un lien vers ton site aiderait ...

    Cordialement
    Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

    Commentaire


    • #3
      Re : CSS spécifique pour un article et ligne blanche

      Envoyé par PieceOfCake Voir le message
      Bonjour,

      et bienvenue sur le forum



      identifier de manière unique un élément HTML ne peut se faire de manière sûre et certaine qu'en lui attribuant un identifiant (cela se fait facilement avec un éditeur tel que JCE, ou si tu ne souhaites pas lui attribuer d'identifiant 'personnalisé' en lui attachant une classe particulière).

      Pour la deuxième question, le plus simple est (avec Firefox) de faire clic-droit sur la ligne blanche puis inspect element with firebug, Chrome et IE ont le même fonctionnement avec un nom de menu différent.

      Si tu veux qu'on t'aide plus précisément sur le sujet, un lien vers ton site aiderait ...

      Cordialement
      Merci beaucoup pour ta réponse.

      Concernant le ciblage CSS, je suis d'accord pour attribuer une classe particuliére à mon élément le soucis c'est qu'il s'agit d'un article donc dans mon HTML c'est le
      Code HTML:
      <jdoc:include type="message" />
      qui gere l'affichage des articles, chose qu'il fait trés bien sur ma page d'acceuil.Le problème c'est que comme c'est generic (il me semble) je ne peux pas agir directement sur le titre d'un article en particulier puisqu'ils sont tous afficher de la sorte :

      Code HTML:
      <div class="page-header">
         <h2 itemprop="name">
      	<a href="/joomla_3.3.1_frpackage/index.php/l'article" itemprop="url"> le titre de l'article</a>
         </h2>
      </div>
      j'ai déja defini un style par defaut pour h2 et j'ai donc besoin d'un autre style h2 pour cet article en particulier.


      Edit 1 : Concernant la ligne blanche, j'ai résolu mon problème en ajoutant simplement

      Code HTML:
      .page-header  {
      border-bottom:none;
      }
      (j'ai voulu essayer ca sur un coup de tête et c'est passer, maintenant ca me semble logique


      Je ne peu malheuresement pas vous donnez un lien vers mon site car je travail en local

      Cordialement.
      Dernière édition par Akharii à 29/07/2014, 13h28 Raison: correction ligne blanche
      Le blog des Développeurs NEP : http://nep-dev.blogspot.fr
      La communauté NEP : http://nep-gaming.fr/home

      Commentaire


      • #4
        Re : CSS spécifique pour un article et ligne blanche

        Alors tu n'as pas de solution.

        SI ton code PHP génère les balises H2 de tous les articles d'un type et que tu veux spécifier une particularité d'un cas, il ne te reste que la surcharge de composants. Faut il encore que cette surcharge puisse être distinguée des 'autres' cas d'articles habituels..

        Si tu peux le distinguer, il te faut modifier l'index.php de ton template ou surcharger la vue de ce cas.

        A noter que les dernières avancées en matière de layout, autorisent d'autres libertés de manœuvre, mais je ne connais pas la version de Joomla! que tu utilises : http://magazine.joomla.org/internati...our-joomla-3-2


        Cordialement
        Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

        Commentaire


        • #5
          Re : CSS spécifique pour un article et ligne blanche

          Envoyé par PieceOfCake Voir le message
          Alors tu n'as pas de solution.

          SI ton code PHP génère les balises H2 de tous les articles d'un type et que tu veux spécifier une particularité d'un cas, il ne te reste que la surcharge de composants. Faut il encore que cette surcharge puisse être distinguée des 'autres' cas d'articles habituels..

          Si tu peux le distinguer, il te faut modifier l'index.php de ton template ou surcharger la vue de ce cas.

          A noter que les dernières avancées en matière de layout, autorisent d'autres libertés de manœuvre, mais je ne connais pas la version de Joomla! que tu utilises : http://magazine.joomla.org/internati...our-joomla-3-2


          Cordialement
          j'utilise la dernière version de Joomla, et en effet le problème vient du fait que je ne peux pas identifier ce titre en particulier.

          J'ai tout de même reussi à contourner le problème en masquant le titre de cette article puis j'ai crée une catégorie spécifique à cette article et j'affiche uniquement le titre de cette catégorie.Donc dans mon cas ca passe vu que j'utilise que peu le systeme de categorie (j'ai seulement 3 categorie : articles featured et du coup la categorie specifique à cette page).Cela ma permi de préfixé mon titre de la maniere suivante :

          Code HTML:
          <span class="subheading-category">Mon titre</span>
          et donc de surcharger la classe subheading-category.


          J'ai donc pas trouver de solution pour le moment mais je vous post quand même ca desfois que certains tombe sur le même soucis que moi.
          Cette solution de 'substitution' ne convient malheuresement pas pour l'usage futur du client du coup retour à la case départ

          La solution :
          Edit 1 : J'ai résolu mon problème en surchargeant la classe item-page , en effet mes aurtes articles étant, le plus souvent, dans un blog de catégorie, j'ai pu remonter plus haut (vraiment haut ) dans le code et la ca m'a fait tilt
          Dernière édition par Akharii à 29/07/2014, 14h58
          Le blog des Développeurs NEP : http://nep-dev.blogspot.fr
          La communauté NEP : http://nep-gaming.fr/home

          Commentaire


          • #6
            Re : CSS spécifique pour un article et ligne blanche

            Akharii,

            Il existe une solution qui ne nécessite pas de modifier le code. C'est d'utiliser les paramètres d'affichage de page du lien de menu de type un article en mettant une classe de page.

            Par exemple, en mettant la classe de page " rouge" (avec espace devant) le code source résultant pour cette page est :
            Code HTML:
            <div class="item-page rouge" itemscope itemtype="http://schema.org/Article">
                <meta itemprop="inLanguage" content="fr-FR" />
                <div class="page-header">
                    <h2 itemprop="name">
                        <a href="/prive/test-j2522/index.php/parks-home" itemprop="url"> Parcs Australiens</a>
                    </h2>
                </div>
                ...
            </div>
            Pour utiliser cette classe dans le CSS, par exemple :
            Code:
            div.rouge div.page-header h2[itemprop*="name"],
            div.rouge div.page-header h2[itemprop*="name"] a {
                color: red;
            }
            On obtient un titre en rouge uniquement pour les articles ayant rouge en classe de page.
            Note : il faut le CSS avec et sans a puisque le titre peut-être cliquable ou pas.

            Amicalement,
            Rajoz

            Commentaire


            • #7
              Re : CSS spécifique pour un article et ligne blanche

              Merci pour l'astuce Rajoz
              Le blog des Développeurs NEP : http://nep-dev.blogspot.fr
              La communauté NEP : http://nep-gaming.fr/home

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X