SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Aller à la page : 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 2]

1 hover sur les forums (sections) le 29/3/2010, 23:24

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
Bonsoir,

tout d'abord pardon si la question à déjà été posée, j'ai cherché dans l'archive mais j'ai rien trouvé de concret..

Voila, je voudrais faire en sorte que mes catégories changent d'apparence lorsqu'on passe la souris dessus, exemple : vôtre hover ..mais je voudrais qu'une petite icone apparaisse et pas que la case s'illumine
(j'éspere que vous aurez compris, j'ai du mal à l'expliquer )

merci par avance pour vôtre aide

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Hello !

Quelle est la version du forum en question ?

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
bonsoir,
dsl pour ce retard..
en fait ma version c'est le SF-BB , donc en phpBB2 je crois

merci Smile

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
D'accord, ok.

Alors, tu souhaites mettre une image de fond ?
Comment est cette image ? Est un dégradé ? Doit elle être centrée ?

Son positionnement est important, car on va peut être devoir tritouiller un peu les templates.

Au fait, peut on voir l'adresse du forum en question ?

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
Bonjour,

voila l'adresse (je rappel que c'est pour l'instant un fo de test) : Fo de test

sinon, j'aimerais qu'une petite image en png apparaisse lorsque on passe la souris sur les "cases" des catégories... j'aurais aimé que les bordure s'illumine, mais je ne voudrais pas calquer vôtre idée, donc je préfére choisir l'apparition d'une image.

Elle serais en png (transparente donc) et assez petite, genre 50px sur 50px
je ne sais pas encore de quel genre, je ne l'ai pas faite encore..

voila, merci infiniment pour vôtre aide et surtout vôtre patience, je ne peut malheureusement pas venir aussi souvent que je le voudrais (pour le moment) mais bientôt j'aurais du temps)

merci

edit : j'ai oublié un truc..
j'aurais aimé que cette image apparaisse en bas a droite de la case svp
merci

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Bonjour,

En l'absence de ZC, je veux bien essayer de t'avancer un peu...
Le seul truc qui me chiffonne c'est que tu parles des forums (sections) et non des catégories, c'est bien ça ?
Il faut que l'on s'exprime comme dans le PA >> Général >> Catégorie et forums
Donc là les catégories sont les grandes parties comprenant des forums qui eux peuvent contenir des "sous-forums"...
(Mais que nenni, je ne suis point du tout tatillonne Vide Very Happy)

Une autre question avant : Tu voudrais la même image pour tous les forums et sous-forums ?

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
heu... oui en fait j'ai du me tromper.. donc les catégories ce sont les titres ecris en argenté.. donc les rectangles noirs sont des "forums" ( je pense que c'est ça)
exemple le forum "règlement".. puis le forum " présentation" ..

dsl j'avais pas fais gaffe

donc oui je voudrais changer l'aspect des forums sur l'accueil
merci à toi

edit : oui je vais prendre la même image... puisque je ne sais pas encore quoi ajouter comme forum, je ne pourrais pas faire toutes les images.. sauf si tu me l'explique, je les ajouterais au fur et a mesure ensuite ( si c'est pas trop compliqué bien sur)
merci

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
dsl pour le double post..
en fait je vais mettre une ligne qui s'affiche sur le bas du rectangle noir.. ( quand on passe la souris dessus)
une genre de truc qui s'illumine
donc un rectangle d'a peu pres 260px de large sur 10px de haut..
c'est possible ?

voila l'image :



merci

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Sorry du retard, mais j'ai des cours...

Pour ce qui est de faire un soulignement par le hover avec ton image c'est possible, mais difficile à régler comme le padding (espacement) et autre...
Alors nous allons devoir "tricher" un peu...

Dans le template index_box cherche :
Code:
<span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
Dans cette zone nous allons ajouter une div tout autour afin de lui donner des propriétés d'un hover et une image vide avec le même attribut "class" disons "lineal".
Alors juste avant ce block ajoute :
Code:
<div class="lineal"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<img src="http://illiweb.com/fa/empty.gif" class="lineal" width="260" height="8" border="0" />
            </span></div>

Dans le CSS ajoute ces propriétés :
Code:
.lineal:hover {background: transparent url('http://i67.servimg.com/u/f67/15/07/73/78/barre_10.png') bottom center no-repeat;
}

Cela dit, c'est très original je trouve, ça me plait bien que certains essaient des "trucs" qui détonne du standard.

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
merci beaucoup .. pour l'originalité je dois deja remercié SOS forum..
j'espere trouver des choses interressantes pour embelir encore un peu plus cette belle structure. ( SF-BB)

merci infiniment pour ton aide, je test ça dés ce soir
je reviendrais te dire si je m'en sort

merci

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Je t'en prie et sans souci si tu bloques quelque part.

Tu verras que quand tu survoles l'image, elle se met en surbrillance... Wink

avatar
Invité
Invité
Bonsoir

Comme j'essaie de faire la même chose (à peu prés), je te mets la solution que j'ai employée et qui évite de passer par les templates (car j'y comprends rien).

Seulement css donc auquel il faudra ajouter un padding.

Code:
.transtable:hover { background-color: transparent;
border: none;
background-image: url('http://i60.servimg.com/u/f60/11/40/46/60/forhov10.png');
background-repeat: no-repeat;
background-position: top center; }

J'en profite pour poser une question vu que c'est la même chose, et que ça peut donc t'aider. Comment centrer horizontalement et verticalement l'image dans ce cas ?
Merci

avatar
demeter
(Membre)
Voir le profil de l'utilisateur http://altitudetropicale.forums-actifs.com/forum.htm
Géniale cette astuce. J'adopte à 100%. Superbe travail Final blond

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
Bonjour,
merci laurent pour ton aide..
voila j'ai testé dans le CSS, seulement ça me met deux barres :
une en haut de la case (donc sur le titre des forums) et une autre juste a gauche ( la ou se trouve le bouton no message) .. de plus, j'en ai une en hover dans le QEEL qui se duplique au fur et a mesure qu'on descend la souris ..

la j'ai du temps, je vais tester en passant par le template index_box et je vous dis ce que ça donne Wink

edit :
j'ai testé la version template :

voila la barre est bien placée, mais les titres ce sont dupliqués (l'un en dessous de l'autre)
et mes cases ne sont plus allignées...
merci de vôtre aide


et voila avec le hover :



donc c'est parfait en passant par le template, sauf ce soucis de double titre et mes forums qui ne sont plus alignés..

merci a vous

Edit²:
dsl pour ce long message, je veut éviter les doubles post..
voila, j'ai changé la largeur de mon image dans le code, donc mes forums ont repris leur place, c'est a dire par 3 sur une ligne.
maintenant je cherche comment faire pour ne plus avoir deux fois le titre..
si vous aviez une idée ?

ps : pas de soucis pour le temps, y'a pas urgence, les cours c'est importznt, je suis moi même tres occupé en ce moment..
merci beaucoup



Dernière édition par Sadness le 8/4/2010, 10:38, édité 1 fois

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Alors chose très étrange, ça m'a fait la même chose sur le FT... afro

J'ai cherché partout, et j'ai trouvé l'erreur dans la description des forums !
Il y avait
Code:
<div class="forumlink"><a href="url_de_ la_section">TITRE DE LA SECTION BIS</a></div>

Si je supprime cela des descriptions de forum, tout est dans l'ordre et voici ce que j'obtiens lors d'un hover sur une section :

C'est bien ce que tu recherches ?

EDIT : Si tes sections ne sont plus alignées, c'est que l'image est trop large.
Deux solutions : Ou tu augmentes la largeur de ton forum, ou tu diminues celle de ton image.
Celle qui est vide dans le template, tu peux lui enlever sa propriété "width" et juste lui laisser sa hauteur : height="8"



Dernière édition par Final-Blond le 8/4/2010, 10:44, édité 1 fois

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
kikou, je venais justement d'éditer mon precedent message, je ne pensais pas que tu etais la
oui pour l'image donc c'est réglé, elle etait trop large, j'ai changé ça dans le template.
par contre je vois pas trop ce dont tu parle pour la description, car moi je n'ai rien mis dedans.. je voulais faire le plus soft possible.. j'ai même retiré les "br" pour que mes cases soient plus petites..

sinon oui c'est bien ce que je cherche comme effet

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Hum...
Je suppose que tu as vérifié, parce que même moi, je ne sais pas d'où vient ce bins dans la description des forums ?!

Bon, peux-tu donner ton template index_box ou juste la depuis la grande balise avant :
Spoiler:
Code:
   <!-- BEGIN forumrow -->
   <table cellspacing="1" cellpadding="0" border="0" style="width: 33%; border: 2px transparent solid; display: inline-table;"><tr><td class="backcorner4" style="background-image: url('{catrow.forumrow.FORUM_FOLDER_IMG}'); background-repeat: no-repeat; background-position: center;"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0" style="background: transparent!important;"><tr>
      <td class="transtable" valign="top" align="center" width="100%" height="50" style="background: transparent!important;">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <div class="lineal"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<img src="http://illiweb.com/fa/empty.gif" class="lineal" height="8" border="0" />
            </span></div>

         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span><br />
 <i><span class="gensmall">{catrow.forumrow.POSTS} Posts in {catrow.forumrow.TOPICS} Threads</span></i><br /><span class="gensmall">Last post : </span><span class="hidding"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></span>
      </td>

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
oui bien sur, jte le met au complet : (ps) je viens de changer le 200 par un 220) en fait je test ce qui va le mieux pour la largeur de l'image..
Spoiler:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->

        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a><span class="supprimg">{NAV_CAT_DESC}</span></div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
*
        <!-- END switch_user_logged_in -->
       
      </td>
  </tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td class="styletable"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"  style="background-color: transparent; background-image: none;"> {catrow.tablehead.L_FORUM} </th></tr></table></div></div></div></div></td></tr></table><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center">
  <!-- END tablehead -->


  <!-- BEGIN forumrow -->
  <table cellspacing="0" cellpadding="0" class="forumcell" border="0" style="display: inline-table;"><tr><td style="padding: 3px;"><div class="backcorner2"><div class="upperleft"><div class="upperright"><div class="lowerleft"><div class="lowerright"> <table class="transtable" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
      <td class="transtable" align="center" valign="middle" style="padding: 5px;">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="transtable" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
<div class="lineal"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<img src="http://illiweb.com/fa/empty.gif" class="lineal" width="220" height="8" border="0" />
            </span></div>
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span><hr />
 <i><span class="gensmall">{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span></i><hr /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr></table></div></div></div></div></div></td></tr></table>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
</td></tr></table><div style="width: 100%; height: 15px;"></div>
<!-- END tablefoot -->
<!-- END catrow -->



Dernière édition par Sadness le 8/4/2010, 10:59, édité 2 fois

avatar
Invité
Invité
Ta reponse FB #10124


Dans le template index_box cherche : bla bla bla

Alors juste avant ce block ajoute : plutôt "change par bla bla bla bla"

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
???

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
heu.. l'étoile je l'ai mise car je cherchais un endroit pour ajouter un truc
est ce que ça peut être une source d'ennui dans le code ??

avatar
Invité
Invité
Quand elle te dit ajoute avant ...

Code:
<div class="lineal"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<img src="http://illiweb.com/fa/empty.gif" class="lineal" width="260" height="8" border="0" />
            </span></div>

C'est remplace ... sinon c'est en double

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
ahh ... dsl j'avais pas compris qu'il fallait remplacer..
je change ça de suite , merci beaucoup Laurent

avatar
Sadness
(Membre)
Voir le profil de l'utilisateur
ayé c'est parfait Vide c'est exactement ce que je voulais
merci a vous deux pour vôtre aide, je suis ravie

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Erf ! Au temps pour moi. Merci Laurent !
Sorry Sadness.

Bon alors tout est ok ?

Je verrouille et j'archive ?


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 2]

Aller à la page : 1, 2  Suivant

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

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit