Débuter sur iWeb : des commentaires sur FTP
-
Commentaires gratuits sur FTP
introduction
Poster des commentaires sur un blog iWeb est une option proposée par Apple à ses seuls abonnés MobileMe. Dommage pour tous ceux qui on choisi un autre moyen d’hébergement. Heureusement pour eux, Intensedebate est une service gratuit permettant d’afficher des commentaires sur un site hébergé sur un FTP.
21 mars 10
DEBUTER SUR MAC :
Pages utiles pour iWeb :
La fenêtre des couleurs
LIENS :
LIENS EN ANGLAIS :
AUTRES :
Wyodor
Menu :
Installation - Personnalisation - barre de scroll - A vous la parole !
Petit retour en arrière :
J’avais fait par le passé, 2 articles sur intensedebate (un sur l’installation, l’autre sur la personnalisation) . Pour un souci de clarté, je les ai regroupés ici. j’en profite pour ajouter une astuce pour ne pas devoir redimensionner le widget fragment HTML à chaque nouveau commentaire ajouté . N’ayant toujours pas la solution miracle pour adapter la hauteur du widget à celle de son contenu, je vous propose un simple «scrolling vertical» au sein du widget.
j’en profite pour signaler que le problème de publication rencontré par les utilisateurs de Firefox semble actuellement résolu.
Installation :
Tout commence par cette page .
Evidemment on commence par créer son compte : cliquer sur «Sign up»
Page suivante : reste à choisir un pseudo, donner son adresse mail, et choisir un mot de passe ( à entrer deux fois) puis cliquer sur Sign up
Page suivante : entrer l’adresse de votre site web.
Page suivante : il faut choisir la plateforme, comme iWeb n’est pas parmi les exemples cités, il faudra choisir le lien tout moche «Generic install» sous les autres qui ont le droit à leur icône personnalisée.
Page suivante : Là il devrait avoir un aperçu de votre site à droite et à gauche une colonne
«Javascript install».
Dans la colonne de gauche , copier le code sous
«1. Copy and paste the following code into the area where you would like Intense Debate comments to appear:»
Et collez-le dans un widget fragment HTML d’une page d’iWeb.
Pensez à réajuster la taille du widget «Fragment HTML» à des dimensions réalistes (par ex ici j’ai choisi 580px de large sur 1500px de long, je serais peut être amené à modifier la hauteur si jamais cela le necessitait)
Edition de cet article : finalement, j’ai bien été amené à modifier la hauteur sur d’autres pages donc je choisi de commencer avec 2000px de hauteur et non 1500 px comme indiqué sur cette image
Publiez votre site .
Personnalisation :
intensedebate donne un code que l’on entre dans un fragment HTML.
Après on se contente d’adapter la largeur la longueur du widget à son contenu en question et basta!
Mais il faut bien l’avouer, c’est un peu moche.
a. Changer le style sur le site d’intensedebate :
Menu (My Account - Extras - Sites - Help) > Sites > choix de votre site > Barre latérale gauche > Setting > Custom CSS
Pour cela vous pouvez vous aidez de la documentation que vous trouverez sur cette page.
b. Changer le style dans le fragment HTML :
Sinon je vous propose plus simplement de mettre celui ci dans un widget fragment HTML:
<style type="text/css">
body
{
background-color:#3E3E3E;
color: #ffffff;
font-family: 'LucidaGrande', Verdana, Arial, sans-serif;
}
a:link
{
color: #2D2D2D;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #65A20A;
}
a:hover
{
text-decoration: none;
color: #99ff00;
}
a:active
{
text-decoration: none;
color: #65A20A;
}
#idc-container h3
{
font-size: 13px;
color: #E55B30;
}
</style>
ici on met le code d’intensedebate
et je vais développer la partie que j’ai mise en orange qui concerne le style
ici j’ai modifié 3 éléments :
-
‣body : le contenu du widget, son arrière plan, la police utilisée et sa couleur
-
‣a : les liens et leurs 4 états possible (non visité, survolé, cliqué et visité)
-
‣#idc-container h3 : les titres «Comments» et «Post a new comment»
body : le contenu de la page
-
‣La police sera
-
‣blanche (color: #ffffff;)
-
‣préférentiellement LucidaGrande (font-family: 'LucidaGrande', Verdana, Arial, sans-serif;)
-
‣l’arrière-plan sera gris (background-color: #3E3E3E;)
a concerne les liens , a:link (lien), a:visited (lien d'une page déjà visité), a:hover (lien survolé à la souris) , a:active (clic sur le lien)
ici les liens ne seront pas souligné : text-decoration: none;
et apparaitront en vert : color: #65A20A;
au survol de la souris (a:hover) le vert sera un peu plus clair (color: #99ff00;)
#idc-container h3 concerne les titres «Comments (n°)» et «Post a new comment»
ici ils ont une taille de 13 pixels (font-size: 13px;)
et sont oranges (color: #E55B30;)
A vous de faire vos propres modifications de couleurs et polices.
Définir la hauteur d’un widget «fragment HTML» et lui ajouter une barre de «scroll» :
Quand les commentaires deviennent trop nombreux pour s’afficher totalement sur toute la hauteur du widget, on a comme solution d'augmenter la hauteur du widget «fragment HTML» ou d’ajouter une barre de scroll vertical au sein de ce widget.
<div style="width:560px;height:2000px; overflow-y: scroll;">
ici on met le code d’intensedebate
</div>
Ici la largeur du widget sera de 560 px (width:560px) pour une hauteur de 2000px (height:2000px) , si les commentaires devaient dépasser cette hauteur une barre de scroll apparait ( overflow-y: scroll;).
Pensez à remplacer la ligne en vert par le vrai code d’intensedebate. ;)
Pour ceux qui ne souhaite pas personnaliser intensedebate, le code ci-dessus suffit. Pour les autres voici comment se dipose le code le code style et les reste
Au total : en ajoutant le code style et celui du scroll
<style type="text/css">
body
{
background-color:#3E3E3E;
color: #ffffff;
font-family: 'LucidaGrande', Verdana, Arial, sans-serif;
}
a:link
{
color: #2D2D2D;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #65A20A;
}
a:hover
{
text-decoration: none;
color: #99ff00;
}
a:active
{
text-decoration: none;
color: #65A20A;
}
#idc-container h3
{
font-size: 13px;
color: #E55B30;
}
</style>
<div style="width:560px;height:2000px; overflow-y: scroll;">
ici on met le code d’intensedebate
</div>
La théorie c’est bien, je m’arrêterai là. Passons maintenant à la pratique.
Vous pouvez laisser vos commentaires ci-dessous :
Commentaires :