Modifier la police d'un titre H sans affecter les autres

[Solie]

Bonjour,

Je souhaiterais modifier la police et la taille du titre H2 sur ma page d'accueil (mon nom), sans que ceci se répercute sur les autres titres H2 du site. Méthode rouleau à oublier...

Est-ce possible avec du code ? Est-ce laborieux ?

Je vous remercie,
Solie

[FredVig]

EDIT : Finalement, je pense que la méthode décrite ci-dessous ne peut pas fonctionner. En recherche…
Tout est possible. Et c'est toujours différent d'un site à l'autre.
Du codage est nécessaire dans votre cas
- Affectez une police principale avec "l'outil de rouleau à peinture"
- Lisez les tutos principaux de la rubrique astuce tutos ("comment modifier un peu le design"…)
C'est vraiment indispensable de comprendre ce que l'on fait avec l'outil "modifier le Head" afin de paramétrer au plus juste votre design.
Concrètement, il vous faudra d'abord choisir une police pour cette première page
- Récupérer le code qui pilote ce design de police
- Indiquer dans le "modifier le Head" que le titre doit être dans cette police uniquement sur la page concernée
Cela devrait ressembler à quelque chose comme ça :

<style type="text/css">

Code:

/*<![CDATA[*/
#page-(ici le numéro de votre page d'accueil .(ici, l'identifiant de la class qui pilote votre titre)
{(entre ces accolades, les modif voulues)
font-family: "ici, votre police",sans-serif,"google";
font-size: 24px;
font-weight: normal;
font-style: normal; (et toute autre précision nécessaire)
}
/*]]>*/
</style>

Les deux premières et deux dernières lignes "fabriquent" une feuille de style pour votre site
Ce qui est entre parenthèse sont des indications pour expliquer le contenu.

[Solie]

Merci beaucoup Fred pour ces explications très détaillées ! Si j'ai bien compris, lorsque je repasserai à la police principale de mon choix avec le rouleau pour le reste du site, la modif restera en place ?

En bataillant sur ce titre hier, j'ai découvert qu'il était possible de changer la taille et la couleur individuellement. Et aussi tout ce que permet le module texte : gras, italique, lien, ajuster...
J'ai copié le texte d'un module titre, je l'ai collé dans un module texte. J'ai ainsi passé mon nom de orange à blanc, et agrandi la taille de la police. En cliquant sur le bouton HTML (sans rien toucher hein, parce que ça fait un peu peur), j'ai remarqué que mon texte est bien resté en titre H2. Bonne découverte. Seul inconvénient, moindre à présent, la police que l'on ne peut changer.

Pour cela, je vais potasser les tutos du forum, puis appliquer votre méthode dès que serai prête.

Merci

[FredVig]

Ah oui, j'oubliais cette astuce.
Jimdo est ainsi fait que, dans certains cas, lorsqu'on copie le contenu d'un module texte, ou texte + image, on copie aussi sa mise en forme, puisque c'est le html qui est copié.
Il est donc possible de copier de cette façon des groupes d'éléments sans passer par la reconstruction de nouveaux modules.
Le résultat est un peu hasardeux, et il est nécessaire de revenir sur le code html ainsi généré et de le nettoyer.
Toutefois, le module titre est un élément commun à toutes les pages.
Le code html que vous colleriez dedans serait le même partout.
Seule la feuille de style créez à partir du paramètre "modifier le HEAD" peut "forcer" un élément constant à être différent sur une ou plusieurs une pages précises.

[FredVig]

Mais en fait… je pense que je fais une erreur :
le module titre figurant dans la partie constante du site, il est probable qu'on ne puisse pas appeler l'argument d'une page particulière pour le modifier…
ce module doit être généré indépendamment de la page.
Par contre, cela doit être possible avec du javascript, qui, lui, peut vérifier quelle page est active, et modifier n'importe que élément en fonction de cela, après que la page est été chargée.
C'est un défi intéressant…

[FredVig]

Voici un principe qui peut fonctionner.
C'est un peu plus complexe que les modifications de CSS habituelles.

Cette méthode est testée sur ce site fredvig.jimdo.com

1 - Examinez l'élément titre.
Naviguez dans le code de la page jusqu'à l'élément du titre.
Sur ma page de test, le titre de la page est affecté par une class  : .j-website-title-content (le nom est différent d'un site à l'autre et il peut y avoir des combinaisons de class : par exemple, sur le site de Voixoff : ".content-options h2:not(.j-blog-headline):not(.j-blog-comment-counter) )

Nous avons donc, sur fredvig.jimdo.com :

Code:

.j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-family: "Arbutus Slab",serif,"google";
    font-size: 55px;
    text-transform: none;
    text-align: center;
}

Je vais créer une class similaire, mais avec une autre police.

Pour cela, je change temporairement le style du titre avec l'outil rouleau à peindre. Puis, je renouvelle mon inspection dans le code afin de récupérer la nouvelle class :

Code:


 .j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-size: 55px;
    text-transform: none;
    text-align: center;
  font-family: "Abril Fatface",fantasy,"google"!important;}

Je colle cette nouvelle class dans paramètre > "modifier le Head", (sans oublier les signes de déclaration de css) et je CHANGE le nom de la class en "autrepolice"

Code:

/*<![CDATA[*/
    .autrepolice {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-size: 55px;
    text-transform: none;
    text-align: center;
  font-family: "Abril Fatface",fantasy,"google"!important;}
/*]]>*/


J'enregistre, et je reviens à ma page d'accueil, où je crée un module html.
Dans ce module, je dis, en javascript : "si l'identifiant de la page est celui de la page où je veux que le titre change, alors le module titre est affecté par la class .autrepolice"
et ça peut s'écrire ainsi :

Code:

<script type="text/javascript">
/* <![CDATA[ */
/*déclaration de javascript
var titre = document.getElementById("cc-m-header-10225514922"); /* je donne un nom pratique à l'élément que je veux modifier, il devient temporairement la variable "titre"
if (document.getElementById("page-2074176622")) {
    titre.className="autrepolice";
/* si la page est la page d'accueil du site fredvig.jimdo.com, alors, changer la class de la variable titre par la classe "autrepolice"
}
/* ]]> */
</script>

Voilà, à adapter selon les circonstances, sachant que ce code ne fonctionne QUE pour mon site, bien entendu. Les intitulés et identifiants varient d'un site à l'autre.
De plus, selon que l'on place le module Javascript sur la page ou dans la sidebar, selon les autres codes présents sur le site, des interactions peuvent exiger de changer le code javascript.

[Solie]

J'ai honte, je ne comprends rien !
Je remarque toutefois que ça fonctionne sur votre test en ligne. Il faut que j'apprenne les bases, à commencer par comment naviguer dans les codes de mes pages. Il y a du boulot... Lol

[FredVig]

Ce n'est pas très complexe, mais exige un peu d'habitude du codage html, CSS et javascript.
Désolé de ne pouvoir être davantage explicite.

[FredVig]

Pour naviguer dans le code des pages, cliquez-droit sur un élément de votre page et allez dans 'inspecter l'élément" Le navigateur (firefox ou Chrome) ouvrira une page d'inspection.
Vous verrez la structure html de votre page, le code source, sous la forme d'une liste d'éléments imbriqués. En naviguant dans cette liste, cela met en surbrillance les éléments sur votre page site

[Contenu sponsorisé]