Image sur 1 côté du forum

[Jézebel L.]

Bonjour à tous

Besoin de vos lumières, svp,
je voudrais mettre une image sur le côté de mon forum, qui en cliquant dessus, renvoie à un sujet du forum.
J'ai lu sur votre forum, qu’apparemment c'est les widgets qui le font.
Mais bon, j'ai pas tout compris, et surtout je suis pas du tout douée en code css.

Quelqu'un pourrais m'aider, svp, pour le code ?

Merci d'avance.

[Matriochka]

Coucou,

C’est possible sans passer par les widgets… Mais avant de te faire faire n’importe quoi, cette image, tu la veux hors du cadre du forum ou bien à l’intérieur du cadre ?

[Jézebel L.]

Re ^^

Eh bien je veux la mettre hors des cadres
comme dans cet exemple_ci :

[Matriochka]

C’est bien ce que je pensais

Alors dans ce cas, il faut passer par les templates. Va dans PA > Affichage > Templates > Général, et ouvre le template overall_header. Trouve cette partie :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">

Insère ton image juste après, comme ceci, en lui mettant une class spéciale :

Code:

<a href="url_de_ton_lien.html"><img class="sortimg" src="url_de_ton_image.png" /></a>

Ensuite, dans ton CSS, tu gères le positionnement de ton image avec :

Code:

.sortimg {
left:0px;
top:0px;
position:absolute;}

[Jézebel L.]

Ah ! gros problème, je suis admin et j'ai aucun accès aux templates
et le fonda vient plus du tout.
c’est pour cela je voulais passer par un widget ou au pire par javasripts
ou par la feuille de css.

[Matriochka]

Ah, d’accord ! Ben dans ce cas, tu peux mettre ceci sur ton message d’accueil, mais le souci, c’est que ça apparaîtra seulement sur la page d’accueil de ton forum (l’index), pas sur les pages des sujets, etc. Ça ne te fait rien ?

[Jézebel L.]

Non, tant pis si ça n’apparait pas sur les autres pages.
Sur l'index du forum, c’est déjà bien ! ^^

Je dois faire quoi ?

[Matriochka]

Ben du coup, oublie l’histoire des templates, et mets juste ton image dans PA > Affichage > Page d’accueil > Généralités, là où tu as ton message d’accueil :

Code:

<a href="url_de_ton_lien.html"><img class="sortimg" src="url_de_ton_image.png" /></a>

Et après, même chose, tu positionnes ton image avec le CSS que je t’ai donné plus haut :

Code:

.sortimg {
left:0px;
top:0px;
position:absolute;}

En modifiant les valeurs 0px, évidemment

PS : Il faudrait peut-être penser à faire quelque chose avec le compte fondateur, non ? C’est un peu embêtant d’être limité au niveau du panneau d’admin… Il me semble que tu peux demander à ce que les droits de fondation te soient légués (mais je ne peux pas t’en dire plus, je connais assez mal cette procédure, ne l’ayant jamais approchée de près ou de loin).

[Jézebel L.]

Oui, je ferais une demande de passation de compte, car c’est sûre que je suis très limitée -_-

Merci pour les codes, mais il y aurais pas moyen de mettre l'image plus bas, vers les catégories (catégorie Administration) ?

Car là c'est trop haut ^^'

http://monde-oublie.forumactif.com/forum

[Matriochka]

Essaye avec ceci :

Code:

.sortimg {
position: absolute;
margin-left: -950px;
margin-top: -450px;}

Après il faut régler comme tu veux. Là, ça apparaît à côté de ta page d’accueil.

[Jézebel L.]

OK !!! Merciiiii !!! j'ai réglé ^^
et par contre je devrais réduire un peu mon image lol.

Par contre, il y aurait pas un code, pour que l'image suit, lorsqu’on fait défiler la page ?

Ou alors faire juste bouger un petit peu l'image.
afin d'attirer l'attention. ^^

[Jézebel L.]

up svp !

[Jézebel L.]

Up ^^

[Jézebel L.]

up !

[Jézebel L.]

up !!

[Jézebel L.]

up up up ! ^^'

[Jézebel L.]

SVP !

UP !!

[Adam_sfp]

Bonjour

Il faudrait essayer de remplacer

Code:

position: absolute;

par

Code:

position:fixed;

Et pour faire un effet( qui attire l'attention) vous pouvez rajouter un script de ce style

http://davidwalsh.name/demo/jquery-shake.php

Cordialement.

[Jézebel L.]

Bonjour,

J'ai mis fixed, mais l'image a disparue
et quels scripts je dois insérer ? et où svp
j'y connais rien en css malheureusement
aidez moi svp
merci.

[Adam_sfp]

Bonjour

vous avez du mal recopier quelque chose...

Si vous voulez mettre l'effet
il faudrait mettre dans description de site

Code:

 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

En page d'accueil

Code:

<div id="shaker"> <a href=""><img src="http://i48.tinypic.com/4ue34l.jpg" alt="" /></a> </div>

Dans votre CSS

Code:


#shaker    { position:fixed; top:10px; right:10px; width:198px; height:293px; display:none; }


*vous pouvez changer les valeurs top:10px; right:10px; pour changer la position de l'image.



Et dans modules gestion des codes javascript.

Panneau d'administration Modules Gestion des codes Javascript Créer un nouveau javascript

Voir un aperçu:

1. Indiquez un titre de votre choix au script (ex: shake)
2. Cochez les cases correspondantes aux endroits où vous souhaitez voir le script (ex: Toutes les pages)
3. Collez le code
4. validez

Code:

function periodical() {  $('#shaker').effect('shake', { times:3 }, 200); } $(document).ready(function() {  $('#shaker').hide().css('display','').fadeIn(600);  var shake = setInterval(periodical, 5000);      $('#shaker').click(function() {    clearInterval(shake);  })  });

Cordialement.

[Jézebel L.]

C'est super !!
Merciiiiii de tout cœur ! juste ce que je voulais
je n'aurais jamais pu y arriver sans votre aide, trop de codes et tout lol
Merci encore.

Prob résolu.