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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Aradrar le Lun 4 Juin 2012 - 14:53

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'


Dernière édition par Aradrar le Mar 5 Juin 2012 - 11:06, édité 1 fois

Aradrar
Nouveau membre

Messages : 17
Inscrit(e) le : 04/06/2012

http://io-oasis.ogameteam.net/
Aradrar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par tupac le Lun 4 Juin 2012 - 17:53

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.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par Aradrar le Lun 4 Juin 2012 - 20:09

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

Aradrar
Nouveau membre

Messages : 17
Inscrit(e) le : 04/06/2012

http://io-oasis.ogameteam.net/
Aradrar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par Gourmandises le Lun 4 Juin 2012 - 20:11

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

Gourmandises
***

Messages : 134
Inscrit(e) le : 23/05/2012

http://forum.forumactif.com
Gourmandises a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par tupac le Mar 5 Juin 2012 - 0:12

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;.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par Gourmandises le Mar 5 Juin 2012 - 9:08

@tupac a écrit: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 ..

Gourmandises
***

Messages : 134
Inscrit(e) le : 23/05/2012

http://forum.forumactif.com
Gourmandises a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par Aradrar le Mar 5 Juin 2012 - 9:24

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 =)


Dernière édition par Aradrar le Mar 5 Juin 2012 - 9:58, édité 2 fois

Aradrar
Nouveau membre

Messages : 17
Inscrit(e) le : 04/06/2012

http://io-oasis.ogameteam.net/
Aradrar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: intégration d'HTML dans la page d'accueil

Message par Aradrar le Mar 5 Juin 2012 - 9:57

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 dwarf

_____________________________________________________________________________________________

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:
<style>

.widget_droite{
top: 3760px; /* widget a 50 pixels du haut */
left: 340px; /* widget placer a gauche a 5 pixels du bord */
background-color:#FFFFFF; /* fond widget */
border:7px solid #6DB000; /* bordure widget */
height:350px; /* hauteur widget */
width:895px; /* largeur widget */
position: absolute;
z-index: 100;
}

</style><div id="accordeon-pb" class="accordion">
<ol>
<li>
<h2><span>Fun</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/182376_10150897736988610_861253830_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Vacances</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/149698_10150814663458610_979445249_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Détente</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/551899_10150762129003610_2059350125_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Toujours du Fun</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578168_10150721001943610_92270828609_9436556_989698821_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>La Team</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/166050_10150932770043610_1852313199_n.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>

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 : http://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:
<style>

.widget_droite{
top: 3760px; /* widget a 50 pixels du haut */
left: 340px; /* widget placer a gauche a 5 pixels du bord */
background-color:#FFFFFF; /* fond widget */
border:7px solid #6DB000; /* bordure widget */
height:350px; /* hauteur widget */
width:895px; /* largeur widget */
position: absolute;
z-index: 100;
}


</style>

<div class="widget_droite"> <div id="accordeon-pb" class="accordion">
<ol>
<li>
<h2><span>Fun</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/182376_10150897736988610_861253830_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Vacances</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/149698_10150814663458610_979445249_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Détente</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/551899_10150762129003610_2059350125_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Toujours du Fun</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578168_10150721001943610_92270828609_9436556_989698821_n.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>La Team</span></h2>
<div>
<figure>
<img class="full" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/166050_10150932770043610_1852313199_n.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>
</div>

changez biensur vos valeur ^^

Aradrar
Nouveau membre

Messages : 17
Inscrit(e) le : 04/06/2012

http://io-oasis.ogameteam.net/
Aradrar a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum