Menu :

Installation - Personnalisation - barre de scroll - Commentaires



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)





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.


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. Puis coller ce code CSS dans la page CustomCSS :




Par ex.


body{

background-color:#3D3D3D;

}

#idc-container-parent #idc-container {

position: relative;

padding-top: 320px;

padding-left:10px;

padding-right:10px;

}


#idc-container-parent #idc-container #IDCommentsNewThreadCover {

position: absolute;

top: 0;

left: 10px;

}

#idc-container-parent #idc-container,

#idc-container-parent #idc-container div {

color: #999;

background-color:#3D3D3D;

font-family: 'LucidaGrande', Verdana, Arial, sans-serif;

font-size: 12px;

}

#idc-container-parent #idc-container h3 {

font-size: 14px;

color: #FF8000;

}

#idc-container-parent #idc-container a {

text-decoration: none;

color: #757575;

}

#idc-container-parent #idc-container a:hover {

text-decoration: none;

color: #FF8000;

}




et je vais développer :


Body concerne le fond de la page du widget

(background-color:#3D3D3D;) le fond de la page sera gris


#idc-container-parent #idc-container : le contenu du module d'intensedebate

  1. La police sera

  2. gris-clair (color: #999;)

  3. de taille 12px ( font-size:12px)

  4. préférentiellement LucidaGrande (font-family: 'LucidaGrande', Verdana, Arial, sans-serif;)

  5. l’arrière-plan sera gris (background-color:#3D3D3D;)


#idc-container-parent #idc-container a concerne les liens ,

( a (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; sont gris clair #757575

et apparaitront en orange : color: #FF8000 au survol de la souris (a:hover).


#idc-container-parent #idc-container h3 concerne les titres «Comments (n°)» et «Post a new comment»

ici ils ont une taille de 13 pixels (font-size: 14px;)

et sont oranges (color: #FF8000;)


Pour faire apparaitre la boite de commentaire en haut et non en bas ( comme par défaut) :

#idc-container-parent #idc-container #IDCommentsNewThreadCover {

position: absolute;

top: 0;

}


A vous de faire vos propres modifications de couleurs et polices.


Autres personnalisations :


On peut choisir la couleur des boutons (menu latéral du site d'intensedebate > Setting > Layout)

on peut choisir la langue, parait il ... J'ai essayé en vain  (menu latéral du site d'intensedebate > Setting > Account)


Définir la hauteur du 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:760px;height:1000px;overflow-y: scroll;">

ici on met le code d’intensedebate

</div>



Ici la largeur du widget sera de 760 px (width:760px) pour une hauteur de 1000px (height:1000px) , si les commentaires devaient dépasser cette hauteur une barre de scroll apparait ( overflow-y: scroll;).


Mais pour ceux ,qui comme moi, ne souhaitent pas afficher la barre de scroll sans empecher le scroll vertical pour autant voici le type de code à utiliser


<div style="width:760px;height:1000px;overflow:hidden;"><div style="width:776px;height:1000px;overflow-y: scroll;">

ici on met le code d’intensedebate

</div></div>



En gros j'affiche mon widget dans une "div" (sorte d'espace rectangulaire) de 776 px de large et 1000px de haut où le scroll vertical est autorisé overflow-y: scroll; et j'affiche cette dernière dans une autre div plus étroite (-16px  width:760px ) mais de même hauteur où se qui dépasse (à droite est en bas) est masqué (overflow:hidden;) masquant par la même la barre de scroll de la barre de div la plus large à droite.


Pensez à remplacer la ligne en vert  par le vrai code d’intensedebate. ;)


La théorie c’est bien, je m’arrêterai là. Passons maintenant à la pratique.

 

Commentaires   |   Accueil     Archives     Précédent     Suivant    Forum     Mon Twitter     Débuter sur Mac