intégration d'HTML dans la page d'accueil

[Aradrar]

Bonjour à tous,

Mes recherches étant infructueuses, je demande votre aide =)

Dans les pages HTML j'ai 2 ID dont j'aimerai intégrer dans ma page d’accueil, soit un TagCloud et un outil de localisation déjà tout fais... Cependant pas n'importe où ^^
Je ne sais pas si c'est possible mais est-ce que l'outil de localisation (une planète) peut être placé à la place de l'icone du QEEL ? comment cela pourrait se faire ? Ainsi que le TagCloud, est-il possible de le placer en bas des catégories des forums, en dessous du QEEL ?
Je suis sous phpbb3...
Sinon, je peux me passer du QEEL et du Tagcloud en HTML et les créer en widget, cependant s'il est possible d'obtenir les codes pour le QEEL alors ? J'espère bien me faire comprendre ^^... Personnellement si la solution est la forme widget, existe t-il une solution pour que les widgets soient situé sur la colonne 2 (centrale) sous le forum ? (à la place du QEEL actuel en quelque sorte ^^)

Merci d'avance de vos réponse,
Cordialement à tous
Arad'

[tupac]

Bonjour

Pour pouvoir faire ce que vous souhaitez il vous faut passer par les templates mais votre version n'en possède pas donc une seul solution passer par les widgets.

[Aradrar]

existe-t-il un moyen de passer les Widget en dessous du forum et pas sur les barres latérales ?

[Gourmandises]

Bonsoir,

Il serait certainement possible de "créer" des widget et de les mettre dans le Overall-footer, mais pas dans votre version..

Passez en PhpBB2 ou utilisez les widgets latteraux

[tupac]

Bonsoir

Pourquoi ne pas faire votre widget vous même comme ceci.

Placer le contenu suivant dans votre page d'accueil.

Code:

<style>

.widget_gauche{
    top: 50px;                /* widget a 50 pixels du haut */
    left: 5px;                    /* widget placer a gauche a 5 pixels du bord */
    background-color:#cecece;          /* fond widget */
    border:3px solid #404040;          /* bordure widget */
    height:200px;                          /* hauteur widget */
    width:150px;                        /* largeur widget */
    position: absolute;
    z-index: 100;
}

</style>

    <div  class="widget_gauche"> 
votre contenu ici
  </div>

A vous de le personnaliser comme bon vous semble et si vous voulez que votre widget reste fixe, remplacer le position: absolute; par position: fixed; pour le positionner à droite du forum remplacer left: 5px; par right: 5px;.

[Gourmandises]

Bonsoir

Pourquoi ne pas faire votre widget vous même comme ceci.

Placer le contenu suivant dans votre page d'accueil.

Code:

<style>

.widget_gauche{
    top: 50px;                /* widget a 50 pixels du haut */
    left: 5px;                    /* widget placer a gauche a 5 pixels du bord */
    background-color:#cecece;          /* fond widget */
    border:3px solid #404040;          /* bordure widget */
    height:200px;                          /* hauteur widget */
    width:150px;                        /* largeur widget */
    position: absolute;
    z-index: 100;
}

</style>

    <div  class="widget_gauche"> 
votre contenu ici
  </div>

A vous de le personnaliser comme bon vous semble et si vous voulez que votre widget reste fixe, remplacer le position: absolute; par position: fixed; pour le positionner à droite du forum remplacer left: 5px; par right: 5px;.

Je crois que ce membre souhaite un widget en bas de son forum..centré mais dans le footer ..

[Aradrar]

si le footer est le bas de la page oui c'est bien sa... Mais je vais essayer de le placer en bas en touchant les codes, je verrai bien ce que cela fait =)
Merci, si vous avez d'autre idée, sa m'embeterai de passer en phpbb2,
J'essaye et je vous répond =)

[Aradrar]

Bon et bien sa marche, je vois le principe. Après diverses modifications j'ai mis des cadres par dessus le QEEL + les stats... J'espère juste que c'est valable pour toutes les résolutions...

par contre, un truc qui serai encore plus top ^^ c'est de pouvoir mettre un accordéon (voir les tutoriels) cette fois ci en bas,
voici le code du tuto modifié par mes soins, mais je ne reconnais pas les balises de placement... j'espère qu'il ne faut pas toucher les templates ^^

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 850,
      containerHeight: 300
    })
  });
});
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

PS : je vais me faire sanctionner j'ai un double post, mais en même temps j'arrive pas à supprimer mon dernier message

_____________________________________________________________________________________________

EDIT :

Après plusieurs manipulations, j'ai intégré le javascript de l'accordéon au corps du widget fabriqué, avec les bonnes mesures:

Spoiler:

Le cadre se situe toujours en haut de la page d'accueil. j'aimerai qu'il soit en bas (c'est pour cela que je l'ai intégré aux balises des cadres préfabriqué). Comme vous pouvez le voir j'ai déjà un espèce d'accordéon, j'aimerais bien en avoir 2 en faite (j'ai fait 2 javascript différents en changeant les valeurs et les noms...). Comme je ne suis pas un pro du javascript et du HTML, je pense n'avoir pas saisi un truc ^^

PS : Je ne sais pas si mon sujet est au bon endroit, un modérateur devrait le déplacer ici : https://forum.forumactif.com/f74-probleme-avec-un-script-un-code. désolé ^^


___________________________________________________________________________________

RE EDIT :

C'est bon j'y suis arrivé, il y avait un bug de balise, alors pour ceux que cela interesse :

Spoiler:

changez biensur vos valeur ^^