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

[Akharii]

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 :

<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)



Bien cordialement

[PieceOfCake]

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

[Akharii]

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

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

<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 :

<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

.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.

[PieceOfCake]

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

[Akharii]

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

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 :

<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

[Rajoz]

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 :

<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 :

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

[Akharii]

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

Merci pour l'astuce Rajoz