TagComment - Installation des smileys, des tags et des citations

Uploadez icônes et boutons sur Internet (par FTP par exemple).

Vous pouvez le faire par Canalblog mais si vous devez modifier vos fichiers, Canalblog leur donnera un nom différent (un numéro d'ID) et ça vous obligera à modifier les endroits où les noms de fichiers sont référencés.

---

Récupérez tag_comment.js. Vous devrez le modifier en fonction des boutons ou smileys que vous voulez ajouter, rendez-vous donc aux sections idoines :

• Personnalisation de la barre des icônes
• Personnalisation du module de conversion
• Personnalisation du module de vérification des tags

... et mettez le en ligne.

---

Ensuite, il va vous falloir éditer les fichiers du modèle de votre blog.

Rendez vous donc dans le menu Apparence, et Editer les fichiers de ce modèle sur le modèle en cours.

Dans la liste déroulante sélectionnez : "Page d'un message"

Voici la liste des modifications à faire sur cette page.

• Insertion du code javascript (remplacez http://site.fr/blog/tag_comment.js par le lien vers l'endroit où vous avez uploadé tag_comment.js) :

<script language="Javascript" src="http://site.fr/blog/tag_comment.js"></script>

Entre :

<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />

Et :

</head>

• Astuce de remplacement et formatage des commentaires :

<form>
  <textarea id="commentStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1><$BlogCommentBody$></textarea>
  <textarea id="commentQuoteStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1>[quote <$BlogCommentAuthor$>;<$BlogCommentId$>;- le <$BlogCommentDate$> à <$BlogCommentTime$>]</textarea>
</form>
<p>
  <script language=javascript>
  <!--
    var v_str = document.getElementById("commentStr<$BlogCommentId$>").value;
    formatComment(v_str);
  //-->
  </script>
</p>

A la place de :

<p><$BlogCommentBody$></p>

• Icône de citation de commentaires spécifiques de la note (remplacez http://site.fr/blog/btn_citer.gif par le gif correspondant au bouton de citation de commentaire, sinon, mettez _) :

<img class="comIconImg" alt="Citation" src="http://site.fr/blog/btn_citer.gif" onclick="insertQuote(<$BlogCommentId$>)" />

Juste avant :

</div>
</CBComments>

• Vérification du commentaire en amont :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="return checkCommentAndSubmit(this)">

A la place de :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">

• Insertion de la barre d'icônes au dessus de la zone de saisie du commentaire :

<script language=javascript>
<!--
  displayCommentIcons();
//-->
</script><br />

Entre :

<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>

Et :

<p>
<label for="commentBody">

• Zone d'affichage d'erreur dans la saisie du commentaire :

<strong><span id="comErrorMessage"></span></strong>

Entre :

<input  type="submit" name="submit" value="Envoyer" />

Et :

<br />
</form>

---

Maintenant dans la liste déroulante, sélectionnez "Feuille de style générale".

Ajoutez les styles commentQuoteHeader commentQuoteBody comIconImg (et comIconImg:hover pour faire un effet de rollover sur les boutons de la barre des icônes), après la définition du style ".blogbody .itemfooter".

.blogbody .commentQuoteHeader {
    color: #004000;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    margin-left: 10px;
    margin-right: 10px;
    border-style: none;
    border-width: 0px;
    text-decoration: none;
}

.blogbody .commentQuoteBody {
    color: #004000;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    background-color: #EFFFF5;
    margin-left: 10px;
    margin-right: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #990099;
    text-decoration: none;
}

.blogbody .comIconImg {
    border-style: solid;
    border-width: 1px;
    border-color: #FFDDFF;
}
.blogbody .comIconImg:hover {
    border-style: dotted;
    border-width: 1px;
    border-color: #990099;
    background-color: #EFFFF5;
}

Et changez les paramètres donnés en exemple ci-dessus avec votre propre configuration.

Comments

[Lutine]

Bon cette etpae est faite
Je remrque seulement que dans mon code j'ai un tableau pour la ocnstruction du formulaire je vais surement devoir adapte le code pour que cela marche.
A suivre ...

[Lutine]

J'ai eu du mal a comprendre que tu voulais dire que les blocs de code remplacaient d'autres ... enfin maintenant j'ai compris
Je conseillerais tout de meme aux utilisateurs de ce script de copier coller la page d'origine dans un fichier qu'on garde bien au chaud
Et de faire les modification dans un editeur, c'est plus clair quand meme.